封装通用echarts（多次复用同一个图表）

最新推荐文章于 2024-07-04 16:37:43 发布

长箭已搭弓

最新推荐文章于 2024-07-04 16:37:43 发布

阅读量183

点赞数 2

文章标签： echarts 前端

本文链接：https://blog.csdn.net/include_computer/article/details/131394431

版权

文章描述了在Vue应用中，如何避免因子组件复用导致的Echarts图表实例重复初始化的问题，通过watch和beforeDestroy生命周期钩子以及调整初始化时机来确保图表的正确渲染。

摘要由CSDN通过智能技术生成

子组件（会有there is a chart instance already initialized on the dom.的警告⚠）

<!--https://blog.csdn.net/Maxueyingying/article/details/127867855-->
<template>
  <div style="width: 100%;height: 100%;" ref="Echart"></div>
</template>

<script>
import * as echarts from "echarts";
export default {
  name: "lineChart",
  props: {
    //接受父组件传递来的数据
    labelList: Array,
    xAxisList: Array,
  },
  data() {
    return {};
  },
  watch: {
    labelList: function (newQuestion, oldQuestion) {
      this.initChart();
    },
  },
  mounted() {
    this.init();
    this.initChart();
  },
  methods: {
    init() {
      const self = this; //因为箭头函数会改变this指向，指向windows。所以先把this保存
      setTimeout(() => {
        window.addEventListener("resize", function () {
          self.chart = echarts.init(self.$refs.Echart);
          self.chart.resize();
        });
      }, 10);
    },
    initChart() {
      if (myChartOne != null && myChartOne != "" && myChartOne != undefined) {
        myChartOne.dispose();
      }
      // 创建 echarts 实例。
      var myChartOne = echarts.init(this.$refs.Echart);
      //如果为空 则正常进行渲染 反之 不再进行初始化
      if (myChartOne == null) {
        myChartOne = echarts.init(this.$refs.Echart)
      }
      myChartOne.setOption({
        //直角坐标系内绘图网格
        grid: {
          top: "5%",
          left: "3%", //grid 组件离容器左侧的距离
          right: "4%",
          bottom: "3%",
          containLabel: true, //grid 区域是否包含坐标轴的刻度标签
        },
        // 如果有多个同类组件，那么就是个数组。例如这里有三个 X 轴。
        xAxis: {
          type: "category",
          data: this.xAxisList,
          name: "data",
          axisLine: {
            show: false, //隐藏x轴线
            lineStyle: {
              color: "#ffffff",
            },
          },
          axisTick: {
            show: false, //隐藏x轴刻度
          },
        },

        yAxis: {
          type: "value",
          axisLine: {
            show: false,
            lineStyle: {
              color: "#ffffff",
            },
          },
          axisTick: {
            show: false, //隐藏y轴刻度
          },
          splitLine: {
            lineStyle: {
              // 设置背景横线
              color: "#BBBBBB",
            },
          },
        },
        series: [
          {
            data: this.labelList,
            type: "line",
            // smooth: true, //默认是false,判断折线连线是平滑的还是折线
            itemStyle: {
              // normal: {
                color: "#FDE708", //改变折线点的颜色
                lineStyle: {
                  color: "#FDE708", //改变折线颜色
                },
              // },
            },
          },
        ],
      });
    },
  },
};
</script>

<style scoped>

</style>

更改优化后版本

<!--https://blog.csdn.net/Maxueyingying/article/details/127867855-->
<template>
  <div style="width: 100%;height: 100%;" ref="Echart"></div>
</template>

<script>
import * as echarts from "echarts";
export default {
  name: "lineChart",
  props: {
    //接受父组件传递来的数据
    labelList: Array,
    xAxisList: Array,
  },
  data() {
    return {
      myChart: null
    };
  },
  watch: {
  },
  mounted: function() {
    const vm = this
    vm.$nextTick(() => {
      vm.initChart()
      window.addEventListener('resize', this.wsFunc)
    })
  },
  methods: {
    wsFunc() {
      this.myChart.resize()
    },
    initChart() {
      // 创建 echarts 实例。
      this.myChart = echarts.init(this.$refs.Echart);
      //如果为空 则正常进行渲染 反之 不再进行初始化
      if (this.myChart == null) {
        this.myChart = echarts.init(this.$refs.Echart)
      }
      this.myChart.setOption({
        //直角坐标系内绘图网格
        grid: {
          top: "5%",
          left: "3%", //grid 组件离容器左侧的距离
          right: "4%",
          bottom: "3%",
          containLabel: true, //grid 区域是否包含坐标轴的刻度标签
        },
        // 如果有多个同类组件，那么就是个数组。例如这里有三个 X 轴。
        xAxis: {
          type: "category",
          data: this.xAxisList,
          name: "data",
          axisLine: {
            show: false, //隐藏x轴线
            lineStyle: {
              color: "#ffffff",
            },
          },
          axisTick: {
            show: false, //隐藏x轴刻度
          },
        },

        yAxis: {
          type: "value",
          axisLine: {
            show: false,
            lineStyle: {
              color: "#ffffff",
            },
          },
          axisTick: {
            show: false, //隐藏y轴刻度
          },
          splitLine: {
            lineStyle: {
              // 设置背景横线
              color: "#BBBBBB",
            },
          },
        },
        series: [
          {
            data: this.labelList,
            type: "line",
            // smooth: true, //默认是false,判断折线连线是平滑的还是折线
            itemStyle: {
              // normal: {
              color: "#FDE708", //改变折线点的颜色
              lineStyle: {
                color: "#FDE708", //改变折线颜色
              },
              // },
            },
          },
        ],
      });
    },
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.wsFunc)
    if (!this.myChart) {
      return
    }
    this.myChart.dispose()
    this.myChart = null
  },
};
</script>

<style scoped>

</style>

父组件

<div style="display: flex;">
    <!-- 冷藏区 -->
    <div class="bkChart">
      <fzEcharts :labelList="coldAreaList" :xAxisList="xAxiscoldAreaList" />
    </div>
    <!-- 回温区 -->
    <div class="bkChart">
      <fzEcharts :labelList="hotAreaList" :xAxisList="xAxisHotAreaList" />
    </div>
  </div>

import fzEcharts from "./echarts/fzEcharts";
export default {
  components:{
    fzEcharts
  },
  data() {
    return {
        xAxiscoldAreaList: ["2", "4", "6", "8", "10", "12"],
      xAxisHotAreaList: ["2", "4", "6", "8", "10", "12"],
      coldAreaList: ["3", "5", "7", "10", "4", "6"],
      hotAreaList: ["6", "3", "5", "8", "10", "6"]
    }
  },
}

vue封装的echarts组件被同一个页面多次引用无法正常显示问题（已解决）