打造一个自定义的echarts组件

<template>
  <div :id="chartId" :style="{ height: box.height,  box.width }" />
</template>

<script>
import * as echarts from "echarts";
import { debounce } from "../../utils/utils";

export default {
  name: "stackedAreaChart",
  props: {
    chartId: {
      type: String,
      default: "defaultChart",
    },
    chartData: {
      type: Object,
      default: () => {},
    },
    box: {
      type: Object,
      default: () => {
        return {  "45%", height: "100%" };
      },
    },
  },
  data() {
    return {
      chart: null,
    };
  },
  mounted() {
    window.onresize = () => {
      debounce(() => this.chart.resize(), 1000);
    };
    this.$nextTick(() => {
      this.drawChart();
    });
  },
  computed: {
    chartTitle: {
      get() {
        return this.chartData?.title;
      },
    },
    categoryData: {
      get() {
        return this.chartData?.categoryData;
      },
    },
    legendData: {
      get() {
        return (
          this.chartData?.items.map((item) => {
            return { name: item.name, icon: "roundRect" };
          }) ?? []
        );
      },
    },
    seriesData: {
      get() {
        return this.chartData?.items.map((item, index) => {
          return {
            name: item.name,
            type: "line",
            stack: "Total",
            areaStyle: {},
            emphasis: {
              focus: "series",
            },
            data: item.value,
          };
        });
      },
    },
  },
  methods: {
    drawChart() {
      if (!this.chart) {
        this.chart = echarts.init(document.getElementById(this.chartId));
      }

      let option = {
        title: {
          text: this.chartTitle,
          x: "center",
          y: "bottom",
        },
        legend: {
          data: this.legendData,
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "10%",
          containLabel: true,
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985",
            },
          },
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        series: this.seriesData,
      };

      this.chart.on("click", (params) => {
        console.log(params);
      });
      this.chart.setOption(option);
    },
  },
};
</script>

↑ StackedAreaChart.vue

↓ 使用这个组件

PS 里面用到的debounce是这篇随笔介绍的内容~

漂亮的防抖与节流 - 乐盘游 - 博客园 (cnblogs.com)