echarts的一些配置

获取省市区经纬度json ，DATAV.GeoAtolas 地址如下：

http://datav.aliyun.com/tools/atlas/

bigemap地图

http://www.bigemap.com/offlinemaps/demo/sllwshow.html#sllwshow

1、共有方法

  //柱状图
  showColumCategory: (that, el, xAxis, data, section) => {
    const myChart = echarts.init(document.getElementById(el));
    let option = {}
    option = {
      legend: { 
        show: true,
      },
      xAxis: {
        type: 'category',
        data: xAxis
      },
      yAxis: {
        type: "value",
        max: section && section[3].scoreTo,
        min: 0,
        splitNumber: 5,
        boundaryGap: [0, "100%"],
        axisLabel: {
          formatter: function (value) {
            var texts = [];
            let arr = section || []
            arr.find(item => {
              if (value > item.scoreFrom && value < item.scoreTo) {
                texts.push(item.levelName);
              }
            })
            if (value == 0) {
              texts.push('无');
            }
            return texts;
          }
        },
      },

      tooltip: {
        trigger: "axis",
        axisPointer: {
          width: '200px',
          type: "shadow",
          animation: false
        },
      },
      series: [{
        data: data,
        type: "bar",
        itemStyle: {
          normal: {
            color: function (params) {
              let value = params.value
              let colorArr = ["#73DEB3FF", "#1980FFCC", "#FEC402CC", "#FF635BCC"]
              let length = section && section.length || 0
              for (let i = 0; i < length; i++) {
                if (value > section[i].scoreFrom && value < section[i].scoreTo) {
                  return colorArr[i]
                }
              }
            },
            label: {
              show: false
            },
          }
        },
      }],
      grid: {
        left: 70,
        top: 45,
        right: 20,
        bottom: 60,
      }
    };
    // delete(option.yAxis.max);
    // delete(option.yAxis.min);
    myChart.setOption(option);
    that.charts.push(myChart);
    window.addEventListener('resize', () => {
      myChart.resize();
    })
  },

2、饼图显示注释,配置legend

option={
	legend: {
  	data: this.legend,
  	bottom:0,
  	left:'center',
  	textStyle:{
    	color:'#ffffff',
	  }
	},
}

3、弧形折线图，配置smooth

option={
  series: [{
      data: data,
      type: "line",
      smooth: true, //弧形
      itemStyle: {
        normal: {
          color: color,
          label: {
            show: true
          }
        }
      },
    }],
}

4、折线图阴影，配置areaStyle

option={
   areaStyle: {
     color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
         offset: 0,
         color: "#8cc3fbc9"//线的颜色
       },
       {
         offset: 1,
         color: "red"//阴影部分颜色
       }
     ])
   }
}

5、自定义Y轴，配置axisLabel

section为传进来的对象数组

option={
      yAxis: {
        type: "value",
        max: section && section[3].scoreTo,
        min: 0,
        splitNumber: 5,//分成及等分，即section的长度
        boundaryGap: [0, "100%"],//表示100%显示
        axisLabel: {
          formatter: function (value) {
            var texts = [];
            let arr = section || []
            arr.find(item => {
              if (value > item.scoreFrom && value < item.scoreTo) {
                texts.push(item.levelName);
              }
            })
            if (value == 0) {
              texts.push('无');
            }
            return texts;
          }
        },
      },
}

6、柱状图根据不同的值显示不同颜色，配置itemStyle

section为传进来的对象数组

option={
  series: [{
        data: data,
        type: "bar",
        itemStyle: {
          normal: {
            color: function (params) {
              let value = params.value
              let colorArr = ["#73DEB3FF", "#1980FFCC", "#FEC402CC", "#FF635BCC"]
              let length = section && section.length || 0
              for (let i = 0; i < length; i++) {
                if (value > section[i].scoreFrom && value < section[i].scoreTo) {
                  return colorArr[i]
                }
              }
            },
            label: {
              show: false
            },
          }
        },
      }],
}

7、tooltip自动播放

        let index = -1
        setInterval(function () {
            // 隐藏提示框
            myChart.dispatchAction({
                type: 'hideTip',
                seriesIndex: 0,
                dataIndex: index
            })
            // 显示提示框
            myChart.dispatchAction({
                type: 'showTip',
                seriesIndex: 0,
                dataIndex: index + 1
            })
            // 取消高亮指定的数据图形
            myChart.dispatchAction({
                type: 'downplay',
                seriesIndex: 0,
                dataIndex: index
            })
            // 高亮指定的数据图形
            myChart.dispatchAction({
                type: 'highlight',
                seriesIndex: 0,
                dataIndex: index + 1
            })
            if (index == 0) {
                myChart.dispatchAction({
                    type: 'downplay',
                    seriesIndex: 0,
                    dataIndex: 9
                })
            }
            index++
            if (index > 13) {
                index = -1
            }
        }, 2000)