一般绘制流程：
    **

    • 使用echarts首先需要在页面上引入echarts.min.js文件

    例：

    1. <script src="js/lib/echarts.min.js"></script>
    • 页面上需要有一个盛放图表的容器，也就是div

    例：

    1. <div id="dataChart"></div>

    • js中得到这个div元素并初始化一个echarts实例 例：

      1. var dataAnalysisChart = echarts.init(document.getElementById("dataChart"));

    • 指定图表的配置项option，如图表标题、图例、系列、悬浮提示、x轴、y轴等

    例：

    1. var option = {
    2.             title: {
    3.                 text: 'ECharts 入门示例'
    4.             },
    5.             tooltip: {},
    6.             legend: {
    7.                 data:['销量']
    8.             },
    9.             xAxis: {
    10.                 data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
    11.             },
    12.             yAxis: {},
    13.             series: [{
    14.                 name: '销量',
    15.                 type: 'bar',
    16.                 data: [5, 20, 36, 10, 10, 20]
    17.             }]
    18.         };
    • 使用刚指定的配置项和数据显示绘制图表，利用setOption()方法，参数为上一步的配置项

    例：

    1. dataAnalysisChart.setOption(option);

    页面上使用绘制流程：
    **
    实际使用时图表数据由后台生成，所以在实际使用echarts时的流程与一般绘制方法稍有不同，我总结了一套实际使用时的绘制流程标准，可根据具体情况做适当调整。

    • 前面的步骤不变，依次是引入文件、设置图标div容器、初始化echarts实例

    • 如果要求图表数据定时刷新，需要加入定时标志，如下：

      1. var t1 = null;//动态请求图表数据时间间隔标志

    • 定义一个方法，名字可以是setXXX，该方法用来向后台请求图表数据，并设置定时刷新、成功回调、失败回调等操作。此处的请求未使用框架封装的admin.req()方法，如需在使用该框架的系统里使用，替换即可。例：

      1. function setRetiredBatteryQualityStatistics() {
      2.       clearTimeout(t1); //清除定时任务
      3.       $.ajax({
      4.           url: "../../json/dataJson/data1.json",
      5.           success: function(data) {
      6.               var json = eval(data);
      7.               setValues_1(json);//设置参数并绘制图表
      8.               //成功：定时请求
      9.               t1 = setTimeout(setRetiredBatteryQualityStatistics, 5000);
      10.           },
      11.           error: function() {
      12.                 layer.msg("请求数据失败！");
      13.               //失败回显假数据
      14.               $.getJSON(jsonUrl, function (data) {
      15.                   data = eval(data);
      16.                   setValues_1(data);
      17.               });
      18.               //失败定时请求
      19.               t1 = setTimeout(setRetiredBatteryQualityStatistics, 1000);
      20.           }
      21.       });
      22.   }

    • 定义setValues_X方法，该方法用于将请求回来的后台数据格式化，变成图表配置项的数据格式，最常用的方法就是循环，例：

      1. function setValues_1(json) {
      2.       var params = {};//配置项参数
      3.       var names = [];
      4.       var lstm = [];
      5.       var sy = [];
      6.       var msl = [];
      7.       var nqdc = [];
      8.       var other = [];
      9.       /*循环json数据 赋值上述数据*/
      10.       for (var item in json) {
      11.           var name = json[item].name;
      12.           var value1 = json[item].value1;
      13.           var value2 = json[item].value2;
      14.           var value3 = json[item].value3;
      15.           var value4 = json[item].value4;
      16.           var value5 = json[item].value5;
      17.           names.push(name);
      18.           lstm.push(value1);
      19.           sy.push(value2);
      20.           msl.push(value3);
      21.           nqdc.push(value4);
      22.           other.push(value5);
      23.       }
      24.       //组装参数
      25.       params.dataX = names;
      26.       params.lstm = lstm;
      27.       params.sy = sy;
      28.       params.msl = msl;
      29.       params.nqdc = nqdc;
      30.       params.other = other;
      31.       //清空图表区域
      32.       retiredBatteryQualityStatistics.clear();
      33.       //绘制柱状图
      34.       retiredBatteryQualityStatistics.setOption(getRetiredBatteryQualityStatisticsOption(params), true);
      35.   }

    • 定义获取图表配置项的方法，该方法接收上一步格式化方法中定义的配置项参数，将配置项参数中的数据赋给option，返回这个option参数，并在格式化方法中调用。为使结构清晰，该方法可以单独定义在option.js文件中，option.js文件用来存放所有图表的配置项获取方法。例：

      1. function getRetiredBatteryQualityStatisticsOption(params) {
      2.   var option = {
      3.       color: ['#486BBB', '#3AB8AB', '#C76E52', '#B04BC3', '#F9B80B'],
      4.       tooltip: {
      5.           trigger: 'axis',
      6.           axisPointer: {
      7.               type: 'shadow'
      8.           }
      9.       },
      10.       legend: {
      11.           x: 'center',
      12.           top: 'bottom',
      13.           icon: 'circle',
      14.           itemWidth: 10,
      15.           itemHeight: 10,
      16.           textStyle: {
      17.               color: '#FFFFFF'
      18.           },
      19.           data: ['磷酸铁锰', '三元', '锰酸锂', '镍氢电池', '其他']
      20.       },
      21.       grid: { //图表的位置
      22.           top: '15%',
      23.           left: '3%',
      24.           right: '4%',
      25.           bottom: '12%',
      26.           containLabel: true
      27.       },
      28.       yAxis: [{
      29.           name: '单位（吨）',
      30.           nameTextStyle: {
      31.               color: '#FFFFFF'
      32.           },
      33.           type: 'value',
      34.           splitLine: {
      35.               show: false
      36.           },
      37.           axisTick: {
      38.               show: false
      39.           },
      40.           axisLine: {
      41.               lineStyle: {
      42.                   color: 'rgba(78,255,215,0.4)'
      43.               }
      44.           },
      45.           axisLabel: {
      46.               color: 'rgba(255,255,255,0.5)'
      47.           }
      48.       }],
      49.       xAxis: [{
      50.           type: 'category',
      51.           data: params.dataX,
      52.           axisTick: {
      53.               show: false
      54.           },
      55.           axisLine: {
      56.               lineStyle: {
      57.                   color: 'rgba(78,255,215,0.4)'
      58.               }
      59.           },
      60.           axisLabel: {
      61.               color: 'rgba(255,255,255,0.5)'
      62.           }
      63.       }],
      64.       series: [{
      65.               name: '磷酸铁锰',
      66.               type: 'bar',
      67.               stack: '总量',
      68.               barWidth: '30px',
      69.               data: params.lstm
      70.           },
      71.           {
      72.               name: '三元',
      73.               type: 'bar',
      74.               stack: '总量',
      75.               data: params.sy
      76.           },
      77.           {
      78.               name: '锰酸锂',
      79.               type: 'bar',
      80.               stack: '总量',
      81.               data: params.msl
      82.           },
      83.           {
      84.               name: '镍氢电池',
      85.               type: 'bar',
      86.               stack: '总量',
      87.               data: params.nqdc
      88.           },
      89.           {
      90.               name: '其他',
      91.               type: 'bar',
      92.               stack: '总量',
      93.               data: params.other
      94.           }
      95.       ]
      96.   };
      97.   return option;
      98. }