<template>
  <div ref="myChart" style="width:100%;height:100%;"></div>
</template>

<script>
export default {
  props: {
    scaleData: {
      type: Array,
      default: []
    }
  },
  data() {
    return {
      sumMoney: 0,
      kys: [],
      datas: []
    };
  },
  mounted() {
    let myChart = this.$echarts.init(this.$refs.myChart);
    window.addEventListener("resize", () => { 
        myChart.resize();  
    });
    this.scaleData.forEach(x => {
      this.sumMoney += x.value;
    });
    this.scaleData.forEach(x => {
      this.datas.push((x.value / this.sumMoney).toFixed(2) * 100);
      this.kys.push(x.name);
    });

    this.sumMoney = 100;
    this.initChat();
  },
  methods: {
    initChat() {
      let t = this;
      let option = {
        // backgroundColor: "#FFF",
        grid: {
          left: "40px",
          top: "10px",
          bottom: "20px",
          right: "0px"
        },
        xAxis: {
          data: this.kys,
          axisTick: {
            show: false
          },
          axisLine: {
            lineStyle: {
              color: "rgba(255, 129, 109, 0.1)",
              width: 1 //这里是为了突出显示加上的
            }
          },
          axisLabel: {
            textStyle: {
              color: "#999",
              fontSize: 12
            }
          }
        },
        yAxis: [
          {
            max: 100,
            min: 0,
            interval: 10,
            splitNumber: 2,
            axisTick: {
              show: false
            },
            axisLine: {
              lineStyle: {
                color: "rgba(255, 129, 109, 0.1)",
                width: 1 //这里是为了突出显示加上的
              }
            },
            axisLabel: {
              textStyle: {
                color: "#999"
              },
              formatter: "{value} %"
            },
            splitArea: {
              areaStyle: {
                color: "rgba(255,255,255,.5)"
              }
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: "rgba(255,255,255, 0.1)",
                width: 0.5,
                type: "dashed"
              }
            }
          }
        ],
        series: [
          {
            name: "hill",
            type: "pictorialBar",
            barCategoryGap: "0%",
            symbol:
              "path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z",
            label: {
              show: true,
              position: "top",
              distance: 15,
              color: "rgba(16,137,62, 1)",
              fontWeight: "bolder",
              fontSize: 18,
              formatter: "{c}%"
            },
            itemStyle: {
              normal: {
                color: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "rgba(16,137,62, 1)" //  0%  处的颜色
                    },
                    {
                      offset: 1,
                      color: "rgba(16,137,62,.4)" //  100%  处的颜色
                    }
                  ],
                  global: false //  缺省为  false
                }
              },
              emphasis: {
                opacity: 1
              }
            },
            data: this.datas,
            z: 10
          }
        ]
      };
      let myChart = t.$echarts.init(this.$refs.myChart);
      myChart.setOption(option);
    }
  }
};
</script>

<style>
</style>