[API] getSeries() 获取系列 && legend formatter

可以通过这个 getSeries() 这个api获取series中的数据,另外可以使用legend foramtter对图例中name进行自定义

option = {
    tooltip : {
        trigger: 'item',
        formatter: "{a} 
{b} : {c} ({d}%)" }, legend: { orient : 'vertical', x : 'left', formatter: function(name) { // legend中的formatter传入一个name属性 var data = this.getSeries()[0].data; // 获取series中的data var totalValue = data.reduce((acc, item) => { // 计算data中总数 acc += item.value; return acc; }, 0) var targetValue; // 对应图例的值 data.map(item => { if (item.name == name) { targetValue = item.value; // 对相应的图例赋值 } }) var p = (targetValue / totalValue * 100).toFixed(2); // 百分比 return name + ' ' + p + '%'; }, data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎'] }, toolbox: { show : true, feature : { mark : {show: true}, dataView : {show: true, readOnly: false}, magicType : { show: true, type: ['pie', 'funnel'], option: { funnel: { x: '25%', width: '50%', funnelAlign: 'center', max: 1548 } } }, restore : {show: true}, saveAsImage : {show: true} } }, calculable : true, series : [ { name:'访问来源', type:'pie', radius : ['50%', '70%'], itemStyle : { normal : { label : { show : false }, labelLine : { show : false } }, emphasis : { label : { show : true, position : 'center', textStyle : { fontSize : '30', fontWeight : 'bold' } } } }, data:[ {value:335, name:'直接访问'}, {value:310, name:'邮件营销'}, {value:234, name:'联盟广告'}, {value:135, name:'视频广告'}, {value:1548, name:'搜索引擎'} ] } ] };

最终效果, 红色部分为添加的百分比效果


[API] getSeries() 获取系列 && legend formatter_第1张图片
legend formatter.png

示例可以使用:

  • echarts pie

你可能感兴趣的:([API] getSeries() 获取系列 && legend formatter)