echarts 环形图自动实现某数据集高亮效果

最新推荐文章于 2025-06-20 12:15:10 发布

转载最新推荐文章于 2025-06-20 12:15:10 发布 · 1.3k 阅读

5 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/10000000000/blog/2874049

文章标签：

#javascript #python #ViewUI

本文介绍如何使用ECharts的dispatchAction API为环形图饼图的特定数据集添加高亮效果，通过自定义属性highlight保持数据集高亮，并提供代码示例。

2019独角兽企业重金招聘Python工程师标准>>>

有时候做echarts 环形图饼图某个数据集需要高亮效果如下

可以通过 echarts的 dispatchActionAPI 来实现

相关代码如下

/**
 * 定制高亮环形图.
 * Author: Notfound404
 * Description:
 * Date: 2018/4/4
 * Time: 10:07
 */

var circleCharts = echarts.init(document.getElementById('circle'));


circleCharts.setOption({
    title: {
        text: '{a|80}{b|%}',
        x: 'center',
        y: 'center',
        textStyle: {
            rich: {
                a: {
                    fontWeight: 'bold',
                    fontSize: '18'
                },
                b: {
                    verticalAlign: 'bottom',
                    fontSize: '10'
                }
            }
        }
    },
    toolbox: {
        show: false
    },

    grid: {
        top: '5%',
        left: '2%',
        bottom: '10%',
        containLabel: true
    },

    tooltip: {
        show: false
    },

    series: [
        {
            name: '',
            type: 'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            // 高亮偏移值
            hoverOffset: 5,
            label: {
                normal: {
                    show: false
                }
            },

            labelLine: {
                normal: {
                    show: false
                }
            },
            //   highlight 自定义属性  有此属性该数据集保持高亮
            data: [
                {value: "11", name: "baidu"}
                ,
                {value: "5", name: "google", highlight: true}
            ]
        }
    ]
});

/**
 * echarts 执行action
 * @param instance  ecahrts 实例
 * @param type  action 类型
 * @param index   对应的 数据索引
 */
function chartAction(instance, type, index) {
    instance.dispatchAction({
        type: type,
        dataIndex: index
    })
}

/**
 * 初始高亮状态  
 */
circleCharts.on('finished', function(e) {
    var data = this.getOption().series[0].data;
    for (var i in data) {
        if (data) {
            if (data[i].highlight) {
                chartAction(this, 'highlight', i);
            }
        }
    }
});



/**
 * 鼠标移出 判断   有高亮标识的数据集 保持高亮
 */
circleCharts.on('mouseout', function (e) {
    var highlight = e.data.highlight;

    if (highlight) {
        chartAction(this, 'highlight', e.dataIndex)
    }
})

/**
 *  鼠标hover 动作判断   非高亮标识的数据集 保持原状
 */
circleCharts.on('mouseover', function (e) {
    var highlight = e.data.highlight;
    if (!highlight) {
        chartAction(this, 'downplay', e.dataIndex)
    }
})

转载于:https://my.oschina.net/10000000000/blog/2874049