<template>
  <div>
    <div ref='ringChart' class="ringChart" style="width:290px;height:200px"></div>
  </div>
</template>

<script>
import { listSubType } from "@/api/conf/subType";
import * as echarts from 'echarts';
export default {
  name: 'RingChart',
  data() {
    return {
      // 总数量
      total:0,
      chart:null,
      option:null
    }
  },
  mounted() {
    this.getList();
    this.ringChart()
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    ringChart() {
      var chartDom = this.$refs.ringChart
      this.chart = echarts.init(chartDom)
      this.option = {
        tooltip: {
          trigger: 'item',
        },
        legend: {
          left: 'center',
          top:'top',
          padding:[0,0,10,0],
          textStyle:{//图例文字的样式
            color:'#fff'
          }
        },
        title: {
          text: '算法总数',
          subtext:28,
          textStyle: {
            fontSize: 16, 
            color:'#fff',
            fontWeight: 400, 
          },
          subtextStyle:{
            fontSize: 24, 
            fontWeight: 700, 
            color: "rgb(50,197,233)",
          },
          left: 'center', // 文字水平居中
          top: '40%', // 文字垂直居中
        },
        series: [
          {
            name: '算法',
            type: 'pie',
            radius: ['45%', '70%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center',
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 24,
                fontWeight: 'bold',
              },
            },
            labelLine: {
              show: false,
            },
            data: [
              { value: 13, name: '数据预处理' },
              { value: 5, name: '特征提取' },
              { value: 5, name: '退化评估' },
              { value: 5, name: '故障预测' },
            ],
          },
        ],
      }
      this.chart.on('mousemove',  (params) => {
        if (params.data) {
          this.option.title.text = ' '
          this.option.title.subtext = ' '
          this.chart.setOption(this.option)
        }
      })

      this.chart.on('mouseout',  () => {
        this.option.title.text = '算法总数'
        this.option.title.subtext = 28
        this.chart.setOption(this.option)
      })
      this.option && this.chart.setOption(this.option)
    },
    // 获取总条数
    getList() {
      this.loading = true;
      this.queryParams={pageNum:1,pageSize:100}
      listSubType(this.queryParams).then(response => {
        // this.subTypeList = response.rows;
        // this.total = response.total;
        this.loading = false;
        this.ringChart()
      });
    },
    
  },
}
</script>

<style scoped>
</style>