Vue Use Echarts Feel like making a leaderboard

In fact, this is not a technical article , It's pure echarts Just adjust the style , But some places are not easy to set , So say , Just save it , If you use it in the future, the class can be directly used for repair, modification and secondary utilization .

The effect is like this ：

This list shows the top six , That's what it looks like , And put this echarts Into a component , Just reference where needed .

Let's go straight to the code ：

<doc>
Bar charts - Ranking List
</doc>
<template>
<div id="bar" style="width: 100%;height:100%;"></div>
</template>
<script>
import * as echarts from 'echarts'
export default {

data() {

return {

xValue: [1,1,1,2,3,3],
yValue: [' Shaanxi Mobile ', ' Shanxi Mobile ', ' Beijing Mobile ', ' Shandong Mobile ', ' Hebei mobile ', ' Henan Mobile '],
};
},
mounted() {

this.show()
},
methods: {

show() {

this.charts = echarts.init(document.getElementById('bar'))
var option = {

color: ['#d84430'],
tooltip: {

show: true
},
yAxis: {

axisTick: {

show: false
},
axisLine: {

show: false,
},
axisLabel: {

inside: true,
verticalAlign: 'bottom',
lineHeight: 40,
color: '#DDDFEB',
formatter: function (value, index) {
 // Set up y Color of axis text 
if (index > 2) {

return '{first|' + value + '}'
} else {

return '{other|' + value + '}'
}
},
rich: {

other: {

color: '#DDDFEB',
opacity: 0.57
},
first: {

color: '#DDDFEB'
}
}
},
data: this.yValue
},
xAxis: {

nameTextStyle: {

color: 'rgba(255, 255, 255, 0.8)',
align: 'right'
},
splitLine: {

show: false,
},
axisLine: {

show: false,
},
axisLabel: {

color: 'rgba(255, 255, 255, 0.8)'
},
},
grid: {

top: '0%',
bottom: '0%',
left: '0%',
right: '0%'
},
series: [{

name: ' Alert ranking ',
barWidth: 15,
type: 'bar',
data: this.xValue,
itemStyle: {

normal: {

borderRadius: [3, 20, 20, 3],
color: function (params) {
 // Set the color of the column chart 
if (params.dataIndex === 5) {

return '#d84430'
} else if (params.dataIndex === 4) {

return '#f38237'
} else if (params.dataIndex === 3) {

return '#e2aa20'
} else {

return '#608289'
}
}
},
}
}]
};
// Use the configuration item and data display chart just specified .
this.charts.setOption(option);
window.addEventListener('resize', () => {

this.charts.resize()
})
}
}
}
</script>
<style scoped>
</style>

That's what it looks like , If there is a special style, you can change it a little .