<template>
  <div class="bigscreen-echarts-pie">
    <div :id="eId" :style="styles"></div>
    <!-- <div v-else>暂无数据</div> -->
  </div>
</template>
<script>
import * as echarts from "echarts";
export default {
  name: "echartsRadarWrap",
  props: {
    eId: {
      type: String,
    },
    styles: {
      type: String,
    },
    colorList: {
      type: [Array, String],
      default: "",
    },
    option: {
      stype: Object,
      default: [],
    },
  },
  data() {
    return {
      chart: null,
    };
  },
  created() {
    this.chart = null;
  },
  mounted() {
    this.drawLine();
  },
  methods: {
    updateEchart() {
      if (this.chart) {
        this.chart = null;
      }
      this.drawLine();
    },
    drawLine() {
      if (!this.chart) {
        this.chart = echarts.init(document.getElementById(this.eId));
      }
      const option = {
        color: this.colorList,
        // legend: {
        //   top: "5",
        //   right: "10",
        //   type: "scroll",
        //   // itemWidth: 10, // legend 显示宽度
        //   orient: "vertical",
        //   pageIconColor: "#6495ed", //翻页下一页的三角按钮颜色
        //   pageIconInactiveColor: "#aaa", //翻页（即翻页到头时）
        //   pageIconSize: 10, //翻页按钮大小
        //   pageButtonItemGap: 1, //翻页按钮的两个之间的间距
        //   textStyle: {
        //     color: "#fff",
        //     fontSize: 16,
        //   },
        //   formatter: function (name) {
        //     return name.length > 7 ? name.substr(0, 7) + "..." : name;
        //   },
        // },
        toolbox: {
          show: false,
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            restore: { show: true },
            saveAsImage: { show: true },
          },
        },
        series: [
          {
            name: "",
            type: "pie",
            radius: ["40%", "70%"],
            center: ["50%", "50%"],
            itemStyle: {
              borderRadius: 10,
              borderColor: "#fff",
              borderWidth: 2,
            },
            emphasis: {
              label: {
                show: false,
              },
            },
            label: {
              show: false,
            },
            itemStyle: {
              borderRadius: 1,
            },
            data: this.option,
          },
        ],
      };
      this.chart.setOption(option);
    },
  },
  watch: {
    option(val, oldVal) {
      this.chart = null;
      this.drawLine();
    },
  },
};
</script>
<style lang="scss">
.bigscreen-echarts-pie {
  position: relative;
  height: 100%;
  top: 0px;
  width: 50%;
}
</style>
