Echarts框架的使用

基本入门

1、 新建一个echarts.html文件，为ECharts准备一个具备大小（宽高）的Dom。

<!-- 为ECharts准备一个具备大小（宽高）的Dom -->

    <div id="main" style="height:400px"></div>

2、 新建<script>标签引入模块化单文件echarts.js

<script src="dist/echarts.js" type="text/javascript"></script>

3、 新建<script>标签中为模块加载器配置echarts和所需图表的路径（相对路径为从当前页面链接到echarts.js），引入图表文件见引入ECharts2

<script type="text/javascript">

        // 路径配置

        require.config({

            paths: {

                echarts: 'dist'

            }

        });

    </script>

4. <script>标签内动态加载echarts和所需图表，回调函数中可以初始化图表并驱动图表的生成，option见API & Doc

// 使用
        require(
            [
                'echarts',
                'echarts/chart/bar' // 使用柱状图就加载bar模块，按需加载
            ],
            function (ec) {
                // 基于准备好的dom，初始化echarts图表
                var myChart = ec.init(document.getElementById('main'));
 
                var option = {
                    title: {
                        text: '某地区蒸发量和降水量',
                        subtext: '纯属虚构'
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: ['蒸发量', '降水量']
                    },
                    toolbox: {
                        show: true,
                        feature: {
                            mark: { show: true },
                            dataView: { show: true, readOnly: false },
                            magicType: { show: true, type: ['line', 'bar'] },
                            restore: { show: true },
                            saveAsImage: { show: true }
                        }
                    },
                    calculable: true,
                    xAxis: [
                                {
                                    type: 'category',
                                    data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
                                }
                            ],
                    yAxis: [
                                {
                                    type: 'value'
                                }
                            ],
                    series: [
                        {
                            name: '蒸发量',
                            type: 'bar',
                            data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
                            markPoint: {
                                data: [
                                    { type: 'max', name: '最大值' },
                                    { type: 'min', name: '最小值' }
                                ]
                            },
                            markLine: {
                                data: [
                                    { type: 'average', name: '平均值' }
                                ]
                            }
                        },
                        {
                            name: '降水量',
                            type: 'bar',
                            data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
                            markPoint: {
                                data: [
                                    { name: '年最高', value: 182.2, xAxis: 7, yAxis: 183, symbolSize: 18 },
                                    { name: '年最低', value: 2.3, xAxis: 11, yAxis: 3 }
                                ]
                            },
                            markLine: {
                                data: [
                                    { type: 'average', name: '平均值' }
                                ]
                            }
                        }
                    ]
                };
                // 为echarts对象加载数据 
                myChart.setOption(option);
            }
        );

5.    浏览器中打开echarts.html，就可看到以下效果

 

 

深入理解与学习

1 学习过程中曾经遇到，第一次加载时可以显示图表，按F5刷新后就报js的错

此时把所有js代码放到window.onload = function () {  }中就可以解决

2 当确认前台js代码没有错，测试时还报js代码的错，此时是传入的数据有问题！！！

 

 Legend中的 data，与series中的两个name一致（这里是有两个量），否则会有问题，比如修改成      legend: {data: ['蒸发量1', '降水量1'] },

将option简化为
var option = {
                    title: {
                        text: '客流情况'
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: ['进站客流']
                    },
                    calculable: true,
                    xAxis: [
                                {
                                    type: 'category',
                                    data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
                                }
                            ],
                    yAxis: [
                                {
                                    type: 'value'
                                }
                            ],
                    series: [
                        {
                            name: '进站客流',
                            type: 'bar',
                            data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
                        }
                    ]
                };
                // 为echarts对象加载数据 
                myChart.setOption(option);
            }
        );

修改横纵坐标的值

 data: ['人民广场站', '建设一路站', '飞虹路站', '朝阳站', '曹家桥站', '潘水站', '盈丰路站', '建设一路站', '飞虹路站', '朝阳站', '曹家桥站', '潘水站', '盈丰路站']

data: [1100, 801, 1500, 913, 1200, 513, 310, 1200, 1830, 650, 210, 200, 900]

柱形条太大，看起来不爽，此时可以设置柱形条宽度的属性，我不用这种方法

      axisLabel: { rotate: 45, margin: 2, textStyle: { color: '#000', fontWeight: 'bold', fontFamily: '宋体'} },

   设置为false就不能拖动柱形条了

项目应用

项目中开发与入门中开发有以下不同：

首先可能有很多个图表，所以应该封装一个获取option的方法；

其次，由于数据是从数据库中加载过来的，所以横纵坐标的数据不能写死，以及图表类型（柱形图，折线图）也不能写死

Option获取方法
//获取各线路进站客流图表的参数
        //OptionStation为Echarts图表横坐标的值，OptionFlow为纵坐标的值
        //charType为图表类型（柱形图、折线图），hovertitle为鼠标移动到位置时显示的纵坐标的值
        function GetOption(OptionStation, OptionFlow, linetitle, charType, hovertitle) {
            var option = {
                title: {
                    text: linetitle
                },
                tooltip: {
                    trigger: 'axis'
                },
                calculable: false,
                xAxis: [
                                {
                                    type: 'category',
                                    axisLabel: { rotate: 45, margin: 2, textStyle: { color: '#000', fontWeight: 'bold',fontFamily:'宋体'} },
                                    data: OptionStation
                                }
                            ],
                yAxis: [
                                {
                                    type: 'value'
                                }
                             ],
                series: [
        {
            name: hovertitle,
            type: charType,
            data: OptionFlow
        }
    ]
            };
            return option;
        }
var optionStationFlow4 = GetOption(station4, passengerFlow4, '四号线进站客流', 'bar', '进站客流'); 

后台传输数据到前台

一般来说，由于js是在前台，我们需要在页面加载时去后台（不是aspx.cs文件）请求数据，此时需要注意以下问题

1 项目中可能是请求特定日期，特定线路等条件的数据，而时间，线路等参数可能是url传过来的，我们在前台中就要通过获取这些参数到后台中查询相应的数据。

2 获取后台数据要使用同步，不能异步，异步的话数据就更新不了，会报数据为null的错

 

前台中手写获取url参数的方法

//手写JavaScript获取url参数的方法
        function GetRequest() {
            var url = decodeURI(location.search); //获取url中"?"符后的字串
            var theRequest = new Object();
            if (url.indexOf("?") != -1) {
                var str = url.substr(1);
                strs = str.split("&");
                for (var i = 0; i < strs.length; i++) {
                    theRequest[strs[i].split("=")[0]] = (strs[i].split("=")[1]);
                }
            }
            return theRequest;
        }
使用方式如下
var Request = GetRequest(); 
var FromDate = Request["fromdate"];

 

前台中同步获取后台传过来的数据

首先后台需要到数据库中获取数据并拼接字符串，拼接格式为

['人民广场站', '建设一路站', '飞虹路站', '朝阳站', '曹家桥站', '潘水站', '盈丰路站', '建设一路站', '飞虹路站', '朝阳站', '曹家桥站', '潘水站', '盈丰路站']

接着序列化成对象返回

JavaScriptSerializer serializer = new JavaScriptSerializer();

            return serializer.Serialize(new { Station2 = strA, PassengerFlow2 =strB, Station4 = strC, PassengerFlow4 = strD });

 

前台中

 

<script src="../../Scripts/jquery.js" type="text/javascript"></script>
<script src="../../Scripts/common.js" type="text/javascript"></script>
function executeDataService(FromDate, Todate, Lines) {
            Common.Util.DataServices('PTDDOperationDailyServices$GetStationFlow', { fromDate: FromDate, todate: Todate, lines: Lines }, function (returnValue) {
                var jsonObj = $.parseJSON(returnValue);
                station2 = eval("(" + jsonObj.Station2 + ")");
                passengerFlow2 = eval("(" + jsonObj.PassengerFlow2 + ")");
                station4 = eval("(" + jsonObj.Station4 + ")");
                passengerFlow4 = eval("(" + jsonObj.PassengerFlow4 + ")");
            }, "", false);
        }

 

 

 

所以需要通过eval方法将它转换成对象