echarts封装

父组件

<template>
  <div>
        <Charts :id="'ss'" :data="option" style="width: 500px; height: 300px"></Charts>
  </div>
</template>

<script>
import { taskOfNumber } from "@/api/echarts.js"
import Charts from "@/components/Charts"
export default {
  data: () => ({
    option: {
      title: {
        text: "任务详情",
        left: "center"
      },
      tooltip: {
        trigger: "item"
      },
      legend: {
        top: "10%",
        left: "center"
      },
      series: [
        {
          name: "任务详情",
          top: "4%",
          type: "pie",
          radius: ["40%", "70%"],
          // avoidLabelOverlap: false,
          label: {
            show: true
          },
          labelLine: {
            // 指示线状态
            show: true,
            smooth: 0.2,
            length: 10,
            length2: 20
          },
          emphasis: {
            label: {
              show: true,
              fontSize: "40",
              fontWeight: "bold",
              formatter: "{value}"
            }
          },
          data: []
        }
      ]
    },
    topList: ["个人信息", "加入项目", "领取任务", "加工订单", "收入信息"]
  }),
  components: {
    Charts
  },
  created() {
    this.taskOfNumber()
  },
  methods: {
    async taskOfNumber() {
      const {
        data: { data }
      } = await taskOfNumber()
      this.option.series[0].data = data
      console.log(this.option.series[0].data)
    }
  }
}
</script>

<style lang="scss" scoped >
</style>

Charts.vue

<template>
  <div :id="id" :data="data"></div>
</template>
<script>
import * as echarts from "echarts"
export default {
  props: ["id", "data"],
  data() {
    return {
      ChartLineGraph: null
    }
  },
  watch: {
    data: {
      handler(newValue, oldValue) {
        this.drawLineGraph(this.id, newValue)
      },
      deep: true
    }
  },
  mounted() {
    this.drawLineGraph(this.id, this.data)
  },
  methods: {
    drawLineGraph(id, data) {
      // eslint-disable-next-line no-unused-vars
      const _this = this
      const muChart = document.getElementById(id)
      this.ChartLineGraph = echarts.init(muChart)
      this.ChartLineGraph.setOption(data)
      window.addEventListener("resize", function () {
        _this.ChartLineGraph.resize()
      })
    }
  },
  beforeDestroy() {
    if (this.ChartLineGraph) {
      this.ChartLineGraph.clear()
    }
  },
  components: {}
}
</script>

<style scoped>
</style>