echarts图表

标题 echarts图表怎么创建以及数据渲染加载

1.首先有个容器装载图

<div id="barDouble" class="electricDescribeYear" style="width: 900px;height: 400px;margin: 0 auto;z-index: 99;top: -52px;"></div>

2.引用文件echarts.min.js或者echarts.js文件

<script src="js/ECharts/echarts.min.js"></script>

3.基于准备好的dom，初始化echarts实例

var myChart = echarts.init(document.getElementById('barDouble'));

4.事先准备数组将图表想要的data分类放好

var mydates=[];  //横坐标代表日期
var moneys=[];   //纵坐标代表缴费金额
var paytype=[]; //代表每个人缴费的费用类型

var shui=[];  //代表水费
var dian=[];   //代表电费
var ranqi=[];    // 代表燃气费
var wuye=[];    // 代表物业费

5.通过ajax数据将取得的数据分别放入不同的数组里

if (res) {
    for (var i = 0; i < res.length; i++) {
        console.log(res);
        mydates.push(res[i].time);
        moneys.push(res[i].realmoney);
        paytype.push(res[i].paytype);
        for (var m=0;m<paytype.length;m++){
            if (paytype[m]=="水费"){
                shui[m]=moneys[m];
            }else if(paytype[m]=="电费"){
                dian[m]=moneys[m];
            }else if(paytype[m]=="燃气费"){
                ranqi[m]=moneys[m];
            }else if(paytype[m]=="物业费"){
                wuye[m]=moneys[m];
            }
        }

    }

6.指定图表的配置项和数据

     var option = {
                  title: {
                      text: '缴费查看情况'
                  },
                  tooltip: {
                      trigger: 'axis',
                      axisPointer: {
                          type: 'shadow'
                      }
                  },
                  tooltip: {},
                  legend: {
                      data: ['电费', '水费', '燃气费', '物业费']
                  },
                  xAxis: {
                      data: mydates,
                      axisLabel: {
                          interval: 0,
                          rotate: 40
                      },
                      grid: {  //x轴长度容不下全部字体，设置字体全部倾斜
                          left: '10%',
                          bottom: '35%'
                      }
                  },
                  yAxis: {},
series: [{
   name: '电费',
   type: 'line',
   data: dian,
   animationDelay: function (idx) {
      return idx * 10;
   }
}, {
   name: '水费',
   type: 'line',
   data: shui,
   animationDelay: function (idx) {
      return idx * 10 + 100;
   }
},{
   name: '燃气费',
   type: 'line',
   data: ranqi,
   animationDelay: function (idx) {
      return idx * 10 + 100;
   }
},{
   name: '物业费',
   type: 'line',
   data: wuye,
   animationDelay: function (idx) {
      return idx * 10 + 100;
   }
}],
animationEasing: 'elasticOut',
animationDelayUpdate: function (idx) {
   return idx * 5;
},
                  dataZoom: [{//给x轴设置滚动条
                      start: 0,//默认为0
                      end: 100 - 1500 / 31,//默认为100
                      type: 'slider',
                      show: true,
                      xAxisIndex: [0],
                      handleSize: 0,//滑动条的 左右2个滑动条的大小
                      height: 10,//组件高度
                      left: '10%', //左边的距离
                      right: '10%',//右边的距离
                      bottom: 26,//右边的距离
                      borderColor: "#ffffff",
                      fillerColor: '#eee',
                      borderRadius: 5,
                      backgroundColor: '#ffffff',//两边未选中的滑动条区域的颜色
                      showDataShadow: false,//是否显示数据阴影 默认auto
                      showDetail: false,//即拖拽时候是否显示详细数值信息 默认true
                      realtime: true, //是否实时更新
                      filterMode: 'filter'
                  },
                      //下面这个属性是里面拖到
                      {
                          type: 'inside',
                          show: true,
                          xAxisIndex: [0],
                          start: 0,//默认为1
                          end: 100 - 1500 / 31//默认为100
                      }]
              };

              // 使用刚指定的配置项和数据显示图表。
              myChart.setOption(option);