Echarts的使用教程

專案中需要使用圖表，最初使用的.NET自帶的MSChart控制元件，做出來的效果不太好，所以又使用了Echarts控制元件。

MSChart原始碼放在最後，可自行下載檢視。

Echarts是一個基於 JavaScript 的開源視覺化圖表庫，在此是在.NET MVC中的使用，其他專案也應該是如出一轍。

Echarts官網：http://echarts.apache.org

Echarts下載：https://echarts.apache.org/zh/download.html

 

使用說明：

　　1、引入ECharts

    <script src="~/Content/echarts/echarts.min.js"></script>

　　 2、為ECharts準備一個具備大小（寬高）的Dom

     <div id="chart_rentalreturn" style="width: 700px;height:300px;"></div>

　　 3、建立關於圖表屬性的物件

public class normal
    {
        /// <summary>
        /// color
        /// </summary>
        public string color
        {
            get;
            set;

        }

    }
    public class itemStyle
    {
        /// <summary>
        /// normal
        /// </summary>
        public object normal
        {
            get;
            set;
        }
    }
    public class data
    {
        public string name
        {
            get;
            set;
        }
        public int value
        {
            get;
            set;
        }
        public object itemStyle
        {
            get;
            set;
        }
    }

    public class Series
    {
        /// <summary>
        /// sereis序列組id
        /// </summary>
        public int id
        {
            get;
            set;
        }
        /// <summary>
        /// series序列組名稱
        /// </summary>
        public string name
        {
            get;
            set;
        }
        /// <summary>
        /// series序列組呈現圖表型別(line、column、bar等)
        /// </summary>
        public string type
        {
            get;
            set;
        }
        /// <summary>
        /// series序列組的itemstyle
        /// </summary>
        public object itemStyle
        {
            get;
            set;
        }
        /// <summary>
        /// series序列組的資料為資料型別陣列
        /// </summary>
        public List<object> data
        {
            get;
            set;
        }
    }

　　 4、控制器中建立方法

public JsonResult GetEchartsRentalReturn()
        {
            //圖表的category陣列
            List<string> categoryList = new List<string>();
            //圖表的series陣列
            List<Series> seriesList = new List<Series>();
            //設定legend內的data陣列為series的name集合
            List<string> legendList = new List<string>();
            legendList.Add("Rental"); //這裡的名稱必須和series的每一組series的name保持一致
            legendList.Add("Return");

            Series rentalSeries = new Series();
            rentalSeries.id = 0;
            rentalSeries.name = "Rental";
            rentalSeries.type = "line"; //線性圖
            rentalSeries.data = new List<object>();
            rentalSeries.itemStyle = new itemStyle { normal = new normal { color = "#0099FF" } };

            Series returnSeries = new Series();
            returnSeries.id = 1;
            returnSeries.name = "Return";
            returnSeries.type = "line"; 
            returnSeries.data = new List<object>();
            returnSeries.itemStyle = new itemStyle { normal = new normal { color = "#00CC00" } };
            Random rd = new Random();
            for (int i = 6; i <= 23; i++)
            {
                categoryList.Add(i.ToString());
                rentalSeries.data.Add(rd.Next(0, 801));
                returnSeries.data.Add(rd.Next(0, 801));
            }

            //將sereis物件加入sereis陣列列表內
            seriesList.Add(rentalSeries);
            seriesList.Add(returnSeries);
            var newObj = new
            {
                category = categoryList,
                series = seriesList,
                legend = legendList
            };

            return Json(newObj, JsonRequestBehavior.AllowGet);
        }　　

　　 5、建立圖表

    <script type="text/javascript">
        $(document).ready(function () {
            func_echarts_pie_rentalreturn();
        });

        function func_echarts_pie_rentalreturn() {
            // 基於準備好的dom，初始化echarts例項
            var myChart = echarts.init(document.getElementById('chart_rentalreturn'));

            // 指定圖表的配置項和資料
            var option = {
                title: {
                    text: 'Rental/Return Frequency  (Unit  X:Hour   Y:Times)',
                    bottom: '92%'
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: ['Rental', 'Return'],
                    bottom: '87%'
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                toolbox: {
                    feature: {
                        saveAsImage: {}
                    }
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false
                },
                yAxis: {
                    type: 'value'
                },
                series: []
            };

            $.ajax({
                type: "post",
                url: "/Home/GetEchartsRentalReturn",
                data:
                {
                    async: false,
                    operate: "myChart"
                },
                dataType: "json",        //返回資料形式為json
                success: function (result) {
                    for (var i = 0; i < result.length; i++) {
                        result[i].name;
                    }
                    option.xAxis.data = result.category;
                    option.series = result.series;
                    option.legend.data = result.legend;
                    myChart.setOption(option);
                },
                error: function (errorMsg) {
                    //請求失敗時執行該函式
                    alert("圖表請求資料失敗!");
                }
            });
        }
    </script>

　　 6、圖表效果顯示

 

 

結語：使用ECharts之後，覺得功能很強大，可以滿足任何圖表的需求，需要的功能都可以在官網的示例中找到。這裡只寫了一個簡單的使用，其餘的可根據官網示例自行摸索。

MSChart原始碼下載：

　　連結：https://pan.baidu.com/s/1RF0mYfssp6cmRAEJV2Bv8g
　　提取碼：lju8