开发工程师的心是浮躁的吗,总是想急于求成,echarts中那么多配置,要一个个沉下心去学,太耗费时间,但是有些做起来却很麻烦,要百度半天还找不到结果。其实也不是我们复杂,而是因为项目工期紧,那么为什么工期紧呢?
1 调整饼图与legend的位置
左侧lengend,与右侧饼图,距离太近了。
调试如下:
legend: {
type:'scroll',
orient: 'vertical',
left:100,
top:5,
bottom:5,
padding:[0,0,0,0 ],
formatter: (name)=>{
let data = option.series[0].data
return pieLengendPercentFmt(data,name)
}
},
左侧发生漂移,但是右侧环形图并没有发生变化,即legend是用来控制图例的
查看官方文档
series-pie
实践可以看到,设置left即可,
series: [
{
left:50,
// right:20,
name: '商品金额',
type: 'pie',
radius: ['40%', '70%'],
avoidLabelOverlap: false,
label: {
show: true,
position: 'center',
},
// 数据引线
labelLine: {
show: false
},
data: res.data
}
],
那么这个50是什么距离呢?从下图可以看到是饼图与legend之间的距离,并不是到整幅图到最右侧距离,看来echarts用的是绝对位置
2 饼图选中后样式更改
tooltip: {
trigger: 'item',
confine:true,
formatter: function (params) { // 提示内容太多隔行显示内容
let data = option.series[0].data
return pieSeriesFmt(data,params);
},
},
export const pieSeriesFmt = (data,params) =>{
let total = 0
let tarValue
for (let i = 0; i < data.length; i++) {
total += data[i].value
if (data[i].name == params.name) {
tarValue = data[i].value
}
}
//计算出百分比
let p = ((tarValue / total) * 100).toFixed(2) + '%'
var str = params.name + '<br>'
str += '占比: ' + p + '<br>'
str += '金额: ' + tarValue + '<br>'
return str;
}