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 内设置

标签：异步,vue,mychart2,echart,show,true,03,data,type
来源： https://www.cnblogs.com/zbbk/p/16086603.html