echarts 数据量特别大且很多数值比较相近时label覆盖，lengend与饼图重叠问题，鼠标在lengend图例上悬浮时，tooltie提示信息显示全部信息

环境 vue+element+echarts

饼图生产项目需求：
1、产生的数据在饼图都有体现，tooltie显示数值，名称，占比等信息，
2、lengend分页滚动显示内容，并且鼠标悬浮也显示tooltie信息
3、饼图展示所有的数据占比且展示的顺序按照接口返回的数据顺序展示，但是只有数量前十的会显示label和labelLine
在这里插入图片描述

只显示前十数据的label，需要自己计算数据

在这里插入图片描述

其他基本在官方文档中都有记录。
由于没有仔细查找文档导致想要在lengend显示tooltie提示信息，查找了很多时间，没在网上找到对应的资源，无奈回到官方文档继续查找。最后找到了解决办法。

至于在lengend悬浮时tooltie信息显示数值和占比，就需要从formmter中拿到名称和数值自己计算了
在这里插入图片描述
贴上代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167

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=[]//lengend名称数组

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 = `暂无数据`
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} {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 `类型占比${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 = `暂无数据`
// document.getElementById('myChartFour').innerHTML = html
// document.getElementById('myChartFour').removeAttribute('_echarts_instance_')

// console.log('error!')
// })
}
}
})
},

自定义无数据时显示
在这里插入图片描述

1
2
3

var html = `暂无数据`
document.getElementById('myChartFour').innerHTML = html
document.getElementById('myChartFour').removeAttribute('_echarts_instance_')