I want to add more content to the echarts(doughnut chart) legend like the following picture.
From this
[
To this
Regards, Eric
I want to add more content to the echarts(doughnut chart) legend like the following picture.
From this
[
To this
Regards, Eric
Share Improve this question edited Aug 17, 2022 at 0:30 gagarine 4,3362 gold badges31 silver badges40 bronze badges asked Nov 8, 2018 at 12:04 Eric.DEric.D 2811 gold badge3 silver badges8 bronze badges 2- Hi Eric, what exactly do you mean "more content" ? – Clocher Zhong Commented Nov 9, 2018 at 6:05
- Hi lan, Thanks for your support, the meaning of more content is like the following picture: i.postimg/J00rRQbF/capture.png I didn't find any attribute to achieve it at first, but now i achieve it through splicing html string, then get a variable. Like the following code: i.postimg/FHhXgZ6J/image.png Thanks Again – Eric.D Commented Nov 10, 2018 at 15:18
3 Answers
Reset to default 3I'v added something like this on pie chart, in my case, I wanted to add the value after name, and all that I do was:
legend: {
show: props.legend ? true : false,
orient: 'horizontal',
x: 'left',
y: 'bottom',
formatter: props.legendValue ? function (name) {
let itemValue = data.filter(item => item.name === name)
return `${name}: ${itemValue[0].value}`
} : "{name}",
data: props.legend
}
its worked
useEffect(() => {
initChart()
window.addEventListener('resize', () => myChart.current.resize())
axios.get('api/xxx/xxx').then(res => {
myChart.current.setOption({
legend: {
formatter: function (name) {
const _data = res.data.groups
const _value = _data.filter(item => item.name === name)[0].value
return `${name} - ${_value}`
}
},
series: [{
data: res.data.groups
}]
})
})
return () => window.removeEventListener('resize', () => myChart.current.resize())
})
if you mean more space, you can use option series.center , more detail
Center position of Pie chart, the first of which is the horizontal position, and the second is the vertical position.
Percentage is supported. When set in percentage, the item is relative to the container width, and the second item to the height.
check this demo:
let echartsObj = echarts.init(document.querySelector('#canvas'));
option = {
color:['#429eda', '#8490ca', '#e97f74', '#f8d368', '#93cb76'],
legend: {
orient: 'vertical',
x: 'right',
y: 'center',
data:['America','Canada','Japan','Mexico','India']
},
series: [
{
type:'pie',
radius: ['50%', '70%'],
startAngle: 170,
center: ['30%', '50%'],
label: {
normal: {
show: false,
position: 'center'
},
emphasis: {
show: true,
textStyle: {
fontSize: '30',
fontWeight: 'bold'
}
}
},
labelLine: {
normal: {
show: false
}
},
data:[
{value:835, name:'America'},
{value:310, name:'Canada'},
{value:314, name:'Japan'},
{value:135, name:'Mexico'},
{value:948, name:'India'}
]
}
]
};
echartsObj.setOption(option)<html>
<header>
<script src="https://cdn.bootcss./echarts/4.1.0.rc2/echarts-en.min.js"></script>
</header>
<body>
<div id="canvas" style="width: 100%; height: 300px">
</div>
</body>
</html>