echarts的使用

初步使用了echarts的柱形图

1.按需引入模块

var echarts = require("echarts/lib/echarts");
      // 引入柱状图
      require("echarts/lib/chart/bar");
      // 引入提示框和标题组件
      require("echarts/lib/component/tooltip");
      require("echarts/lib/component/title");
      require("echarts/lib/component/legend");
      require("echarts/lib/component/dataZoom");

2.设置配置对象

myChart.setOption({
        /* title: {
              text: '用电量柱状图'
            }, */
        legend: {
          data: [
            "镇街散乱污排行榜",
            "镇街散乱污整治排行榜"
          ]
        },
        color: ["#57A2F8", "red"],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        dataZoom: [
          {
            id: "dataZoomX",
            type: "slider",
            start: 0,
            end: 30
          }
        ],
        dataZoom: [
          {
            id: "dataZoomX",
            type: "slider",
            xAxisIndex: [0],
            filterMode: "filter"
          },
          {
            id: "dataZoomY",
            type: "slider",
            yAxisIndex: [0],
            filterMode: "empty"
          }
        ],
        grid: {
          left: "1%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        xAxis: [
          {
            type: "category",
            data: obj.X,
            axisTick: {
              alignWithLabel: true,
              length: 5
            },
            axisLabel: {
              interval: 0,
              formatter: function(value) {
                return value.split("").join("\n");
              }
            }
          }
        ],
        yAxis: [
          {
            type: "value"
          }
        ],
        series: [
          {
            name: "镇街散乱污排行榜",
            barGap: "-3%",
            type: "bar",
            barWidth: "40%",
            data: obj.Y
          },
          {
            name: "镇街散乱污整治排行榜",
            type: "bar",
            barWidth: "40%",
            data: obj.Y2
          }
        ]
      });

3.设置呈现的div