jn_sis_zhfx/src/components/chart/pie/dual-pie-chart.vue

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

<script>
import util from "@/helper/util.js";
import partten from "@/helper/partten.js";
import * as echarts from "echarts";
import { left } from "@antv/x6/lib/registry/port-layout/line";

export default {
  name: "dsah-pie",
  componentName: "dsah-pie",
  props: {
    width: {
      type: String,
      default: "100%",
    },
    height: {
      type: String,
      default: "18.519vh",
    },
    paddingWidth: {
      type: String,
      default: "30%",
    },
    // 饼图数据
    series: {
      type: Array,
      default: () => [],
    },
    // 颜色
    color: {
      type: String,
      default: "green",
    },
    showLegend: {
      type: Boolean,
      default: true,
    },
    title: { type: String, default: "" },
  },
  data() {
    return {
      id: "",
      chart: null,
    };
  },
  computed: {},
  methods: {
    initChart() {
      let that = this;
      //   let legend1 = this.innerData.map((v) => v.name);
      //   let legend2 = this.outerData.map((v) => v.name);
      //   let legendData = [...legend1, ...legend2];

      let option = {
        title: {
          text: this.title,
          textStyle: {
            fontSize: 16,
            color: "rgba(255, 255, 255, 0.75)",
            fontWeight: 400,
          },
          left: "center",
        },
        tooltip: {
          trigger: "item",
          formatter: function (params) {
            console.log(params);
            return params.marker + params.name + " " + params.value + "%";
          },
        },
        legend: {
          orient: "vertical",
          //   left: "left",
          right: "right",
          top: "center",
          textStyle: {
            color: "rgba(255, 255, 255, 0.75)",
          },
        },
        series: [
          {
            name: "",
            type: "pie",
            radius: "50%",
            data: this.series || [],
            label: {
              normal: {
                show: false,
              },
            },
            labelLine: {
              normal: {
                show: false,
              },
            },
            // emphasis: {
            //   itemStyle: {
            //     shadowBlur: 10,
            //     shadowOffsetX: 0,
            //     shadowColor: "rgba(0, 0, 0, 0.5)",
            //   },
            // },
          },
        ],
      };

      this.chart.setOption(option);
    },
  },
  created() {
    this.id = "pie-chart-" + util.newGUID();
  },
  mounted() {
    this.$el.style.width = this.width;
    this.$el.style.height = this.height;
    this.chart = echarts.init(this.$el);
    this.initChart();
  },
  updated() {
    this.initChart();
  },
  watch: {
    "$store.state.themeName"() {
      this.initChart();
    },
  },
};
</script>

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