<template>
  <div class="LiveOverviewChart" ref="LiveOverviewChart"></div>
</template>

<script>
// import * as echarts from "echarts";
// import config from "@/config/index";
import * as echarts from 'echarts/core';
import { PieChart } from 'echarts/charts';
import {
  TitleComponent,
  GridComponent,
  LegendComponent,
} from 'echarts/components';
import { CanvasRenderer } from 'echarts/renderers';
echarts.use([
  TitleComponent,
  GridComponent,
  CanvasRenderer,
  LegendComponent,
  PieChart,
]);

let chart = undefined;
export default {
  name: 'LiveOverviewChart',
  props: ['list', 'dataKey', 'title', 'dy'],
  data: function () {
    return {};
  },
  filters: {},
  methods: {
    createChart() {
      if (!this.$refs.LiveOverviewChart) return;
      chart = echarts.init(this.$refs.LiveOverviewChart, undefined, {
        height: (this.$refs.LiveOverviewChart.offsetWidth * 6) / 16,
        width: this.$refs.LiveOverviewChart.offsetWidth,
      });
      const data = [];
      const list = JSON.parse(JSON.stringify(this.list)).sort((a, b) => {
        return b[this.dataKey] - a[this.dataKey];
      });
      for (let i = 0; i < list.length; i++) {
        const v = list[i];
        v[this.dataKey] && data.push({
          value: v[this.dataKey],
          name: v.centerName,
        });
      }
      chart.setOption({
        title: {
          text: this.title,
          subtext: '',
        },
        label: {
          alignTo: 'edge',
          formatter: '{name|{b}}\n{time|{c} ' + (this.dy || '') + '}',
          minMargin: 5,
          edgeDistance: 10,
          lineHeight: 15,
          rich: {
            time: {
              fontSize: 10,
              color: '#999',
            },
          },
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: '50%',
            data,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)',
              },
            },
          },
        ],
      });
    },
  },
  mounted() {
    this.createChart();
  },
  beforeUnmount: function () {
    chart.dispose();
  },
  components: {},
};
</script>
<style></style>
