在vue中封装echart组件

起因：使用两种不同的图表组件时，发生了冲突问题，导致其中一个组件图表无法显示，可以将其中一个图表封装成组件。

1、在vue中安装Echart

npm install echarts -S

2、创建一个名为echart.vue的文件

随便做了一个饼图,prop中是我们自定义属性用来接受父组件传来的数据

<template>
  <div id="radar" class="container"></div>
</template>

<script>
import * as echarts from "echarts";
export default {
  name: "echart",
  props: {
    //接受父组件传递来的数据
    items: {
      type: Array,
      default() {
        //默认数据，没有数剧的情况下启用
        return [
          {
            name: "Green/\nVegetative",
            children: [
              {
                name: "Olive Oil",
                value: 1,
              },
              {
                name: "Raw",
                value: 1,
              },
              {
                name: "Green/\nVegetative",
              },
              {
                name: "Beany",
                value: 1,
              },
            ],
          },
          {
            name: "Roasted",
            children: [
              {
                name: "Pipe Tobacco",
                value: 1,
              },
              {
                name: "Tobacco",
                value: 1,
              },
              {
                name: "Burnt",
              },
              {
                name: "Cereal",
              },
            ],
          },
          {
            name: "Spices",
            children: [
              {
                name: "Pungent",
                value: 1,
              },
              {
                name: "Pepper",
                value: 1,
              },
              {
                name: "Brown Spice",
              },
            ],
          },
          {
            name: "Sweet",
            children: [
              {
                name: "Brown Sugar",
              },
              {
                name: "Vanilla",
                value: 1,
              },
              {
                name: "Vanillin",
                value: 1,
              },
              {
                name: "Overall Sweet",
                value: 1,
              },
              {
                name: "Sweet Aromatics",
                value: 2,
              },
            ],
          },
        ];
      },
    },
  },
  mounted() {
    let values = []; //提炼接收到的数据
    this.items.forEach((el) => {
      values.push(el.value);
    });
    const option = {
      //覆盖配置数据option
      series: {
        type: "sunburst",
        data: this.items,
        radius: [0, "95%"],
        sort: undefined,
        emphasis: {
          focus: "ancestor",
        },
        levels: [
          {},
          {
            r0: "15%",
            r: "35%",
            itemStyle: {
              borderWidth: 2,
            },
            label: {
              rotate: "tangential",
            },
          },
          {
            r0: "35%",
            r: "70%",
            label: {
              align: "right",
            },
          },
          {
            r0: "70%",
            r: "72%",
            label: {
              position: "outside",
              padding: 3,
              silent: false,
            },
            itemStyle: {
              borderWidth: 3,
            },
          },
        ],
      },
    };
    //初始化
    const chartObj = echarts.init(document.getElementById("radar"));
    chartObj.setOption(option);
  },
};
</script>
<style scoped>
.container {
  width: 300px;
  height: 300px;
}
</style>

3、在我们使用的位置
item中写我们自定义属性，也就是图表中的data值

<echart :items="items"></echart>

import echart from "./components/echart.vue";//引入组件文件
export default {
  name: "home",
	  components: {
	    echart,
	  },
  }

4、将echarts封装后，如果要使图表实时更新，需要在子组件对改变的数进行监听，再重新渲染图表
创建监听函数

watch: {
        items:{
          handler(val) {
                this.setChart2(val)
            },
        },
        deep: true,
        immediate: true,
      },

并在方法内调用渲染表格的方法，实现同步刷新

setChart2(e){
    this.items=e
    this.getDate();
  }
  ```