echarts的使用

1、饼图、折线图、柱状图中option的字段及说明

//图标名称，在饼图中不起作用
title: {
  text: '图名称'
},

//聚焦点时，显示相关x\y轴信息
tooltip: {
  trigger: 'axis'
},

//图标说明：表示的属性
legend: {
  data: ['雨量', '风级', '雾霾程度', '可见度']
},

//进行处理图表的显示大小，整个图标距离前后左右的距离
grid: {
  left: '3%',
  right: '4%',
  bottom: '3%',
  containLabel: true
},

//折线图或柱状图对应的x轴的设置
xAxis: {
  type: 'category',//显示方式，根据所给数据显示
  data: ['1月', '2月', '3月', '4月','5月'],//x轴对应的显示表示

  //对于x轴显示表示的设置
  axisLabel: {
    textStyle: {},//对于x轴显示表示的样式设置
    formatter: function(value) {
    }//可以设置下标字数太长或过大显示不全问题，可参考 https://blog.youkuaiyun.com/superlover_/article/details/79714823
  },//对于x轴，显示表示的设置
  axisLine: {},//对于x轴线的设置
  axisTick: {},//x轴标线分段设置
  splitLine: {},//x轴分割线的设置},

  //折线图或者柱状图对应的y轴的设置
  yAxis: {
    type: 'value',
    lineStyle: {
      color: 'red'
    }
  },

  //饼图属性对应的值或折线图、柱状图属性对应值
  series: [
    {
      name: '一级',
      type: 'line',
      color: '#18CA7D',
      symbol: 'circle',
      data: [9, 13, 15, 20, 17, 39, 40]
    },
    {
      name: '二级',
      type: 'line',
      color: '#FFCD42',
      symbol: 'circle',
      data: [8, 12, 16, 19, 16, 40, 51]
    },
    {
      name: '三级',
      type: 'line',
      color: '#FF6165',
      symbol: 'circle',
      data: [7, 15, 20, 14, 17, 38, 50]
    },
    {
      name: '四级',
      type: 'line',
      color: '#FF22E8',
      symbol: 'circle',
      data: [6, 12, 17, 37, 26, 20, 40]
    }
  ]
}

2、双Y轴使用方式，进行处理yAxis，处理如下：

yAxis: [
  {
    type: 'value',
    name: 'name1',
    axisLine: {
      lineStyle: {
        color: '#FFFFFF',
        width: 0.5
      }
    },
    splitLine: { // 设置网格
      show: true,
      lineStyle: {
        type: 'solid',
        width: 0
      }
    }
  },
  {
    type: 'value',
    name: 'name2',
    axisLine: {
      lineStyle: {
        color: '#FFFFFF',
        width: 0.5
      }
    },
    splitLine: { // 设置网格
      show: true,
      lineStyle: {
        type: 'solid',
        width: 0
      }
    }
  }
],

3、 x轴和y轴数据可同时由后台获取进行展示

drawChart() {
  let myChart = this.$echarts.init(document.getElementById('chartShow'))
  myChart.setOption({}, true)  //重新渲染图标需要将先前生成的图表消除

  let unitTypes = ['unit1','unit2']//单位类型

  let series = []
  for (let item of this.leftSelected) {
    let o = {}
      o = {
        type: 'line',
        name: unitTypes[0],
        data: item.objectList,
        symbol: 'circle',
        symbolSize: 8,
        itemStyle: {
          normal: {
            color: 'red',
            borderColor: 'red'  //拐点边框颜色
          }
        }
      }
    if (o) {
      series.push(o)
    }
  }

  myChart.setOption({
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      data: unitTypes,
      textStyle: {
        color: '#fff'
      }
    },

    xAxis: {
      type: 'category',
      axisLabel: {
        interval: 0,
        rotate: 40,
        textStyle: {
          fontWeight: '300',
          fontSize: '8',
          color: '#FFFFFF'
        }
      },
      axisTick: {
        show: false
      },
      axisLine: {
        lineStyle: {
          color: '#FFFFFF',
          width: 0.5
        }
      }
    },

    yAxis: [
      {
        type: 'value',
        name: unitTypes[0],
        axisLine: {
          lineStyle: {
            color: '#FFFFFF',
            width: 0.5
          }
        },
        splitLine: { // 设置网格
          show: true,
          lineStyle: {
            type: 'solid',
            width: 0
          }
        }
      },
      {
        type: 'value',
        name: unitTypes[1],
        axisLine: {
          lineStyle: {
            color: '#FFFFFF',
            width: 0.5
          }
        },
        splitLine: { // 设置网格
          show: true,
          lineStyle: {
            type: 'solid',
            width: 0
          }
        }
      }
    ],

    series: series
  })
}

4、myChart.setOption({}, true)  //消除图表