| echarts柱状图显示百分比 | 您所在的位置：网站首页 › 怎么给柱状图添加百分比图标 › echarts柱状图显示百分比 |
echarts柱状图显示百分比
|
1.没有百分比的源码： var dom = document.getElementById("container"); var myChart = echarts.init(dom); var app = {}; option = null; app.title = '堆叠条形图'; option = { tooltip : { trigger: 'axis', axisPointer : { // 坐标轴指示器，坐标轴触发有效 type : 'shadow' // 默认为直线，可选为：'line' | 'shadow' } }, legend: { data: ['直接访问', '邮件营销','联盟广告','视频广告','搜索引擎'] }, grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true }, xAxis: { type: 'value' }, yAxis: { type: 'category', data: ['周一','周二','周三','周四','周五'] }, series: [ { name: '直接访问', type: 'bar', stack: '总量', label: { normal: { show: true, position: 'insideRight' } }, data: [1, 20, 3, 30, 40] }, { name: '邮件营销', type: 'bar', stack: '总量', label: { normal: { show: true, position: 'insideRight' } }, data: [99, 80, 97, 70, 60] } ] };; if (option && typeof option === "object") { myChart.setOption(option, true); } myChart.on('click', function (params) { console.log(params); });注意如果上面的js失效了。自己改下啊。或者用本地的，或者用其他cdn的。 可以看到并没有百分比，如下图：
2.修改format带百分比： 1.柱状图里面的format，关键代码如下： { name: '直接访问', type: 'bar', stack: '总量', label: { normal: { show: true, position: 'insideRight', formatter: '{c}%' } }, data: [1, 20, 3, 30, 40] }, { name: '邮件营销', type: 'bar', stack: '总量', label: { normal: { show: true, position: 'insideRight', formatter: '{c}%' } }, data: [99, 80, 97, 70, 60] }其实就是增加了两行 formatter: '{c}%'， 看下，柱状图就会显示百分比了：
但是可以看到，弹框里面“直接访问：30” 依然不是百分比。所以这个也要改下。 3.修改tooltip下面的format，实现百分比，核心代码如下： tooltip : { trigger: 'axis', axisPointer : { // 坐标轴指示器，坐标轴触发有效 type : 'shadow' // 默认为直线，可选为：'line' | 'shadow' }, formatter: '{b}{a0}: {c0}%{a1}: {c1}%' },其实就是增加了：formatter: '{b}{a0}: {c0}%{a1}: {c1}%' 看下效果
可以看到有百分比了。 那么上面format中的a，b，c什么意思呢，参考官方文档: 模板变量有 {a}, {b}，{c}，{d}，{e}，分别表示系列名，数据名，数据值等。 在 trigger 为 'axis' 的时候，会有多个系列的数据，此时可以通过 {a0}, {a1}, {a2} 这种后面加索引的方式表示系列的索引。 不同图表类型下的 {a}，{b}，{c}，{d} 含义不一样。 其中变量{a}, {b}, {c}, {d}在不同图表类型下代表数据含义为： 折线（区域）图、柱状（条形）图、K线图 : {a}（系列名称），{b}（类目值），{c}（数值）, {d}（无） 散点图（气泡）图 : {a}（系列名称），{b}（数据名称），{c}（数值数组）, {d}（无） 地图 : {a}（系列名称），{b}（区域名称），{c}（合并数值）, {d}（无） 饼图、仪表盘、漏斗图: {a}（系列名称），{b}（数据项名称），{c}（数值）, {d}（百分比） 更多其它图表模板变量的含义可以见相应的图表的 label.formatter 配置项。上面用的“字符串模板”方式。 还可以使用“回调函数”方式，具体如下 tooltip : { trigger: 'axis', axisPointer : { // 坐标轴指示器，坐标轴触发有效 type : 'shadow' // 默认为直线，可选为：'line' | 'shadow' }, formatter: function (datas) { var res = datas[0].name + '' for (var i = 0, length = datas.length; i < length; i++) { res +=datas[i].componentType + ' '; res +=datas[i].seriesType + ' '; res +=datas[i].seriesIndex + ' '; res +=datas[i].seriesName + ' '; res +=datas[i].dataIndex + ' '; res +=datas[i].data + '% '; res +=datas[i].value + '% '; res +=datas[i].color + ''; } return res } },效果如下：
可以看到值依然可以百分比显示，当然多了很多不需要的内容，你们可以自行调整，我是为全一点，让你看到每个字段的意思。 具体这些字段的意思，其实官方也有说明： { componentType: 'series', // 系列类型 seriesType: string, // 系列在传入的 option.series 中的 index seriesIndex: number, // 系列名称 seriesName: string, // 数据名，类目名 name: string, // 数据在传入的 data 数组中的 index dataIndex: number, // 传入的原始数据项 data: Object, // 传入的数据值 value: number|Array, // 数据图形的颜色 color: string, }
参考官方api地址： https://echarts.baidu.com/option.html#tooltip.formatter |
【本文地址】
公司简介
联系我们