Echarts 问题解决 —— 环状饼图默认显示第一条数据及提示框、鼠标移动上去后不突出、中间展示指定样式数字、鼠标移到扇形上显示不同颜色的数字、循环高亮显示饼图各模块的扇形；_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: {
                        // 未指定元素时，其他文本的样子
                        show: true,
                        fontSize: "18",
                        fontWeight: "bold",
                        padding: [-10, 0, 0, 0],
                        formatter: function(data) {
                            // 将中间的文本信息进行分割，设置不同的类名
                            // 百分数字的样式、百分号的样式、百分项名字的样式
                            return (
                                "{percent|" +
                                data.percent +
                                "}" +
                                "{per|%}" +
                                "\n{name|" +
                                data.name +
                                "}"
                            );
                        },
                        // 书写不同类名对应的样式
                        rich: {
                            // 中间彩色数字
                            percent: {
                                fontSize: 28,
                                fontFamily: "DIN-Bold",
                                fontWeight: "bold",
                                color: "#FFEA00",
                            },
                            // 中间百分号
                            per: {
                                fontSize: 16,
                                color: "#FFFFFF",
                                fontFamily: "MicrosoftYaHei",
                                padding: [0, 5, 5, -5],
                            },
                            // 中间下方标题
                            name: {
                                fontSize: 16,
                                color: "#FFFFFF",
                                fontFamily: "MicrosoftYaHei",
                                padding: [-25, 0, 0, 0],
                            },
                        },
                    },
                },

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

• 场景再现：
• 实现饼图中，鼠标悬浮在每个模块上，图例相应模块的数值颜色发生改变
• 问题分析：

1. 各个模块对应的数值设置对应的富文本样式
2. 监听饼图实例 myChart 的 mouseover 和 mouseout 事件，在事件回调函数里获取参数对象的 dataIndex 属性
3. 使用 switch case 判断鼠标悬浮在哪个模块上，让该模块的数值对应它自己的富文本样式
4. 最后，把 option 追加到 myChart 实例上

formatter: function (name) {
    var target ;
    for (1et i = 0; i < data.length; i++) {
        if (data[i].name === name) {
        target = data[i].value
      }
}
    var arr=['{b|'+ name + '}，'{a' + (index) + '|' + target + '}']
    index++ ;
    index %= data . length;
    return arr. join('')
},
textstyle: {
    width: 200,
    rich: {
        a0: {
            fontSize: 12,
            color:” #fff"
            align: 'right',
            fontweight: ' bold'
        },
        a1: { ...
// 最后，把 option 追加到 myChart 实例上
myChart . on( ' mouseover', function (v) {
    var dataIndex =' a' + v.dataIndex; 
    switch (dataIndex) {
        case 'a0' :
            option.legend.textStyle.rich.a0.color = ' #00ffff'
            break;
        case 'a1' :
            option.legend.textStyle.rich.a0.color = ' #00ffff'
            break;
        ......

 

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

• 问题分析：设置定时器，使用 Echarts 提供的 dispatchAction 触发图表行为：
• 每次高亮后，改变需要高亮显示模块的索引

/**
 * 饼图各模块自动循环高亮显示
 * 
 */
function autoHighlight(flag) {
  var index = -1
  mTime = setInterval(function () {
    myChart.dispatchAction({
      type: 'downplay',
      seriesIndex: 0,
      dataIndex: index
    });
    myChart.dispatchAction({
      type: 'highlight',
      seriesIndex: 0,
      dataIndex: index + 1
    });
    index++;
    if (index >= option.series[0].data.length) {
      index = -1;
    }
  }, 1000)
}

 

6.formatter、rich 结合

• 给 label 添加 formatter 和 rich富文本 格式化图例文本

formatter: function(data) {
    return '{percent|' + data.percent + '}'
}
rich: {
  percent: {
    fontSize: 40,
    fontWeight: 'bold',
    fontFamily: 'din-bold'
  }

7.折点无法完全显示

series: [
  showAllSymbol: true;
  ]

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

• 已经给图表容器设置宽高了，并且增加了时延，图表显示不出来
• 改变导入 echarts 的形式

 

// bad：
import echarts from 'echarts'
// good：
import * as echarts from 'echarts'