echarts中每个数据项特定的tooltip设定

你的名字 2021-09-18 22:28 584阅读 0赞

什么是每个数据项特定的tooltip？类似于这样：

data: [ {
                        value: 20,
                        name: 'CO2: ',
                        itemStyle: {
                            borderWidth: 2,
                            color: '#55d3db'
                        },
                        label: {
                            show: true,
                            position : 'inside',
                            fontSize: 8,
                            formatter: " {b}\n"+skyValueArr[0]
                        },
                        tooltip: {
                            formatter: " {a}<br/>   {b}"+skyValueArr[0],
                            backgroundColor: 'rgba(255, 255, 255, 0.7)',
                            textStyle: {
                                color: '#000',
                                fontSize: 12
                            }
                        },
                    }]

设置这一数据项的tooltip的作用就是显示指定内容，与放在整个option里的tooltip相比，一个是公共的，一个是私有的。  
那么只是按照上述代码写肯定是不行的（不信你试试），你必须还要在option里去整体写一个tooltip:

let option = {
                tooltip: {
                    trigger: 'item'
                },
                ...
             }

OK，这样的话就可以完成特定tooltip的设定了。

公众号：Coder 杂谈，欢迎关注  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMzQ1MjM3_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMzQ1MjM3_size_16_color_FFFFFF_t_70]: /images/20210812/52be4ca357914b718a82820e3d231723.png