echarts 柱狀圖添加排序圖標/序號

• 一、實現效果
• 二、核心代碼（圖片序號）
• 三、核心代碼（文字序號）
• 四、源碼（這里用了vue）

一、實現效果

使用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' // 圖表對象Idthis.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 = yDatathis.chartOption.series[0].data = xDatathis.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()}},}, }

如果幫到你，點個贊再走

總結

以上是生活随笔為你收集整理的echarts 柱状图添加排序图标/序号的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。