echarts封装组件，修改筛选条件重新渲染图标

以一个曲线图为例

父组件

<template>
  <AreaChart
	chartId="areaChart1"
    :echartData="weekCount"
    ref="areaChart1"
    :defaultProps="weekDefProps"
  ></AreaChart>
</template>

import AreaChart from "./components/areaChart.vue";

export default {
  name: "operationAnalysis",
  components: {   AreaChart },
  data() {
    return {
      // 图表的数据存放
      countList: {
        title: "近一年企业用户总数走势",
        echartData: [],
      },
      //图表自定义的属性值
      countDefProps: {
        name: "months",
        value: "num",
      }
    };
  },
  mounted() {
  //监听屏幕放大缩小确保图标自适应
    window.addEventListener("resize", () => { 
      this.$refs.areaChart1.myChart.resize();  
    });
    this.getData(); 
  },
  methods: {
  //获取后台的数据
    async getData() {
      const res = await companyData({ deptId: this.commandId });
      if (res.code !== 200) return this.msgError(res.msg); 
      const {   countList  } = res.data;
      this.countList.echartData = countList; //第一张面积 
      //countList: [{months: "2021-11", num: 1}, {months: "2021-12", num: 4}]
    }, 
  },
};
</script>

子组件

<template>
  <div class="chart-container">
    <div :id="chartId" style="width: 100%; height: 359px"></div>
  </div>
</template>

<script>
export default {
  components: {},
  props: {
    chartId: { type: String, required: true },
    echartData: { type: Object, required: true, default: () => {} },
    defaultProps: {
      type: Object,
      default: () => {
        return { name: "name", value: "value" };
      },
    },
  },
  data() {
    return { myChart: null };
  },
  mounted() {
    // 基于准备好的dom，初始化echarts实例
    // 只初始化一次chart，数据改变后，watch会监听数据变化从而重新渲染，mychart还是第一次渲染的图表
    this.myChart = this.$echarts.init(document.getElementById(this.chartId));
  },
  
  //  🚩🚩🚩🚩🚩动态渲染echarts的关键
  watch: {
    //使用watch来监听数据的变化当数据更新时复制给相应的变量
    echartData: {
      handler(newVal, oldVal) {
        if (newVal.echartData.length > 0) {
          this.setOption();
        }
      },
      deep: true,
      immediate: true,
    },
  },
  

methods: {
    setOption() {
      let bgColor = "#fff";
      let color = ["#2368FD", "#36CE9E"];
      let xAxisData = this.echartData.echartData.map(
        (v) => v[this.defaultProps.name]
      );
      let yAxisData = this.echartData.echartData.map(
        (v) => v[this.defaultProps.value]
      );
      const hexToRgba = (hex, opacity) => {
        let rgbaColor = "";
        let reg = /^#[\da-f]{6}$/i;
        if (reg.test(hex)) {
          rgbaColor = `rgba(${parseInt("0x" + hex.slice(1, 3))},${parseInt(
            "0x" + hex.slice(3, 5)
          )},${parseInt("0x" + hex.slice(5, 7))},${opacity})`;
        }
        return rgbaColor;
      };
      let option = {
        backgroundColor: bgColor,
        color: color,
        title: {
          text: this.echartData.title,
          textStyle: {
            fontWeight: "normal",
          },
        }, 
        tooltip: {
          trigger: "axis",
          formatter: function (params) {
            let html = "";
            params.forEach((v) => {
              // console.log(v);
              html += `<div style="color: #666;font-size: 14px;line-height: 24px">
                ${v.name}
                <br>
                <span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${
                  color[v.componentIndex]
                };"></span>
                <span style="font-size: 16px">${v.value}</span>
                元`;
            });
            return html;
          },
          extraCssText:
            "background: #fff; border-radius: 0;box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);color: #333;",
          axisPointer: {
            type: "line", 
          },
        },
        grid: {
          top: 100,
          left: 30,
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            axisLabel: {
              formatter: "{value}月",
              textStyle: {
                color: "#333",
              },
            },
            axisLine: {
              lineStyle: {
                color: "#D9D9D9",
              },
            },
            axisTick: {
              show: false,
            },
            data: xAxisData,
          },
        ],
        yAxis: [
          {
            type: "value",
            // name: "单位：万千瓦时",
            axisLabel: {
              textStyle: {
                color: "#666",
              },
            },
            nameTextStyle: {
              color: "#666",
              fontSize: 12,
              lineHeight: 40,
            },
            splitLine: {
              show: false,
            },
            axisLine: {
              lineStyle: {
                color: "#D9D9D9",
              },
            },
            axisTick: {
              show: false,
            },
          },
        ],
        series: [
          {
            name: "2018",
            type: "line",
            smooth: true,
            // showSymbol: false,/
            symbolSize: 0,
            zlevel: 3,
            lineStyle: {
              option: {
                color: color[0],
                shadowBlur: 3,
                shadowColor: hexToRgba(color[0], 0.5),
                shadowOffsetY: 8,
              },
            },
            areaStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: hexToRgba(color[0], 1),
                    },
                    {
                      offset: 0.9,
                      color: hexToRgba("#ffffff", 0.5),
                    },
                    {
                      offset: 1,
                      color: "#fff",
                    },
                  ],
                  false
                ),
                shadowColor: hexToRgba(color[0], 0.1),
                shadowBlur: 10,
              },
            },
            data: yAxisData,
          },
        ],
      };
      // 使用刚指定的配置项和数据显示图表。
      this.myChart.setOption(option);
    },
  },
};
</script>