Add sort icon/serial number to echarts histogram
1. Realize the effect
Use the histogram of echarts to achieve the following effects, and you must add a serial number in front of the name:
2. Core code (picture serial number)
The core code lies in the axisLabel in the configuration attribute, which requires the cooperation of the formatter and the rich attribute. The formatter is formatted as {a1 注意看代码注释
|
can
this.chartOption = {
yAxis: {
......
axisLabel: {
color: '#D8D9D9',
margin: 90, // 距离右侧图形距离，配合axisLabel.left 和 grid.left 使用
// 必须使用formatter，配合rich使用
formatter: (params, index) => {
return [`{a${
index + 1}|} ${
params}`].join('\n')
},
align: 'left', // 文字左排序
rich: {
a1: {
backgroundColor: {
image: '图片路径' }, // 序号元素
width: 18, // 序号元素宽
height: 18, // 序号元素高
},
......
},
},
},
3. Core code (text serial number)
If the serial number does not use a picture, but a regular text serial number, it is also possible, the effect is as follows: the
formatter is formatted as {a1|1 Zhang 3}, the 1 after the | line is the text serial number, and then through various attributes of rich configuration style
The core code is as follows
this.chartOption = {
yAxis: {
......
axisLabel: {
color: '#D8D9D9',
margin: 90, // 距离右侧图形距离，配合axisLabel.left 和 grid.left 使用
// 必须使用formatter，配合rich使用
formatter: (params, index) => {
return [`{a${
index + 1}|${
index + 1}} ${
params}`].join('\n')
},
align: 'left', // 文字左排序
rich: {
a1: {
color: '#fff',
backgroundColor: 'red',
width: 18,
height: 18,
align: 'center',
borderRadius: 4,
},
......
},
},
},
4. Source code (vue is used here)
export default {
components: {
},
data() {
return {
}
},
computed: {
},
created() {
this.chartId = 'chart-PersonalRanking' // 图表对象Id
this.chart = null // echart 对象
this.chartOption = {
} // echart 配置项
this.inv = null // 计时器，每隔x秒拉一次数据
// 排序图标
this.rankIcons = [
require('@/assets/images/data-panel/rank1.png'),
require('@/assets/images/data-panel/rank2.png'),
require('@/assets/images/data-panel/rank3.png'),
require('@/assets/images/data-panel/rank4.png'),
require('@/assets/images/data-panel/rank5.png'),
]
// 排序图标大小
this.rankIconsSize = 18
},
mounted() {
this.init()
this.update()
this.inv = setInterval(this.update, 10000)
},
beforeDestroy() {
clearInterval(this.inv)
window.removeEventListener('resize', this.chartsResize)
if (this.chart) {
this.chart.dispose()
}
},
methods: {
// 更新
update() {
console.log('个人任务排名-每隔10秒更新数据')
const xData = [120, 200, 150, 80, 70]
const yData = ['张三', '李四', '王小五', '赵六', '张三丰']
// 更新在线图表
this.chartOption.yAxis.data = yData
this.chartOption.series[0].data = xData
this.chart.setOption(this.chartOption)
},
// 初始化
init() {
this.chartOption = {
yAxis: {
type: 'category',
inverse: true, // 反向坐标
data: [],
axisLine: {
show: false,
},
axisTick: {
show: false,
},
axisLabel: {
color: '#D8D9D9',
margin: 90, // 距离右侧图形距离，配合axisLabel.left 和 grid.left 使用
// formatter必须，配合rich使用
formatter: (params, index) => {
return [`{a${
index + 1}|} ${
params}`].join('\n')
},
align: 'left', // 文字左排序
rich: {
a1: {
backgroundColor: {
image: this.rankIcons[0] },
width: this.rankIconsSize,
height: this.rankIconsSize,
},
a2: {
backgroundColor: {
image: this.rankIcons[1] },
width: this.rankIconsSize,
height: this.rankIconsSize,
},
a3: {
backgroundColor: {
image: this.rankIcons[2] },
width: this.rankIconsSize,
height: this.rankIconsSize,
},
a4: {
backgroundColor: {
image: this.rankIcons[3] },
width: this.rankIconsSize,
height: this.rankIconsSize,
},
a5: {
backgroundColor: {
image: this.rankIcons[4] },
width: this.rankIconsSize,
height: this.rankIconsSize,
},
},
},
},
xAxis: {
show: false,
type: 'value',
},
color: ['#898FFC'],
grid: {
left: 110,
top: 0,
right: 20,
bottom: 10,
},
tooltip: {
show: true,
backgroundColor: 'rgba(0,0,0,.7)',
borderWidth: 0,
textStyle: {
color: '#fff',
},
},
series: [
{
data: [],
type: 'bar',
showBackground: true,
backgroundStyle: {
color: '#292B30',
borderRadius: 100,
},
barWidth: 6,
itemStyle: {
borderRadius: 100,
},
},
],
}
this.chart = this.$echarts.init(document.getElementById(this.chartId))
window.addEventListener('resize', this.chartsResize)
},
// 图表调整尺寸
chartsResize() {
if (this.chart) {
this.chart.resize()
}
},
},
}
如果帮到你，点个赞再走