JingTieXueTang.Web/src/components/echarts/EchartsDoughnut.vue

<template>
  <div ref="myChartPie" :style="{ width: width, height: height }"></div>
</template>

<script>
import { mapState } from 'vuex';
import { formatNumberToDollar } from '@/filters';
// 引入基本模板
let echarts = require('echarts/lib/echarts');
// 引入柱状图组件
require('echarts/lib/chart/bar');
// 引入提示框和title组件
require('echarts/lib/component/tooltip');
require('echarts/lib/component/title');
import { PieChart } from 'echarts/charts';
echarts.use([PieChart]);
export default {
  props: {
    // 数据
    pieData: {
      type: Object,
      default() {
        return {
          title: '', // 标题
          data: [], // 数据， { name, value }
          count: 0, // 总数
        };
      },
    },
    // 宽度
    width: {
      type: String,
      default: '100%',
    },
    // 高度
    height: {
      type: String,
      default: '400px',
    },
  },
  components: {},
  data() {
    return {};
  },
  created() {},
  mounted() {},
  beforeDestroy() {},
  watch: {
    // 监听浏览器可视区域宽度是否变化
    screenWidth() {
      this.resizeByWindowFun(); // 初始化echarts图表大小
    },
  },
  computed: {
    ...mapState({
      screenWidth: (state) => state.common.screenWidth,
    }),
  },
  methods: {
    // 初始化数据
    initDataFun(pieData) {
      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(this.$refs.myChartPie);
      let data = genData(pieData.data);
      // 绘制图表
      myChart.setOption({
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)',
        }, // 移入的提示
        legend: {
          orient: 'vertical',
          icon: 'circle',
          radius: '100%',
          left: 10,
          top: 10,
          bottom: 10,
          data: data.legendData,
          selected: data.selected,
        }, // 颜色标识标签
        series: [
          {
            name: pieData.seriesLabel,
            type: 'pie',
            radius: ['35%', '60%'], // 第一项是内半径,第二项是外半径,内半径为0就是真的饼,不是环形
            avoidLabelOverlap: false,
            data: data.seriesData,
            label: {
              show: true,
              position: 'center',
              formatter: `  ${pieData.title}\r\n ${formatNumberToDollar(
                pieData.count
              )}`,
              textStyle: {
                fontSize: '20',
                fontWeight: 'bold',
                color: 'rgba(0, 0, 0, 0.65)',
              },
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)',
              },
            },
          },
        ],
      });
      function genData(dataList) {
        let legendData = [];
        let seriesData = [];
        dataList.forEach((item) => {
          legendData.push(item.name);
          seriesData.push({
            name: item.name,
            value: item.value,
          });
        });
        return {
          legendData,
          seriesData,
        };
      }
    },
    // 根据窗口大小 初始化echarts图表大小
    resizeByWindowFun() {
      echarts.init(this.$refs.myChartPie).resize();
    },
  },
};
</script>

<style lang="less"></style>

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