在echarts中,series中的data 必备name、value其中还能自定义属性
实现逻辑：tooltip与label显示原本值来实现占比渲染柱状图
通过改变原本value值绑定计算后的值：echarts群：922473947，
例如：
Total: 11,
FinishTotal: 11
},
{
Total: 33,
FinishTotal: 22
},
{
Total: 54,
FinishTotal: 14
},
{
Total: 17,
FinishTotal: 17
},
{
Total: 30,
FinishTotal: 20
},
{
Total: 16,
FinishTotal: 16
},
{
Total: 20,
FinishTotal: 12
}]
let Total = []
let FinishTotal = []
for (let i = 0, len = arr.length; i < len; i ++) {
Total.push({
name: '总数量',
value: 100,
textVal: arr[i].Total
})
// 占比值
let min = arr[i].FinishTotal / arr[i].Total * 100
FinishTotal.push({
name: '数量',
value: min || 0,
textVal: arr[i].FinishTotal
})
}
1.textVal 是我自定义的属性，那么在什么地方会用到呢，在什么地方可以找到它呢？
2.在上例代码中，Total 数组->{}，value不配置原始值，总数量配置默认100占比最大作为背景。在实际开发需求场景中，按需求配置总数量的value值，如你不知你当前数组每条数据的最大值是多少，那么取整个数组的最大值数据出来配置Total 数组中的每个value。例如：{value: '1000' // 你的数组最大值}， {value: '1000'}, {value: '1000'}
3.在上例代码中，FinishTotal数组->{}， value不配置原始值（指你本来要显示的数据），而是经过计算的min，就是当前值/当前这条数据的总数量*100等于它的占比。而textVal则绑定你本来要显示的值。 4.为什么这样配置，因为后面不管是图表的柱状lebel显示与tooltip显示都需要显示正确的值。
整体的option：
-
tooltip配置可以看出，我直接在 formatter方法里取params得data，里面就是我上面配置了关于textVal的数据，这里注意的是：trigger类型是配置为‘axis’ params 返回的则是数组
-
series[0]与[1]得label配置注意下都是使用的formatter 返回的 textVal 也就是你要显示的正确值
-
源代码如下：
Total: 11,
FinishTotal: 11
},
{
Total: 33,
FinishTotal: 22
},
{
Total: 54,
FinishTotal: 14
},
{
Total: 17,
FinishTotal: 17
},
{
Total: 30,
FinishTotal: 20
},
{
Total: 16,
FinishTotal: 16
},
{
Total: 20,
FinishTotal: 12
}]
let Total = []
let FinishTotal = []
for (let i = 0, len = arr.length; i < len; i ++) {
Total.push({
name: '总数量',
value: 100,
textVal: arr[i].Total
})
// 占比值
let min = arr[i].FinishTotal / arr[i].Total * 100
FinishTotal.push({
name: '数量',
value: min || 0,
textVal: arr[i].FinishTotal
})
}
option = {
tooltip: {
trigger: 'axis',
formatter: function (params) {
console.log(params)
let htmls = '';
let title = ''
for (let i = 0, len = params.length; i < len; i++) {
if (i === 0) {
title = params[i].axisValue
}
htmls += `<p style="display: flex;align-items: center;"><span class="tooltip-icon" style="background-color: ${params[i].color}"></span><span>${params[i].seriesName}</span> : <span> ${params[i].data.textVal || 0}</span></p>`;
}
return `<p>当前X：${title}</p>` + htmls;
}
},
legend: {
textStyle: {
color: '#aaeeff'
},
itemStyle: {
decal: 'none'
},
// data: ['存量', '整改'],
},
grid: { //图表的位置
left: '0',
right: '3%',
bottom: '2%',
height: '75%',
containLabel: true
},
yAxis: {
show: false
},
xAxis: [{
type: 'category',
axisLabel: {
show: true,
interval: 0,
textStyle: {
fontSize: 12,
color: '#aaeeff'
},
},
axisLine: {
lineStyle: {
color: 'rgb(63,159,246)',
}
},
}],
// aria: {
// enable: true,
// decal: {
// show: true
// }
// },
series: [
{
name: '数量',
type: 'bar',
barGap: '-100%',
barWidth: '20px',
data: FinishTotal,
itemStyle: {
normal: {
barBorderRadius: 4,
color: 'rgb(63,246,231)',
// decal: {
// show: true,
// color: 'rgb(111,111,111)',
// dashArrayX: [1, 0],
// dashArrayY: 10,
// symbolKeepAspect: true,
// rotation: 0,
// symbolSize: 0.2,
//
// }
}
},
zlevel: 11,
label: {
normal: {
show: true,
color: '#6e70ff',
fontWeight: 'bold',
fontSize: 14,
position: 'insideBottom',
formatter: function(params) {
// return `<span style="display: flex; height: 100%; width: 100%;align-items: center;justify-content: center">${params.data.textVal}</span>`
return params.data.textVal || '0'
}
}
},
},
{
name: '总数量',
type: 'bar',
barWidth: '20px',
data: Total,
barGap: '-100%',
itemStyle: {
normal: {
barBorderRadius: 4,
color: 'rgba(75,32,124,0.06)',
// decal: {
// symbol: 'none',
// }
}
},
zlevel: 9,
label: {
show: true,
color: '#ffffff',
fontWeight: 'bold',
fontSize: 14,
position: 'top',
formatter: function(params) {
return params.data.textVal || '0'
}
},
},
]
}
点点赞谢谢
