echart在vue中的使用異步數據重新渲染和封裝，事件以及請求重復多次的問題

我這里用的事件是實例化echart后綁定this.mychart.on(事件，回調)，重新渲染是用的封裝后再調用。chartInit()

需要注意點是封裝的chartInit 特別是事件綁定，因為和初始化圖標配置一起封裝在了一起，所以需要調用前先解綁事件或者圖標也一並清楚下 this.mychart.off(事件) this.mychart.clear()

不然就會執行兩次導致重復調用重復綁定，如果多次調用就會多次請求：

我把動態的數據相關的東西都提煉出來，后面只要通過后端接口渲染不同數據 然后盡情的再次調用封裝好的方法chartInit()即可：

<template>
  <div class="zhexiankucun" ref="zhexiankucun">z</div>
</template>
<script>
import * as echarts from "echarts";
export default {
  name: "",
  props: {},
  data() {
    return {
      mychart2:null,
      title:'布品庫存',
      viewdate:{
        zaikuquxian:[120, 13, 101, 134, 90, 230, 210],
        zxuqiuquxian:[220, 182, 91, 234, 290, 30, 310],
        anquanquxian:[220, 282, 191, 24, 290, 330, 10]
      },
      timerarr:['2022-03-01', '2022-03-02', '2022-03-03', '2022-03-04', '2022-03-05', '2022-03-06', '2022-03-07'],
      lengend:['在庫曲線', '需求曲線', '安全在庫曲線']
    };
  },
  components: {},
  methods: {
    chartinit() {
      var mychart2 = echarts.init(this.$refs.zhexiankucun);
     this.mychart2 = echarts.init(this.$refs.zhexiankucun);
      var option = {
        title: {
          text: this.title
        },
  tooltip: { // 鼠標移上去顯示的設置
    trigger: 'axis',
    // formatter: '{b}\n{c}'
  },
  toolbox:{
     show: true,
            feature: {
                mark: { show: true },
                dataView: { show: true, readOnly: false },
                magicType: { show: true, type: ['line', 'bar'] },
                restore: { show: true },
                saveAsImage: { show: true }
            }
  },
  legend: {
    data: this.lengend,
     // orient 設置布局方式，默認水平布局，可選值：'horizontal'（水平） ¦ 'vertical'（垂直）
          orient: 'horizontal',
          // x 設置水平安放位置，默認全圖居中，可選值：'center' ¦ 'left' ¦ 'right' ¦ {number}（x坐標，單位px）
          x: 'left',
          // y 設置垂直安放位置，默認全圖頂端，可選值：'top' ¦ 'bottom' ¦ 'center' ¦ {number}（y坐標，單位px）
          y: '20px',
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  toolbox: {
    feature: {
      saveAsImage: {}
    }
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: this.timerarr
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: this.lengend[0],
      type: 'line',
      stack: 'Total', // 拐點不交叉
      symbol: 'emptycircle',   //設置折線圖中表示每個坐標點的符號 emptycircle：空心圓；emptyrect：空心矩形；circle：實心圓；emptydiamond：菱形
      data: this.viewdate.zaikuquxian,
       itemStyle:{
              normal:{
                // 拐點上顯示數值
                label : {
                show: false, // 線上設置
                },
                // borderColor:'red',  // 拐點邊框顏色
                lineStyle:{                 
                  width:2,  // 設置線寬
                  type:'dotted'  //'dotted'虛線 'solid'實線
                  ,color:'blue'
                }
              }
            }
    },
    {
      name: this.lengend[1],
      type: 'line',
      stack: 'Total',
      data: this.viewdate.zxuqiuquxian,
       itemStyle:{
              normal:{
                // 拐點上顯示數值
                label : {
                show: false
                },
                // borderColor:'red',  // 拐點邊框顏色
                lineStyle:{                 
                  width:2,  // 設置線寬
                  type:'solid'  //'dotted'虛線 'solid'實線
                  ,color:'green'
                }
              }
            }
    },
    {
      name: this.lengend[2],
      type: 'line',
      stack: 'Total',
      data: this.viewdate.anquanquxian,
       itemStyle:{
              normal:{
                // 拐點上顯示數值
                label : {
                show: false
                },
                // borderColor:'red',  // 拐點邊框顏色
                lineStyle:{                 
                  width:2,  // 設置線寬
                  type:'solid'  //'dotted'虛線 'solid'實線
                  ,color:'gray'
                }
              }
            }
    },
  ]
      };
      mychart2.showLoading();
      this.mychart2.setOption(option);
      mychart2.hideLoading();
      this.mychart2.off('click');
      this.mychart2.on('click', function (param) {
            console.log(param, param.data);//這里根據param填寫你的跳轉邏輯
           alert(param.data)
        });
    },
  },
  mounted() {
    this.chartinit();
    setTimeout(()=>{
      // this.mychart2.clear()
      this.viewdate.zaikuquxian= [10, 3, 1, 34, 9, 23, 121],
     this.chartinit();
    },3000)
  },
};  
</script>
<style scoped lang="less">
.zhexiankucun {
  width: 98%;
  height: 300px;
  display: flex;
}
</style>

mounted內 異步調用模擬請求接口，改變數據的date,然后再次調用函數就會自動改變圖標，但是自動調用會再次執行on('click',fn)回調，原因主要是每次執行都會重新綁定依次監聽點擊回調，所以如果是封裝到初始化圖標內就先解綁下事件再綁定即可解決調用依次初始化累加一次請求的問題。后面結合圖標就可以按照這種思路封裝各種圖標，只要改想要動態改的數據即可：

另外擴展個 多個折線交叉和非交叉設置：series 內設置

stack: 'Total', // 這個就不會交叉