echarts中关于自定义legend图例文字 |
您所在的位置：网站首页 › 怎么描述饼状图的内容 › echarts中关于自定义legend图例文字 |
echarts中关于自定义legend图例文字
|
echarts中关于自定义legend图例文字
首先看一张echarts饼图: 一个个看： 1.两个变量formatter有两种形式： - 模板 - 回调函数 模板 使用字符串模板，模板变量为图例名称 {name} formatter: 'Legend {name}'这种想要修改name的值，暂时我做不到，欢迎读者指正 回调函数 使用回调函数 formatter: function (name) { return 'Legend ' + name; }我们在返回时可以对name进行修改，从而返回我们需要的值，初步改动是这样： var data = [ {value:40, name:'货币'}, {value:20, name:'股票'}, {value:40, name:'债券'} ] formatter: function(name){ var total = 0; var target; for (var i = 0, l = data.length; i < l; i++) { total += data[i].value; if (data[i].name == name) { target = data[i].value; } } return name + ' ' + ((target/total)*100).toFixed(2) + '%'; } 2.两种样式想自定义图例文字样式，就要用到富文本：rich，但是在官方文档中看到的只有模板形式的富文本样式配置，由1知用模板很难实现自定义name，所以只能用回调函数形式，采用富文本的形式对name进行改造： formatter: function(name){ var total = 0; var target; for (var i = 0, l = data.length; i < l; i++) { total += data[i].value; if (data[i].name == name) { target = data[i].value; } } var arr = [ '{a|'+((target/total)*100).toFixed(2)+'%}', '{b|'+name+'}', ] return arr.join('\n') }, textStyle:{ rich:{ a:{ fontSize:20, verticalAlign:'top', align:'center', padding:[0,0,28,0] }, b:{ fontSize:14, align:'center', padding:[0,10,0,0], lineHeight:25 } } } 3.对齐，换行与居中为了图例与第一行文字对齐，需要设置两个样式的padding，把文字顶到合适的位置，然后为了上下行的间隔，设置了第2行文字的行高，最终呈现了上面图片的效果。不知道是不是有点地方做烦了，但是能最终实现自己想要的效果，很有成就感。 4.实例这是完整的组件： class ConfigChart extends Component { constructor(props) { super(props); this.state = {}; }; getOption = () => { var data = [ {value:40, name:'货币'}, {value:20, name:'股票'}, {value:40, name:'债券'} ] const option = { tooltip : { trigger: 'item', formatter: "{a} {b} : {c} ({d}%)" }, // formatter: function(name){ // var total = 0; // var target; // for (var i = 0, l = data.length; i < l; i++) { // total += data[i].value; // if (data[i].name == name) { // target = data[i].value; // } // } // return name + ' ' + ((target/total)*100).toFixed(2) + '%'; // }, series: [ { name: '访问来源', type: 'pie', radius: [50, 80], center: ['50%', '40%'], label: { normal: { show: false }, emphasis: { show: false } }, data: [ { value: 40, name: '货币', itemStyle: { normal: { color: "#5877F0" } } }, { value: 20, name: '股票', itemStyle: { normal: { color: "#AA9FFD" } } }, { value: 40, name: '债券', itemStyle: { normal: { color: "#F96481" } } } ] } ], legend: { x: 'center', // y: 'bottom', bottom:5, itemGap:30, itemWidth:5, textStyle:{ fontSize: 12 }, align:'left', data: [ { name:'货币', icon:'circle' }, { name:'股票', icon:'circle' },{ name:'债券', icon:'circle' } ], // formatter:'{a|{name}}\n{name}', formatter: function(name){ var total = 0; var target; for (var i = 0, l = data.length; i < l; i++) { total += data[i].value; if (data[i].name == name) { target = data[i].value; } } var arr = [ '{a|'+((target/total)*100).toFixed(2)+'%}', '{b|'+name+'}', ] // return name + ' ' + ((target/total)*100).toFixed(2) + '%'; return arr.join('\n') }, textStyle:{ rich:{ a:{ fontSize:20, verticalAlign:'top', align:'center', padding:[0,0,28,0] }, b:{ fontSize:14, align:'center', padding:[0,10,0,0], lineHeight:25 } } } }, backgroundColor: "#fff" }; return option; }; render() { const _this = this; const { isShow } = this.props; return isShow ? { : null; } } 总结类似的自定义也可以用到很多其它的标签文字中。 |
这张图很好做，根本不值得提，但是用过echarts的可能会发现这个图例有点不一样，做这个图例花了我好几个小时去查，去试。结合一下echarts中legend图例的特质我们分析一下一些难点：【本文地址】