<template>
  <div>
    <Echart
      :options="options"
      id="centreRight2Chart1"
      height="241px"
      width="460px"
    ></Echart>
  </div>
</template>

<script>
import Echart from "@/common/echart";

export default {
  data() {
    return {
      options: {},
      seriesData: [80, 80, 97, 53, 95, 26, 72],
      barLinearColors: [
        new this.$echarts.graphic.LinearGradient(
          0,
          0,
          0,
          1,
          [
            {
              offset: 0,
              color: "#00a0ff", // 0% 处的颜色
            },
            {
              offset: 1,
              color: "#0f4eac", // 100% 处的颜色
            },
          ],
          false
        ),
        new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: "#47ddf5" },
          { offset: 1, color: "#21879b" },
        ]),
      ],
    };
  },
  components: {
    Echart,
  },
  props: {
    cdata: {
      type: Object,
      default: () => ({}),
    },
  },
  methods: {
    rankBarColor(cData) {
      let tempData = [];
      cData.forEach((item, index) => {
        tempData.push({
          value: item,
          itemStyle: {
            normal: {
              color:
                index % 2 == 0
                  ? this.barLinearColors[0]
                  : this.barLinearColors[1],
              // shadowColor: "rgba(0,160,221,1)",
              // shadowBlur: 4,
              barBorderRadius: 9,
            },
          },
        });
      });
      return tempData;
    },
  },
  watch: {
    cdata: {
      handler(newData) {
        this.options = {
          color: ["#edc523", "#2ac9cf", "#f87777", "#67a4fc", "#6dcc50"],
          tooltip: {
            // backgroundColor: "rgba(50,50,50,.3)",
            // textStyle: {
            //   color: "#222",
            // },
            formatter: "{b} : {c}（{d}%）", // a->seriesName,b->legendName,c->value,d->percent
          },
          grid: {
            top: "3%",
            right: "19%",
            left: "9%",
            bottom: "9%",
          },
          legend: {
            // orient: "hori",
            bottom: 0,
            itemWidth: 10,
            itemHeight: 10,
          },
          series: [
            {
              name: "攻击次数",
              type: "pie",
              clockwise: false,
              radius: "59%",
              center: ["50%", "45%"],
              hoverAnimation: false,
              roseType: "radius",
              data: [
                {
                  value: 335,
                  name: "会议室",
                },
                {
                  value: 310,
                  name: "办公室",
                },
                {
                  value: 234,
                  name: "机房",
                },
                {
                  value: 135,
                  name: "设备间",
                },
              ],
              itemStyle: {
                normal: {
                  borderColor: "#38f6c8",
                  borderWidth: 1,
                },
              },
              label: {
                show: true,
                position: "outside",
                formatter: "{a|{b}：{d}%}\n{hr|}",
                rich: {
                  hr: {
                    backgroundColor: "t",
                    borderRadius: 100,
                    width: 0,
                    height: 6,
                    padding: [3, 3, 0, -12],
                    shadowColor: "#1c1b3a",
                    shadowBlur: 1,
                    shadowOffsetX: 1,
                    shadowOffsetY: 2,
                  },
                  a: {
                    padding: [-35, 15, -20, 5],
                  },
                },
              },
              labelLine: {
                normal: {
                  length: 10,
                  length2: 16,
                  lineStyle: {
                    width: 0.5,
                  },
                },
              },
            },
          ],
        };
      },
      immediate: true,
      deep: true,
    },
  },
};
</script>
