Echarts的使用教程

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