Realization: lable with pictures can be set, and the style of lable text can be set
1. First, we write the image array
Note: use require
var rankPic = {
first: require('../assets/images/index/top5.png'),
second: require('../assets/images/index/top4.png'),
third: require('../assets/images/index/top3.png'),
fourth: require('../assets/images/index/top2.png'),
fifth: require('../assets/images/index/top1.png'),
}
Two, use
jdEcharts(ref) {
var value = [50, 60, 70, 80, 100];
var names = ['Business Environment Bureau', 'Big Data Center', 'Department of Finance', 'Department of Commerce', 'Department of Veterans']
// var value1 = [0.65,0.12,-0.33];
var rankPic = {
first: require('../assets/images/index/top5.png'),
second: require('../assets/images/index/top4.png'),
third: require('../assets/images/index/top3.png'),
fourth: require('../assets/images/index/top2.png'),
fifth: require('../assets/images/index/top1.png'),
}
var max1 = Math.max.apply(null, value);
var data1 = [];
//data1 stores the value of the background bar, and the for loop makes the number consistent with the value
for (var i = value. length - 1; i >= 0; i--) {
data1.push(max1);
};
var myEchart = this.$echarts.init(this.$refs[ref]);
var option = {
grid: {
left: "22%",
top: "5%",
bottom: "5%",
right: "10%",
},
xAxis: {
type: 'value',
max: max1,
splitLine: {
show: false,
},
axisLine: {
show: false,
},
axisTick: {
show: false
},
axisLabel: {
show: false
}
},
yAxis: {
type: 'category',
splitLine: {
show: false,
},
axisLine: {
show: false,
},
axisTick: {
show: false
},
axisLabel: {
show: true,
interval: 0,
margin: 0,
verticalAlign: 'center',
align: 'left',
padding: [0, 0, 0, this. getFontSize(-100)],
textStyle: {
color: '#ffffff',
fontSize: this. getFontSize(14),
align: "left"
},
formatter: function (value) {
let valueIndex = ''
names. forEach((item, index) => {
if (item == value) {
valueIndex = index
}
})
return '{' + (valueIndex + 1) + '|} {s|' + value + '}'
},
rich: {
1: {
height: this. getFontSize(20),
verticalAlign: 'center',
backgroundColor: {
image: rankPic.first
}
},
2: {
height: this. getFontSize(20),
verticalAlign: 'center',
backgroundColor: {
image: rankPic.second
}
},
3: {
height: this. getFontSize(20),
verticalAlign: 'center',
backgroundColor: {
image: rankPic.third
}
},
4: {
height: this. getFontSize(20),
verticalAlign: 'center',
backgroundColor: {
image: rankPic.fourth
}
},
5: {
height: this. getFontSize(20),
verticalAlign: 'center',
backgroundColor: {
image: rankPic.fifth
}
},
s: {
fontSize: this. getFontSize(14),
color: "#fff"
}
},
},
data: names
},
series: [{
//The body of the bar chart with real values
name: 'true value',
type: 'bar',
animation: true,
barWidth: this. getFontSize(8),
label: {
show: false,
position: 'insideLeft',
padding: [0, 0, 0, 0],
distance: -50,
//color: co1,
formatter: function (params) {
if (value1[params. dataIndex] < 0) {
return '{a|compared to previous year}{b|' + (value1[params.dataIndex] * 100).toFixed(0) + '%}';
} else {
return '{a|compared to previous year}{c| + ' + (value1[params.dataIndex] * 100).toFixed(0) + '%}';
}
},
rich: {
a: {
fontSize: 12,
color: '#fff',
//padding: [20, -30, 0, -30],
},
b: {
fontSize: 12,
color: '#13C2C2',
fontWeight: 'bold',
padding: [0, 0, 0, 15],
},
c: {
fontSize: 12,
color: '#FF4242',
fontWeight: 'bold',
padding: [0, 0, 0, 15],
}
}
},
itemStyle: {
normal: {
color: {
x: 0,
y: 0,
x2: 1,
y2: 0,
colorStops: [{
offset: 0,
color: 'rgba(2,50,147,1)' // the color at 0%
}, {
offset: 1,
color: 'rgba(36,237,255,1)' // the color at 100%
}],
},
barBorderRadius: 5,
}
},
data: value,
z: 1
},
{
//Auxiliary 1: the dot of the real value
name: 'true value dot',
type: 'scatter',
symbolOffset: ['10%', '0'],
symbolSize: 8,
itemStyle: {
borderWidth: 0,
color: 'rgba(255,255,255,1)'
},
data: value,
z: 5
},
{
//Auxiliary 2: the outer ring of the dot of the real value
name: 'True value ring',
type: 'scatter',
symbolOffset: ['10%', '0'],
symbolSize: 15,
itemStyle: {
borderWidth: 1,
borderColor: 'rgba(101,224,255,1)',
//shadowBlur: 15,
//shadowColor: 'rgba(101,224,255,1)',
color: 'rgba(255,255,255,0.43)'
},
data: value,
z: 10
},
{
//Auxiliary 3: background bar
name: 'background bar',
type: 'bar',
animation: false,
barGap: '-100%',
barWidth: this. getFontSize(8),
label: {
show: true,
position: 'insideRight',
verticalAlign: 'center',
padding: [0, -50, 0, 0],
distance: 15,
color: '#fff',
fontSize: this. getFontSize(14),
formatter: function (params) {
return ' ' + value[params.dataIndex].toFixed(0);
}
},
itemStyle: {
normal: {
color: 'rgba(62,78,123,1)',
barBorderRadius: 5,
},
},
data: data1,
z: 0
}
]
};
myEchart. clear();
myEchart.setOption(option);
window. addEventListener('resize', () => {
myEchart. resize()
})
},
Effect:
