[JavaScript知识库]Echarts——饼图的vue组件

导入:data数据即可。
格式：[{
name:‘’,
value:0
}]

<template>
  <el-card style="width: auto;">
    <div slot="header" class="clearfix">
      <span>故障类别可视化</span>
    </div>
    <div ref="fault_pie" style="height: 400px;width: 100%">

    </div>
  </el-card>
</template>

<script>

export default {
  props:{
    data:{
      type:Array,
    }
  },
  name: "piechart",
  watch: {
    data: {
      deep: true,
      handler: function (val, oldVal) {
        this.initChart();
      }
    }
  },
  methods:{
    initChart(){
      var chartDom = this.$refs.fault_pie;
      var myChart = this.$echarts.init(chartDom);
      var option;

      option = {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: '5%',
          left: 'center'
        },
        series: [
          {
            name: '故障类别',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 30,
                fontWeight: 'bold',
                formatter: '{c}个\n\n{b}'
              },
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            },
            labelLine: {
              show: false
            },
            data: []
          }
        ]
      };

      console.log(this.data);
      option.series[0].data = this.data;
      myChart.setOption(option);

      let data = option.series[0].data;
      var i = 0;
      var name;
      var looper = () => {
        i++;
        if (i === data.length) {
          i = 0;
        }
        name = data[i].name;
        myChart.dispatchAction({
          type: 'downplay',
          seriesIndex: 0,
          dataIndex: i === 0 ? data.length - 1 : i - 1,
        });

        myChart.dispatchAction({type: 'highlight', seriesIndex: 0, dataIndex: i});
        return looper;
      };
      let timer = setInterval(looper(), 3000);

      myChart.on('mouseover', params => {
        window.clearInterval(timer);
        //如果鼠标移入正在高亮的数据段时，不取消高亮
        if (i != params.dataIndex) {
          myChart.dispatchAction({
            type: 'downplay',
            seriesIndex: 0,
            dataIndex: i,
          });
        }

        //鼠标移出后从鼠标位置开始循环
        i = params.dataIndex;
        name = data[i].name;
      });

      myChart.on('mouseout', params => {
        timer = setInterval(looper(), 3000);
      });

    }
  }
}
</script>

<style scoped>

</style>