echart示例总结（持续更新）

一、before

echart官网示例页（https://echarts.apache.org/examples/zh/index.html）
以示例的形式记一些【在vue项目中】用到过的示例、费劲搜过的问题。
点开官网示例页，然后随便点进一个图例，整段CV。
本人也是小白，有错误或不足请评论指出。
匆忙发布，多处待补充

二、init、dispose和resize

首先用id或者class获得你准备好的容器，

const myChart = this.$echarts.init(document.getElementById('dom1'));
myChart.setOptions(option);

如果一个容器里要根据条件显示多个chart，为防止出现

There is a chart instance already initialized on the dom.

和其他报错，需判断容器里chart是否存在，存在则销毁重新init。
将myChart定义在this.data里，在每次setOptions前调用方法initChart：

    initChart() {
   
      if (this.myChart != null && this.myChart != '' && this.myChart != undefined) {
   
        this.myChart.dispose(); //销毁
      }
      this.myChart = this.$echarts.init(document.querySelector('.chart'));
    },

画好之后会发现，窗口缩放时echart不会自己适配，所以需要resize。
resize有两种，一种直接跟在init后给window加事件，

const myChart = this.$echarts.init(document.getElementById('dom1'));
myChart.setOptions(option);
window.addEventListener('reisze', function(){
   
	myChart.resize();
})

一种在mounted里，如果是这样就需要搭配销毁

mounted() {
   
	window.addEventListener('resize', this.resizeChart); //方法名不加()
},
destroyed() {
   
	window.removeEventListener('resize', this.resizeChart); 
},
methods: {
   
	resizeChart() {
   }, //myChart写在全局
}

三、示例

（1）通用

坐标轴名字，位置，隐藏，颜色；距容器边距；

option = {
   
  grid: {
   
    top: '20%',
    left: '10%',
    right: '20%',
    bottom: '5%',
    containLabel: true,
  },
  xAxis: [
    {
   
      type: 'category',
      data: [0, 1, 2, 3],
      axisTick:{
   
        show: false, // 不显示坐标轴刻度线
      },
      axisLine: {
   
        show: false, // 不显示坐标轴线
      },
      axisLabel: {
   
        color: 'rgba(17, 140, 221, 0.8)',
        fontSize: 14,
      },
    },
  ],
  yAxis: {
   
    name: '时间',
    nameLocation: 'end',
    position: 'right',
    min: -10,
    max: 30,
    nameTextStyle: {
   
      color: 'rgba(17, 140, 221, 0.8)',
      verticalAlign: 'top',
      fontSize: 14,
      padding: [-30, 0],
    },
    type: 'value',
    // show: false, // 不显示name、线、刻度、文字
    axisLine: {
   
      show: false, // 不显示坐标轴线
    },
    axisLabel: {
   
      show: false, // 不显示坐标轴上的文字
    },
    axisTick:{
   
      show: false, // 不显示坐标轴刻度线
    },
  },
  series: [     
    {
   
      data: [10, 15, -5, 25],
      type: 'line',
      smooth: true,
    }
  ]
};

区域背景色splitArea；区域分割线splitLine；隐藏圆点；

option = {
   
  xAxis: {
   
    type: 'category',
    position: 'top',
    //show: false,
    axisLabel: {
   
      color: 'rgba(17,140,221,1)'
    },
    axisLine: {
   
      show: false, // 不显示坐标轴线
    },
    axisTick:{
   
      show:false // 不显示坐标轴刻度线
    },
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
    lineStyle: {
   
      width: 1,
      shadowColor: 'rgba(0,0,0,0.8)',
      shadowBlur: 8,
      shadowOffsetY: 15
    },
    splitLine: {
    //分割线
      show: true,
      lineStyle: {
   
        color: 'rgba(17, 140, 221, 0.8)',
        type: 'dashed',
        width: 0.8,
      },
    },
    splitArea: {
    //区域背景色
      show: true,
      areaStyle: {
   
        color: ['transparent', 'rgba(17,140,221,0.1)'],
      }
    }
  },
  yAxis: {
   
    type: 'value',
    splitLine: {
   show: false},
    axisLabel: {
   
      show: false, // 不显示坐标轴上的文字
    },
  },
  series: [
    {
   
      data: [820, 932, 901, 934, 950, 1030, 1320],
      type: 'line',
      smooth: true,
      symbolSize: