vue类式组件二次封装echarts(极简)

创建 index.ts 文件

export const ChartContainer = () => import("./index.vue");

export enum EchartID {
  chartId1 = "chartId1",
  chartId2 = "chartId2",
  chartId3 = "chartId3",
}

创建 index.vue 组件

<template>
  <div
    :id="id"
    :style="{
      width: width,
      height: height,
    }"
    class="chart-container"
  />
</template>

<script lang="ts">
import { Vue, Component, Prop } from "vue-property-decorator";
import * as echarts from "echarts";

@Component
export default class MapContainer extends Vue {
  @Prop({ type: String, required: true }) id!: string;
  @Prop({ type: String, default: "300px", required: false }) width?: string;
  @Prop({ type: String, default: "200px", required: false }) height?: string;
  @Prop({ type: Object, required: true }) option!: any;

  mounted() {
    const chartView: HTMLElement = document.getElementById(
      this.id
    ) as HTMLElement;
    const myChart = echarts.init(chartView);
    myChart.setOption(this.option);
  }
}
</script>

<style lang="scss" scoped>
.chart-container {
  width: 100%;
  height: 100%;
}
</style>

使用

<template>
  <div class="home">
    <span>{{ hehe }}</span>
    <div class="chart-box">
      <ChartContainer
        :id="chartId"
        width="400px"
        height="400px"
        :option="option3"
      />
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { ChartContainer, EchartID } from "@/components/echarts";

import { useHome } from "./";

const { bannerTitle, option, option2, createProdcutList } = useHome();

@Component({
  components: {
    ChartContainer,
  },
})
export default class HomeView extends Vue {
  private hehe = bannerTitle;
  private count = createProdcutList().length;
  private option: any = option;
  private option3: any = option2;
  private chartId: string = EchartID.chartId1;
}
</script>

运行效果

点赞加关注，永远不迷路