echarts饼图，默认选择，自动选中，dispatchAction

效果图

初始化

var myChart = this.$echarts.init(document.getElementById('pie'));

option

{
  color: ['#F33B3F', '#FF850A', '#F8C649', '#00CFFF'],
  tooltip: {
    show: false,
    trigger: 'item',
  },
  legend: {
    selectedMode: false,
    right: 10,
    top: '15%',
    bottom: 20,
    itemHeight: 10,
    itemWidth: 10,
    orient: 'vertical',
    align: 'auto',
    itemGap: 10,
    textStyle: {
      color: '#FFFFFF',
      fontSize: 12 + 'px',
      padding: 5,
    },
    icon: 'circle',
    itemStyle: {
      borderWidth: 0,
    },
  },
  series: [
    {
      name: '异常',
      type: 'pie',
      radius: ['55%', '80%'],
      center: ['35%', '50%'],
      selectedMode: 'single',
      selectedOffset: 10,
      legendHoverLink: false,
      itemStyle: {
        borderColor: 'none',
      },
      emphasis: {
        label: {
          show: true,
          fontSize: '40',
          fontWeight: 'bold'
        }
      },
      label: {
        show: false,
        position: 'center',
        formatter: '{bt|{b}}\n{dt|{d}%}',
        rich: {
          bt: {
            fontSize: 14 + 'px',
            fontFamily: 'PingFangSC-Regular, PingFang SC',
            fontWeight: 400,
            color: '#EEEEEE',
            height: 36,
          },
          dt: {
            fontSize: 20 + 'px',
            fontFamily: 'HelveticaNeue-Bold, HelveticaNeue',
            fontWeight: 'bold',
            color: '#FFFFFF',
          },
        },
      },
      data: [
        { value: 10, name: '红色告警' },
        { value: 20, name: '橙色告警' },
        { value: 30, name: '黄色告警' },
        { value: 40, name: '蓝色告警' },
      ],
      tooltip: {
        borderColor: '#f00',
      },
    },
  ],
}

选中模块

myChart.dispatchAction({
  type: 'highlight',
  seriesIndex: 0,
  dataIndex: 1,
});

取消选中模块

代码如下（示例）：

myChart.dispatchAction({
  type: 'downplay',
  seriesIndex: 0,
  dataIndex: 1,
});