<template>
  <div
    :id="chartId"
    :style="{
      width: '100%',
      height: chartSetting.height,
      padding: ' 0 0.4rem ',
    }"
  ></div>
</template>

<script>
import echartMixins from "@/utils/resizeMixins";
export default {
  props: {
    chartSetting: { type: Object, default: () => {} },
    chartId: { type: String, default: "pieChart" },
    chartData: {
      type: Array,
      default: () => [
        {
          value: 1048,
          name: "日立电梯(中国)有限公司",
          itemStyle: { color: "#039CEC" },
        },
        { value: 735, name: "三菱", itemStyle: { color: "#1157F5" } },
        { value: 0, name: "广日电梯", itemStyle: { color: "#c23531" } },
      ],
    },
  },
  data() {
    return { chart: null };
  },
  mixins: [echartMixins],
  mounted() {
    this.draw();
  },
  watch: {
    chartData(val) {
      console.log(val, "val");
      if (val.length > 0) {
        this.draw();
      }
    },
  },
  methods: {
    draw() {
      this.chart = this.$echarts.init(document.getElementById(this.chartId));
      let option = {
        tooltip: {
          trigger: "item",
        },

        legend: {
          left: "center",

          bottom: "0%",
          textStyle: { color: "white" },
          show: this.chartSetting.showLegend,
          type: "scroll",
        },
        series: [
          {
            name: "品牌统计",
            type: "pie",
            radius: this.chartSetting.radius,
            label: {
              rotate: 0,
              show: true,
              overflow: "truncate",
              position: "outer",
              alignTo: "none",
              edgeDistance: "5%",
              bleedMargin: 1,
              distanceToLabelLine: 1,
            },

            emphasis: {
              label: {
                show: true,
                fontSize: 12,
                fontWeight: "bold",
              },
            },
            labelLine: {
              normal: {
                length: 10, // 改变标示线的长度
                smooth: 0.2,
              },
            },
            label: {
              normal: {},
            },

            center: ["50%", "50%"], // 设置饼图的中心位置
            data: this.chartData,
            color: this.chartSetting.pieColor,
          },
        ],
      };
      this.chart.setOption(option);
    },
  },
};
</script>
<style lang="scss" scoped></style>
