v-charst环图默认显示数据

封装组件只能用ref做class标识，原生的echars是用id做标识,设置默认选中高亮部分用dispatchAction方法

<template>
  <div>
    <ve-ring :settings="chartSettings3" :extend="percentExtend"  height="280px" ref="chart_ring" :data="chartData3"></ve-ring>

  </div>

</template>

<script>
  export default {
    name: 'pie',

    props: {
      data: Object

    },
    data () {

      this.dataZoom = [
        {
          type: 'slider',
          start: 0,
          end: 20
        }
      ]

      this.chartSettings3 = {
        radius: 70,
        offsetY: 110,
        dataType: function (v) {
          return v + ' 台'
        }
      }

      return {
        stadata: this.data,
        grid2: {
          // 调整位置
          top: 50,
          // 调整大小啥的
          height: 200
        },
        grid:{
          // 调整位置
          top: 10,
          //调整大小啥的
          height: 240
        },

        percentExtend: {
          // series: {
          //   symbolSize: 10,
          //   label: {
          //     normal: {
          //       show: true,
          //       formatter: '{b}: {d}%',
          //       // position: 'center'       //center表示文本显示位置为内部
          //     }
          //   },
          //   labelLine: {    //引导线设置
          //     normal: {
          //       show: false,   //引导线显示
          //     }
          //   }
          // },
          series:  {

          type: 'pie',
          radius: ['50%', '70%'],
          avoidLabelOverlap: false,
          label: {
          normal: {
            show: false,
              position: 'center',
                  formatter: '{b}: {d}%',
            // formatter: function(data){ // 设置圆饼图中间文字排版
            //   return data.value+"\n"+"用户数"
            // }
          },
          emphasis: {
            show: true,
              textStyle: {
              fontSize: '20',
                fontWeight: 'bold'
            }
          }
        },
        labelLine: {
          normal: {
            show: false
          }
        },
      },

          legend: {
            bottom: 5,

          },


        },

        // 饼图状态统计
        chartData3: {
          columns: [ 'type', 'num' ],
          rows: [
            { 'type': '在线设备', 'num': this.data.onlineCount },

            { 'type': '离线设备', 'num': this.data.offlineCount }
          ]
        },
        created(){

        },
        methods: {

        },

      }

    },

    mounted () {
      this.$nextTick(() => {
        var chart = this.$refs['chart_ring'].echarts;
        setTimeout(function () {
          chart.dispatchAction({
            type: 'highlight',
            // 可选，系列 index，可以是一个数组指定多个系列
            seriesIndex: 0,
            dataIndex: 0
          });
          chart.selected = 0;//记录选中的项目
        }, 0);
        //鼠标放置时高亮，移开后取消高亮
        chart.on('mouseover', function (params) {
          var options = this.getOption();
          var data = options.series[params.seriesIndex].data;
          for (var i = 0; i < data.length; i++) {
            if (i !== params.dataIndex) {
              this.dispatchAction({
                type: 'downplay',
                dataIndex: i
              });
            }
          }
        });
        //鼠标单击时选中
        chart.on('click', function (params) {
          chart.dispatchAction({
            type: 'highlight',
            // 可选，系列 index，可以是一个数组指定多个系列
            seriesIndex: 0,
            dataIndex: params.dataIndex
          });
          this.selected = params.dataIndex;//选中的项目
        });
        //当鼠标移出时恢复默认或者单击选中的项目
        chart.on('mouseout', function (params) {
          this.dispatchAction({
            type: 'highlight',
            dataIndex: this.selected
          });
        });
      });
    }
  }
</script>

<style scoped>

</style>