echarts的tooltip显示百分号

需求：echarts图形的tooltip需要显示百分数，并要有颜色提示。

按官方文档，tooltip的formatter可以通过表达式设置百分号，

 formatter: '{b0}<br /> {a0}:{c0}<br />{a1}: {c1}%'

效果是这样的：

可以看到，有一个问题，这样设置的提示信息，就没有数据的颜色提示了。

一番折腾后，得到了我想要的效果：

思路：

1、修改tooltip的formatter（见示例代码）；

2、y轴（数据轴）的文字加 % ；

3、在需要显示百分数的 series 添加 valueType:"percent" 属性，用于在formatter函数中进行判断。

注意：本例是直接仅对已计算好的数据添加百分号显示，不再对小数乘100。

option 示例代码：

var option = {title: {text: '堆叠区域图'},tooltip : {trigger: 'axis',formatter: function (params) {var html=params[0].name+"<br>";for(var i=0;i<params.length;i++){html+= params[i].marker+ params[i].seriesName+":"+params[i].value;if(option.series[params[i].seriesIndex].valueType=="percent"){html+="%";}}return html+"<br>";}},legend: {data:['邮件营销','搜索引擎']},xAxis : [{type : 'category',boundaryGap : false,data : ['周一','周二','周三','周四','周五','周六','周日']}],yAxis : [{type : 'value'},{type : 'value',axisLabel:{formatter:'{value} %'},}],series : [{name:'邮件营销',type:'bar',areaStyle: {},data:[120, 132, 101, 134, 390, 230, 210]},{name:'搜索引擎',type:'line',yAxisIndex:1, data:[1.5, 1.93, 2.9,0.93, 1.62, 2.30, 2.20], valueType:"percent"}]
};myChart.setOption(option, true);

echarts的tooltip显示百分号相关推荐

Echarts中tooltip显示的数据与数据本身顺序相反
echarts中默认的tooltip和柱状图显示顺序相反,客户要求表盘,tooltip,图例显示顺序一致,也就是五线城市在tooltip和图例中都需要第一个显示: 解决方式: 修改tooltip的fo ...
echarts 自定义tooltip显示图例颜色
技术框架:react echarts默认的tooltip是自带图例颜色的,如下图: 可是很多时候,功能需求会要求提示框带单位或者调整样式.这个时候我们就需要用tooltip的formatter来自定义 ...
【echarts】 tooltip显示图片
tooltip: { trigger: 'item', borderRadius: 8,//边框圆角 backgroundColor: 'rgba(51,204,204,0.7)',//背景颜色(此时 ...
Echarts提示框自定义显示百分号
Echarts提示框自定义显示百分号 tooltip: {trigger: 'axis',formatter: '{b0}<br/>' +'<span style="dis ...
django+echarts+ajax异步+显示优化--基本例子
django+echarts+ajax异步+显示优化--基本例子 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 2 ...
echarts饼图直观显示数值最实用的方式
默认:echarts饼图直接显示数值(如图无需光标悬空触发) var optionOne = { title : { text ...
echarts柱状图自定义显示内容
echarts柱状图自定义显示内容基础搭建基础搭建 1.引入js <script src="js/echarts.min.js"></script> 2 ...
vue 工程中加入 echarts 图表不显示的问题
vue 工程中加入 echarts 图表不显示的问题一.问题原因 vue 引用 echarts 方式错误,高版本采用了低版本的引用方式二.vue工程使用echarts vue官方教程 1. 安装 ...
Echarts雷达图显示单轴数据
最近总是碰到这种雷达图的需求,在雷达图中需要显示单项数据,并且需要使用富文本,这个在echarts当中2.0版本之前是可以显示单项数据,但是却没有富文本,4.0中有富文本却没有单项数据显示,并且现在对 ...

echarts的tooltip显示百分号

echarts的tooltip显示百分号相关推荐

最新文章

热门文章