ECHARTS图中实现LEGEND图例文字后面显示百分比%
主要代码是一个回调函数,放代码
// 回调函数 formatter: function(name) { var data = option.series[0].data;//获取series中的data var total = 0; var tarValue; for (var i = 0, l = data.length; i < l; i++) { total += data[i].value; if (data[i].name == name) { tarValue = data[i].value; } } var p = ((tarValue / total) * 100); return name + " " + " " + p.toFixed(2) + "%"; },
全部代码
option = { title: { text: '某站点用户访问来源', subtext: '纯属虚构', left: 'center' }, tooltip: { trigger: 'item', formatter: '{a} <br/>{b} : {c} ({d}%)' }, legend: { orient: 'vertical', left: 'left', data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎'] }, // 回调函数 formatter: function(name) { var data = option.series[0].data;//获取series中的data var total = 0; var tarValue; for (var i = 0, l = data.length; i < l; i++) { total += data[i].value; if (data[i].name == name) { tarValue = data[i].value; } } var p = ((tarValue / total) * 100); return name + " " + " " + p.toFixed(2) + "%"; }, series: [ { name: '访问来源', type: 'pie', radius: '55%', center: ['50%', '60%'], data: [ {value: 335, name: '直接访问'}, {value: 310, name: '邮件营销'}, {value: 234, name: '联盟广告'}, {value: 135, name: '视频广告'}, {value: 1548, name: '搜索引擎'} ], emphasis: { itemStyle: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } } } ] };
posted on 2021-11-09 14:09 ranyonsue 阅读(1357) 评论(0) 编辑 收藏 举报