<template>
  <div :id="'chart-electro-pie-' + id" style="width: 100%; height: 100%"></div>
</template>

<script>
import {mapState} from "vuex";

export default {
  name: "ChartElectro",
  computed: {
    ...mapState(['color'])
  },
  props: {
    id: {
      type: String,
      default: () => '0'
    }
  },
  data() {
    return {
      myChart: null
    }
  },
  watch: {
    color(newVal) {
      if(newVal) {
        this.myChart.clear();
        this.init()
      }
    }
  },
  methods: {
    init() {
      let data = [{name: '总用电量', value: '123.1'}]
      let formatNumber = function(num) {
        let reg = /(?=(\B)(\d{3})+$)/g;
        return num.toString().replace(reg, ',');
      }
      let total = data.reduce((a, b) => {
        return a + b.value * 1
      }, 0);
      let options = {
        color: [this.color],
        title: [
          {
            text: '{name|' + '总用电量' + '}\n{val|' + formatNumber(total) + '度' +'}',
            top: 'center',
            left: 'center',
            textStyle: {
              rich: {
                name: {
                  fontSize: 14,
                  fontWeight: 'normal',
                  color: '#666666',
                  padding: [10, 0],
                },
                val: {
                  fontSize: 32,
                  fontWeight: 'bold',
                  color: '#333333',
                },
              },
            },
          },
        ],
        series: [
          {
            type: 'pie',
            radius: ['45%', '60%'],
            center: ['50%', '50%'],
            data: data,
            hoverAnimation: false,
            itemStyle: {
              normal: {
                borderColor: '#fff',
                borderWidth: 2
              }
            },
            labelLine: {
              normal: {
                length: 20,
                length2: 120,
                lineStyle: {
                  color: '#e6e6e6'
                }
              }
            },
            label: {
              normal: {
                formatter: params => {
                  return (
                      '{icon|●}{name|' + params.name + '}{value|' +
                      formatNumber(params.value) + '}'
                  );
                },
                padding: [0 , -100, 25, -100],
                rich: {
                  icon: {
                    fontSize: 16
                  },
                  name: {
                    fontSize: 14,
                    padding: [0, 10, 0, 4],
                    color: '#666666'
                  },
                  value: {
                    fontSize: 18,
                    fontWeight: 'bold',
                    color: '#333333'
                  }
                }
              }
            },
          }
        ]
      }
      this.myChart.setOption(options)
    }
  },
  mounted() {
    this.myChart = this.$echarts.init(document.getElementById('chart-electro-pie-' + this.id));
    this.init()
  }
}
</script>

<style scoped>

</style>