echarts饼状图初始化默认高亮第一条数据并显示第一条数据的toolTip提示框

原创

于 2019-10-15 14:15:43 发布 · 5.4k 阅读

10 ·

CC 4.0 BY-SA版权

本文介绍如何在Echarts初始化时，使饼状图默认高亮第一条数据，并展示对应的tooltip提示信息，提供相关代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果图：

1212

代码：

var data = [
    {name:'新疆金风',value:18,percent: 22.5},
    {name:'上海电器',value:27,percent: 33.75},
    {name:'金风科技',value:35,percent: 43.75}
];
initEchartPie("plantDisPie", data);

function initEchartPie(id, data, color=["#62FFFF", "#4591FF", "#50EE77"]) {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById(id));
    myChart.clear();
    myChart.showLoading();
    var option = {
        // 提示
        tooltip: {
            trigger: 'item',
            // 设置提示框的位置
            position: ["90%", "20%"],
            // 设为空值  去掉提示框默认的背景色
            backgroundColor: '',
            // 是否设置让提示框的内容一直显示  默认值是false
            alwaysShowContent: true,
            formatter: (params)=> {
                var name = params.name;
                 return `