echarts 柱状图添加排序图标/序号
一、实现效果
使用echarts的柱状图实现下面效果，须在名称前面添加序号：
二、核心代码（图片序号）
核心代码在于配置属性中的 axisLabel，需要formatter 和 rich 属性配合，注意看代码注释
formatter中格式化为 {a1| 张三 }
然后rich中通过匹配 a1来配置序号样色，这里使用了图片，所以 backgroundColor 里设置image路径即可
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, // 序号元素高
},
......
},
},
},
三、核心代码（文字序号）
如果序号不用图片，而是常规的文字序号，也是可以的，效果如下：
其中 formatter中格式化为 {a1|1 张三 }，| 线后的1就是文字序号了，然后通过rich的各种属性配置风格
核心代码如下
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,
},
......
},
},
},
四、源码（这里用了vue）
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()
}
},
},
}
如果帮到你，点个赞再走