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

echarts 专栏收录该内容
12 篇文章 0 订阅

项目上用了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


  • 0
    点赞
  • 4
    评论
  • 7
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

相关推荐
©️2020 CSDN 皮肤主题: 深蓝海洋 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值