标签：异步 vue mychart2 echart show true 03 data type

我这里用的事件是实例化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', // 这个就不会交叉

 

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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。