rongxin.nongjing.expo/src/components/charts/pie/index.js

import * as echarts from 'echarts';
import elementResizeDetectorMaker from 'element-resize-detector';
export default {
  props: {
    id: {
      type: String,
      default: 'pie'
    },
    data: {
      type: Array,
      default: function () {
        return [
          {
            value: 2154,
            unit: '万元',
            name: "项目一",
          },
          {
            value: 3854,
            unit: '万元',
            name: "项目二",
          },
          {
            value: 3854,
            unit: '万吨',
            name: "项目三",
          },
          {
            value: 3854,
            unit: '万吨',
            name: "项目四",
          }
        ];
      }
    }
  },
  data () {
    return {
      chart: null
    };
  },
  mounted () {
    this.initChart();
  },
  computed: {
  },
  methods: {
    // 设置监听器 页面尺寸变化重新绘制图表
    initResizeCallBack () {
      const erd = elementResizeDetectorMaker();
      erd.listenTo(document.getElementById(this.id), () => {
        this.$nextTick(() => {
          this.chart.resize();
        });
      });
    },
    initChart () {
      this.chart = echarts.init(document.getElementById(this.id));
      this.chartSetOption();
    },
    chartSetOption () {
      var scale = 1;
      var echartData = [
        ...this.data
      ];
      var rich = {
        yellow: {
          color: "rgba(185, 211, 235, 1)",
          fontSize: 18 * scale,
          padding: [5, 4],
          align: "center",
        },
        total: {
          color: "#ffc72b",
          fontSize: 40 * scale,
          align: "center",
        },
        white: {
          color: "rgba(185, 211, 235, 1)",
          align: "center",
          fontSize: 18 * scale,
          padding: [0, 0],
        },
        blue: {
          color: "rgba(185, 211, 235, 1)",
          fontSize: 16 * scale,
          align: "center",
        },
        hr: {
          // borderColor: "#0b5263",
          width: "100%",
          borderWidth: 1,
          height: 0,
        },
      };
      const option = {
        title: [
          {
            text: "总债务",
            left: "center",
            top: "40%",
            padding: [0, 0],
            textStyle: {
              color: "#fff",
              fontSize: 18 * scale,
              align: "center",
            },
          },
          {
            text: "1000 万元",
            left: "center",
            top: "50%",
            padding: [0, 0],
            textStyle: {
              color: "#fff",
              fontSize: 18 * scale,
              align: "center",
            },
          }
        ],
        series: [
          {
            name: "",
            type: "pie",
            radius: ["48%", "70%"],

            color: ["rgba(15, 252, 252, 1)", "rgba(134, 91, 252, 1)", "rgba(49, 129, 246, 1)", "rgba(29, 197, 104, 1)"],
            label: {
              normal: {
                formatter: function (params, ticket, callback) {
                  var total = 0; //考生总数量
                  var percent = 0; //考生占比
                  echartData.forEach(function (value, index, array) {
                    total += value.value;
                  });
                  percent = ((params.value / total) * 100).toFixed(1);
                  return (
                    "{white|" +
                    percent + "%" +
                    "}\n{blue|" +
                    params.name +
                    "}\n{hr|}\n{yellow|" +
                    params.value + params.data.unit + '}'
                  );
                },
                rich: rich,
              },
            },
            labelLine: {
              normal: {
                length: 10 * scale,
                length2: 20 * scale,
              },
            },
            data: echartData,
          },
        ],
      };
      this.chart.setOption(option);
      this.initResizeCallBack();

    }
  }
};