【Echart】关于echart的二次封装

先在common新建一个echart的vue文件

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

<script>
import * as echarts from "echarts";
export default {
  name: "echart",
  props: {
    id: {
      type: String,
      default: "chart",
    },
    className: {
      type: String,
      default: "",
    },
    width: {
      type: String,
      default: "100%",
    },
    height: {
      type: String,
      default: "2.5rem",
    },
    options: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      chart: null,
    };
  },
  watch: {
    options: {
      handler() {
        let options = this.$props.options;
        this.chart?.setOption(options ,true);
        this.resizeHandler();
      },
      immediate: true,
      deep: true,
    },
  },
  mounted() {
    //配置为 svg 形式，预防页面缩放而出现模糊问题；图表过于复杂时建议使用 Canvas
    this.chart = echarts.init(document.getElementById(this.$props.id), { renderer: "svg", });
    let options = this.$props.options;
    this.chart.setOption(options,true);
    window.addEventListener("resize", this.resizeHandler);
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.resizeHandler);
    this.chart?.dispose();
  },
  methods: {
    resizeHandler() {
      setTimeout(() => {
        this.chart?.resize();
      }, 0);
    },
  },
};
</script>

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

在components新建一个echart的文件夹 用于存放所有的echart组件

echart.vue是配置项，这里事例用的是玫瑰图  roseType: "area",

<template>
  <div>
    <Echart :options="options" id="id" height="220px" width="260px"/>
  </div>
</template>

<script>
  import Echart from '@/common/echart'
  export default {
    components:{
      Echart,
    },
    props: {
    cdata: {
      type: Object,
      default: () => ({})
    },
  },
    data(){
      return{
        options:{}
      }
    },
    watch:{
      cdata: {
        handler (newData) {
          this.options = {
            color: [
              "#37a2da",
              "#32c5e9",
              "#9fe6b8",
              "#ffdb5c",
              "#ff9f7f",
              "#fb7293",
              "#e7bcf3",
              "#8378ea"
            ],
            tooltip: {
              trigger: "item",
              formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            toolbox: {
              show: true
            },
            calculable: true,
            legend: {
              orient: "horizontal",
              icon: "circle",
              bottom: 0,
              x: "center",
              data: newData.xData,
              textStyle: {
                color: "#fff"
              }
            },
            series: [
              {
                name: "通过率统计",
                type: "pie",
                radius: [10, 50],
                roseType: "area",
                center: ["50%", "40%"],
                data: newData.seriesData
              }
            ]
          }
        },
        immediate: true,
        deep: true
      }
    },
  }
</script>

<style lang="scss" scoped>

</style>

index.vue是具体数据，最后引用组件就是这个

<template>
  <div>
    <Chart :cdata="cdata" />
  </div>
</template>

<script>
  import Chart from './echart'
  export default {
     components:{
      Chart,
    },
    data() {
      return {
        cdata: {
        xData: ["data1", "data2", "data3", "data4", "data5", "data6"],
        seriesData: [
          { value: 10, name: "data1" },
          { value: 5, name: "data2" },
          { value: 15, name: "data3" },
          { value: 25, name: "data4" },
          { value: 20, name: "data5" },
          { value: 35, name: "data6" }
        ]
      }
      }
    },
  }
</script>

<style lang="sass" scoped>

</style>

最后使用

<template>
  <div>
    <EchartLeft/>
  </div>
</template>
<script>
  import EchartLeft from '../echart/echartLeft/index'
  export default {
    components:{
      EchartLeft,
     }
   }
</script>

效果