Echarts tooltip 自定义formatter设置字体颜色

最新推荐文章于 2024-09-20 15:52:37 发布

简析

最新推荐文章于 2024-09-20 15:52:37 发布

阅读量2.7w

点赞数 2

分类专栏： echarts 文章标签： echarts formatter tooltip

本文链接：https://blog.csdn.net/yulongxue/article/details/58605307

版权

echarts 专栏收录该内容

13 篇文章 1 订阅

订阅专栏

项目上用了Echarts图表库，但是提示框里的文字想要有高亮显示（如图红色字体），查了查官方文档结合实例，终于找到了解决办法。

使用tooltip的formatter内容格式器，可以通过定义函数的方式解决。

 formatter: function(params, ticket, callback) {
                            console.log(params)
                            var res = '' + params[0].name;
                            for (var i = 0, l = params.length; i < l; i++) {
                              if(i == 2) {
                                res += '<br/><span style="color:red;">' + params[i].seriesName + ' : ' + params[i].value + '</span>';
                              } else {
                                res += '<br/>' + params[i].seriesName + ' : ' + params[i].value;
                              }
                              
                            }
                            setTimeout(function() {
                                // 仅为了模拟异步回调
                                callback(ticket, res);
                            }, 1000)
                            return 'loading';
                        }

option = {
                    title: {
                        text: '各区县的项目状态总揽',
                        subtext: ''
                    },
                    tooltip: {
                        trigger: 'axis',
                        formatter: function(params, ticket, callback) {
                            console.log(params)
                            var res = '' + params[0].name;
                            for (var i = 0, l = params.length; i < l; i++) {
                              if(i == 2) {
                                res += '
' + params[i].seriesName + ' : ' + params[i].value + '';//给
                              } else {
                                res += '
' + params[i].seriesName + ' : ' + params[i].value;
                              }
                              
                            }
                            setTimeout(function() {
                                // 仅为了模拟异步回调
                                callback(ticket, res);
                            }, 1000)
                            return 'loading';
                        }

                    },
                   
                    legend: {
                        data: ['立项设计', '项目招投标', '项目实施', '质量监督', '项目验收']
                    },
                    toolbox: {
                        show: true,
                        feature: {
                            mark: {
                                show: true
                            },
                            dataView: {
                                show: true,
                                readOnly: false
                            },
                            magicType: {
                                show: true,
                                type: ['line', 'bar']
                            },
                            restore: {
                                show: true
                            },
                            saveAsImage: {
                                show: true
                            }
                        }
                    },
                    calculable: true,
                    xAxis: [{
                        type: 'category',
                        data: ['路北区'],

                    }],
                    yAxis: [{
                        type: 'value'
                    }],
                    series: [{
                            name: '立项设计',
                            type: 'bar',
                            data: [49],

                        }, {
                            name: '项目招投标',
                            type: 'bar',
                            data: [23],



                        }, {
                            name: '项目实施',
                            type: 'bar',
                            data: [60],


                        }, {
                            name: '质量监督',
                            type: 'bar',
                            data: [26],

                        },

                        {
                            name: '项目验收',
                            type: 'bar',
                            data: [7],
                        }
                    ]
                };

可以把以上代码复制到官网实例区看效果 http://echarts.baidu.com/echarts2/doc/example/tooltip.html