饼状图组件

pieEcharts.vue 代码

<template>
  <div class="Echarts">
    <div ref="pieEcharts" style="width: 100%; height: 300px"></div>
  </div>
</template>

<script>
import * as echarts from "echarts/core";
import { black, light } from '@/assets/js/theme.js';
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent,
} from "echarts/components";
import { PieChart } from "echarts/charts";
import { LabelLayout } from "echarts/features";
import { CanvasRenderer } from "echarts/renderers";

echarts.use([
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  PieChart,
  CanvasRenderer,
  LabelLayout,
]);
//data.chalk-'black'黑暗主题 'light'亮色
//legendBottom legend放在下方
export default {
  name: "pieEcharts",
  props: ["data"],
  components: {},
  data() {
    return {};
  },
  computed: {},
  watch: {
    data(val) {
      if (this.$refs.pieEcharts) {
        this.$nextTick(() => {
          this.myEcharts();
        });
      }
    },
  },
  methods: {
    myEcharts() {
      if (this.data.height) {
        this.$refs.pieEcharts.style.height = this.data.height;
      }
      // 基于准备好的dom，初始化echarts实例
      echarts.registerTheme("black", black);
      echarts.registerTheme("light", light);
      var myChart = echarts.init(this.$refs.pieEcharts, this.data.chalk);
      let data = this.getPieData(this.data)

      var option = data
      console.log(option);
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
      window.onresize = function () {
        myChart.resize();
      };
    },
  },
  created() { },
  mounted() {
    if (this.$refs.pieEcharts) {
      this.$nextTick(() => {
        // //console.log(this.data);
        this.myEcharts();
      });
    }
  },
  destroyed() {
    window.onresize = null;
  },
};
</script>

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

使用

data格式示例

pieData: {
          title: '',
          series: [{
            value: 1,
            name: '1'
          }, {
            value: 2,
            name: '2',
          }]
        }

异步传输数据示例

添加echartShow 以保证正确渲染

 <pie-echarts
              v-if="echartShow"
              style="height: 400px"
              :data="pieData"
            ></pie-echarts>

.then((res) => {
        let pieData= [
        {
          value: res.data.data1,
          name: "1",
        },
        {
          value: res.data.data2,
          name: "2",
        },
      ];
      this.pieData= {
        title: this.type,
        series: optionData,
      };
      this.echartShow=true
      });