luohe_fronted/src/components/pieChart.vue

<template>
  <div class="chart" :id="id" />
</template>

<script>
const colors = ["#db6749", "#f8cd55", "#3c97d6", "#989bf8"];
import * as echarts from 'echarts'
export default {
  props: {
    id: { type: String, required: true },
    dataset: { type: Array, required: true },
    encode: { type: Object, required: true },
    labelFormat: { type: Array, required: false },
    isBig: { type: Boolean, default: false },
    colorArr: { type: Array, default: () => colors },
    radiusArr: { type: Array, default: () => ["20%", "60%"] },
    centerArr: { type: Array, default: () => ["50%", "50%"] },
    legend: { type: Object },
    title: { type: Object },
    startAngle: { type: Number, default: 45 },
    labelSize: { type: Number, default: 12 },
    // labelLineHeight: { type: Number, default: 5 },
    outCircle: { type: Boolean, default: false },
    innerCircle: { type: Boolean, default: false },
    roseType: { type: String | Boolean, default: "radius" },
    withBorder: { type: Boolean, default: false },
    hoverIn: { type: Boolean, default: true }, // 是否鼠标悬浮效果
    tooltip: { type: Function },
  },
  data() {
    const outRadius = this.outCircle
      ? parseInt(this.radiusArr[1].match(/([0-9]*)%/)[1]) + 5 + "%"
      : 0;
    const innerRadius = this.innerCircle
      ? parseInt(this.radiusArr[0].match(/([0-9]*)%/)[1]) - 10 + "%"
      : 0;
    return {
      option: {
        color: this.colorArr,
        title: {},
        legend: {
          icon: "circle",
          show: this.legend,
          textStyle: {
            color: "#8BDFFD",
            fontSize: this.isBig ? 18 : 12,
          },
          ...this.legend,
        },
        tooltip: {
          show: this.tooltip,
          backgroundColor: "t",
          formatter: this.tooltip,
        },
        dataset: { source: [] },
        series: [
          {
            type: "pie",
            hoverAnimation: this.hoverIn,
            silent: !this.hoverIn,
            radius: this.radiusArr,
            center: this.centerArr,
            roseType: this.roseType,
            startAngle: this.startAngle,
            minAngle: 10,
            avoidLabelOverlap: true,
            labelLine: {
              length: 20,
              length2: 10,
              lineStyle: { type: "solid", width: 2 },
            },
            itemStyle: this.withBorder
              ? { borderColor: "#020F59", borderWidth: 10 }
              : null,
            encode: this.encode,
            label: {
              show: this.labelFormat,
              fontSize: this.labelSize,
              formatter: this.labelFormat && this.labelFormat.join("\n"),
              rich: {
                hr: {
                  backgroundColor: "t",
                  width: 3,
                  height: 3,
                  borderRadius: 3,
                  fontSize: this.isBig ? 18 : this.labelSize,
                  padding: [3, 3, 0, -12],
                },
                name: {
                  color: "#8BDFFD",
                  align: "center",
                  lineHeight: this.labelSize,
                  padding: this.isBig ? [-20, 10, -40, 10] : [-20, 10, -30, 10],
                  fontSize: this.isBig ? 18 : this.labelSize,
                  height: 20,
                },
                sub: {
                  color: "#ffffff",
                  lineHeight: this.labelSize,
                  padding: [-20, 10, 0, 10],
                  fontSize: this.isBig ? 18 : this.labelSize,
                },
              },
            },
          },
          {
            name: "外圈",
            type: "pie",
            labelLine: false,
            show: this.outCircle,
            radius: [outRadius, outRadius],
            data: [1],
            itemStyle: {
              borderColor: "#03298B",
              borderWidth: 2,
            },
          },
          {
            name: "里圈",
            type: "pie",
            labelLine: false,
            show: this.innerCircle,
            radius: innerRadius,
            data: [1],
            itemStyle: {
              color: "#0249E7",
            },
          },
        ],
      },
    };
  },
  watch: {
    dataset: function (newV) {
      const option = this.option;
      option.dataset.source = newV;
      this.pieChart.setOption(option);
    },
    title: function (newV) {
      const option = this.option;
      option.title = newV;
      this.pieChart.setOption(option);
    },
  },
  mounted() {
    const option = this.option;
    option.dataset.source = this.dataset;
    option.title = this.title;
    this.pieChart = echarts.init($(`#${this.id}`)[0]);
    this.pieChart.setOption(option);
  },
};
</script>

<style lang="less" scoped>
.chart {
  width: 100%;
  height: 100%;
}
</style>