vue封装echarts组件

话不多说，先上代码。
组件：

<template>
    <div
      id="echartsItem"
      style="width: 100%; height: 400px"
      :legendData="legendData"
      :echartsData="echartsData"
    ></div>
</template>
<script>
import echarts from "@/utils/echars";
export default {
  name: "echartsList",
  mixins: [mixin],
  components: {},
  props: {
    legendData: {
      type: Array,
      default: () => [],
    },
    echartsData: {
      type: Object,
      default: null,
    }
  },
  data() {
    return {
      option: {
        grid: {
          left: "0",
          right: "10",
          top: "8%",
          bottom: "10%",
          containLabel: true,
        },
        tooltip: {
          trigger: "axis",
          textStyle: {
            color: "#79828b",
            fontSize: "12px",
          },
          axisPointer: {
            color: "#0FA0F8",
          }
        },
        legend: {
          bottom: "0",
          icon: "circle",
          itemHeight: 10,
          textStyle: {
            padding: [0, 30, 0, 0],
          },
          data: this.legendData,
        },
        toolbox: {
          show: true,
          feature: {
            magicType: { show: true, type: ["stack", "tiled"] },
            saveAsImage: { show: true },
          },
        },
        xAxis: {
          type: "category",
          axisLabel: {
            color: "#A9A9A9",
          },
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          data: [],
        },
        yAxis: {
          name: "",
          type: "value",
          axisLine: {
            show: false,
          },

          axisTick: {
            show: false,
          },
          axisLabel: {
            color: "#A9A9A9",
          },
          splitLine: {
            show: false,
          },
          axisPointer: {
            snap: true,
          },
        },
        series: [
          {
            type: "bar",
            itemStyle: {
              normal: {
                color: "rgba(246, 248, 250,1)",
                width: "33px",
              },
            },
            emphasis: {
              itemStyle: {
                color: "rgba(246, 248, 250,1)",
              },
            },
            zlevel: 0,
            data: [],
            barGap: "-100%",
            barCategoryGap: "20%",
            animation: false,
          },
          {
            name: this.legendData[1],
            type: "line",
            smooth: true,
            zlevel: 1,
            itemStyle: {
              borderColor: "#E7B962",
              color: "#E7B962",
            },
            lineStyle: {
              color: "#E7B962",
            },
            areaStyle: {},
            data: [],
          },
          {
            name: this.legendData[2],
            type: "line",
            smooth: true,
            zlevel: 1,
            itemStyle: {
              borderColor: "#49A4FF",
              color: "#49A4FF",
            },
            lineStyle: {
              color: "#49A4FF",
            },
            areaStyle: {},
            data: [],
          },
          {
            name: this.legendData[0],
            type: "line",
            smooth: true,
            zlevel: 1,
            itemStyle: {
              borderColor: "#8ED83E",
              color: "#8ED83E",
            },
            lineStyle: {
              color: "#8ED83E",
            },
            areaStyle: {},
            data: [],
          },
        ],
      },
    };
  },
  watch: {
    echartsData: {
      handler(val) {
        this.getChart();
      },
      deep: true,
    },
  },
  mounted() {
    this.getChart();
    this.initEchart();
  },
  computed: {},
 
  methods: {
    // echarts数据
    initEchart() {
      this.myChart = echarts.init(document.getElementById("echartsItem"));
      this.setOption();
    },
    setOption() {
      this.option.yAxis.name = this.echartsData.yAxis.name;
      this.option.series[0].data = this.echartsData.series[0].data;
      this.option.series[1].data = this.echartsData.series[1].data;
      this.option.series[2].data = this.echartsData.series[2].data;
      this.option.series[3].data = this.echartsData.series[3].data;
      this.option.xAxis.data = this.echartsData.xAxis.data;
      this.myChart.setOption(this.option, true);
      this.myChart.resize();
    },
    getChart() {
      this.$nextTick(() => {
        this.initEchart();
      });
    },
  },
  beforeDestroy () {
    if (this.myChart) {
      this.myChart.clear()
    }
  },

};
</script>

调用组件

<template>
	<echartsList :legendData="legendData" :echartsData="echartsData"></echartsList>
</template>
<script>
	data() {
	    return {
	    //你要传的echarts数据，调用接口后赋值
			legendData: ["活动***", "活动***", "活动***"],
			echartsData: {
			  xAxis: {
			    data: [],
			  },
			  yAxis: {
			    name:"人数"
			  },
			  series: [
			    {data: []},
			    {data: []},
			    {data: []},
			    {data: []},
			  ]
			}
		}
	},
	mounted() {this.getData()},
	methods: {
		getData(){	//获取数据接口
			this.echartsData.yAxis.max = this.option.series[0].data[0];
		}
	}
</script>

不封装的话每次用到都要重新配置，太麻烦，不如封装成组件提高复用性。这里的代码是简化后的，效果什么的根据需求加就好了，若有错误请指出。