echarts 数据量特别大且很多数值比较相近时label覆盖，legend与饼图重叠问题，鼠标在legend图例上悬浮时，tooltie提示信息显示全部信息
环境 vue+element+echarts饼图生产项目需求：1、产生的数据在饼图都有体现，tooltie显示数值，名称，占比等信息，2、lengend分页滚动显示内容，并且鼠标悬浮也显示tooltie信息3、饼图展示所有的数据占比且展示的顺序按照接口返回的数据顺序展示，但是只有数量前十的会显示label和labelLine只显示前十数据的label，需要自己计算数据其他基本在官方文档中都有记录。
·
环境 vue+element+echarts
饼图生产项目需求：
1、产生的数据在饼图都有体现，tooltie显示数值，名称，占比等信息，
2、legend分页滚动显示内容，并且鼠标悬浮也显示tooltie信息
3、饼图展示所有的数据占比且展示的顺序按照接口返回的数据顺序展示，但是只有数量前十的会显示label和labelLine
只显示前十数据的label，需要自己计算数据
其他基本在官方文档中都有记录。
由于没有仔细查找文档导致想要在legend显示tooltie提示信息，查找了很多时间，没在网上找到对应的资源，无奈回到官方文档继续查找。最后找到了解决办法。
至于在legend悬浮时tooltie信息显示数值和占比，就需要从formmter中拿到名称和数值自己计算了
贴上代码
initEchartFour(){
this.$axios.get('/api/common/industrycategory/list').then(res => {//获取行业类型下拉列表
if(res.data.msg === 'success'){
if(res.data.data){
this.orderOptions=[]//id和name维度接口，用来对比获取名称
this.orderNameArr=[]//legend名称数组
this.orderOptions=res.data.data
res.data.data.forEach(item => {
this.orderNameArr.push(item.name)
})
const myCharts = this.$echarts.init(this.$refs.myChartFour);
myCharts.showLoading({text: "数据加载中...",textColor:'#7a7878',color:'#57a2ff',lineWidth: 2});
let params={//请求参数
date_type:this.formLabelAlign.disvalue ? 'm' : 'd',
start_time:this.formLabelAlign.disvalue ? this.$moment(this.formLabelAlign.dateStart).format('YYYYMM') : this.$moment(this.formLabelAlign.dateStart).format('YYYYMMDD'),
end_time:this.formLabelAlign.disvalue ? this.$moment(this.formLabelAlign.dateEnd).format('YYYYMM') : this.$moment(this.formLabelAlign.dateEnd).format('YYYYMMDD'),
user_type:this.formLabelAlign.sarchType
}
let seriesArr = []//seirise data数据
this.$axios.post('/api/busi/product/v1/product/analyse/industrypercent',{},{
params:params,
headers:{
'Content-Type':'application/x-www-formurlencoded',
'usid':store.state.xaiot_token
}
}).then(res => {
if(res.data.msg === 'success'){
if(res.data.data.length === 0){//无数据自定义样式
var html = `<span class="echarts-nodate"><i class="fontFamily yybzzanwushuju1"></i>暂无数据</span>`
document.getElementById('myChartFour').innerHTML = html
document.getElementById('myChartFour').removeAttribute('_echarts_instance_')
}else{
let numTotal=0
res.data.data.forEach((item,index) => {
this.orderOptions.forEach((result,j) => {
if(item.industry === result.code){//code和id相同 存储相关数据
numTotal += item.product_num //记录数据总数用来进行计算占比
seriesArr.push({
value: item.product_num,
name: result.name,
code:item.industry,
label: {show: false},//默认不显示，后续计算出前十改为true显示
labelLine:{show:false}//默认不显示，后续计算出前十改为true显示
})
}
})
})
let newarr=res.data.data
for (let i = 1; i < newarr.length; i++) {//插入排序寻找前十的数据
for (let j = i; j > 0; j--) {
if (newarr[j].product_num > newarr[j-1].product_num) {
let pre = newarr[j];
newarr[j] = newarr[j-1];
newarr[j-1] = pre;
};
};
};
newarr.forEach((_opt,_optIndex)=>{//根据自己排序的前十将label和labelLine改为显示
if(_optIndex < 10){
seriesArr.forEach((item,index)=>{
if(_opt.industry === item.code){
seriesArr[index].label.show=true
seriesArr[index].labelLine.show=true
}
})
}
})
let options = {
title: {
text: '各行业类型产品数量占比',
left: 'center',
textStyle:{
color:'#6B6B6B',
fontSize:18
}
},
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b} : {c} ({d}%)',
textStyle:{
align:'left'
}
},
legend: {
type: 'scroll',
// selectedMode:false,//可否点击
// orient: 'vertical',//横纵显示设置
padding:[0,30],
bottom:10,
data: seriesArr,
selected:this.orderNameArr,
tooltip: {
show: true,
trigger: 'item',
formatter: function (tool) {
let indexNum=0
seriesArr.forEach(item => {
if(item.name === tool.name) indexNum = item.value
})
if(indexNum === 0){
}else{
return `类型占比</br>${tool.name}：${indexNum} (${(indexNum/numTotal*100).toFixed(2)}%)`
}
},
textStyle:{
align:'left'
}
},
formatter: function (name) {
return (name.length > 6 ? (name.slice(0, 6) + "...") : name);
}
},
grid:{
height:600,
left:'80',
right:'80'
},
series: [
{
name: '类型占比',
type: 'pie',
radius: '55%',
center: ['50%', '50%'],
label: {
normal: {
formatter(v) {
return (v.name.length > 6 ? (`${v.name.slice(0, 6)}... ${v.percent}%`) : `${v.name} ${v.percent}%`);
}
}
},
labelLine:{
show:false
},
data: seriesArr,
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
myCharts.setOption(options);
window.addEventListener('resize',function(){
myCharts.resize()
})
}
}
myCharts.hideLoading();
})
// .catch(res => {
// myCharts.hideLoading();
// var html = `<span class="echarts-nodate"><i class="fontFamily yybzzanwushuju1"></i>暂无数据</span>`
// document.getElementById('myChartFour').innerHTML = html
// document.getElementById('myChartFour').removeAttribute('_echarts_instance_')
// console.log('error!')
// })
}
}
})
},
自定义无数据时显示
var html = `<span class="echarts-nodate"><i class="fontFamily yybzzanwushuju1"></i>暂无数据</span>`
document.getElementById('myChartFour').innerHTML = html
document.getElementById('myChartFour').removeAttribute('_echarts_instance_')
前往低代码交流专区
更多推荐
2
0- 0
已为社区贡献18条内容
所有评论(0)