Echarts 问题解决 —— 环状饼图默认显示第一条数据及提示框、鼠标移动上去后不突出、中间展示指定样式数字、鼠标移到扇形上显示不同颜色的数字、循环高亮显示饼图各模块的扇形；

目录

1.环状饼图默认显示第一条数据及提示框

2.环状饼图鼠标移动上去后不突出显示 

3.环状饼图中间展示指定样式数字

4.环状饼图鼠标移到图例上显示不同颜色的数字

5.环状饼图循环高亮显示饼图各模块的扇形

6.formatter、rich 结合

7.折点无法完全显示

8.设置时延后图表不显示

---

1.环状饼图默认显示第一条数据及提示框

• 效果展示：

// 默认展示第一条数据的提示框
myChart.dispatchAction({
  type: 'showTip',
  seriesIndex: 0,
  dataIndex: 0
});

// 默认高亮展示第一条数据
myChart.dispatchAction({
  type: 'highlight',
  seriesIndex: 0,
  dataIndex: 0
});

myChart.on('mouseover', (v) => {
  if (v.dataIndex != 0) {
    // 高亮显示悬停的那块
    myChart.dispatchAction({
      type: 'hideTip',
      seriesIndex: 0,
      dataIndex: 0
    });
    // 当检测到鼠标悬停事件，取消所有选中高亮
    myChart.dispatchAction({
      type: 'downplay',
      seriesIndex: 0,
      dataIndex: 0
    });
  }
});

// 检测鼠标移出后显示之前默认高亮的那块
myChart.on('mouseout', (v) => {
  myChart.dispatchAction({
    type: 'showTip',
    seriesIndex: 0,
    dataIndex: 0
  });
  myChart.dispatchAction({
    type: 'highlight',
    seriesIndex: 0,
    dataIndex: 0
  });
});

2.环状饼图鼠标移动上去后不突出显示 

• 效果展示：鼠标移动上去之后，图表保持原样，而不是像 1 中那样突出展示
• 
• 扇形不突出：series / hoverAnimation: false

3.环状饼图中间展示指定样式数字

• 效果展示：见 2 中的环状图中间文字数字的效果
• 为中间内容指定单独样式： series / emphasis / label / formatter + rich

                emphasis: {
                    label: {
                        // 未指定元素时，其他文本的样子