登录
echarts实例：进度条加描述
2026年3月4日 16:24
记录下工作中使用echarts做出的特殊组件
import { defineComponent } from 'vue'
import { FONT_SIZE, COLOR_LIGHT_ORG, COLOR_YELLOW, COLOR_LIGHT_GREEN } from './createChart'
let props = {
propData: {
type: Array,
default: () => [
{ name: '名称1', value: 353, color: COLOR_YELLOW, desc: '{x}条描述' },
{ name: '名称2', value: 85, color: COLOR_LIGHT_GREEN, desc: '{2}条描述' },
{ name: '名称3', value: 30, color: '#FF6B6B', desc: '包括{名称3} XX{2}条描述，XX{4}条描述，XX{2}条描述' },
{ name: '名称4', value: 8, color: '#00BAAE', desc: '' },
],
},
barWidth: {
default: 25,
type: Number,
},
}
const colors = [COLOR_LIGHT_ORG, COLOR_YELLOW, COLOR_LIGHT_GREEN, '#7B68EE', '#FF6B6B', '#4ECDC4'] // 添加更多备用颜色
export default defineComponent({
props,
data() {
return {
fontSize: FONT_SIZE + 4,
}
},
created() {},
mounted() {
this.init()
this.$watch(
() => this.$props, // 监听整个 props 对象
() => {
this.init()
},
{ deep: true, immediate: false },
)
},
beforeDestroy() {
this.chart?.dispose?.()
},
methods: {
init() {
const option = this.getOption() // 间隙
const dom = this.$refs.chart
if (!this.chart) {
this.chart = echarts.init(dom, null, {
renderer: 'canvas',
})
}
this.chart.setOption(option, true)
},
getOption() {
if (!this.propData.length) return {}
const seriesdata = this.getData()
const series = this.getSeries(seriesdata)
const maxValue = this.getMaxValue(this.propData)
const seriesBg = this.getBackgroundBarSeries(maxValue)
return {
legend: {
show: false,
},
tooltip: {
show: false,
},
grid: {
left: '6%',
right: '5%',
bottom: '0%',
top: '1%',
containLabel: true,
},
xAxis: [
{
type: 'value',
axisLine: {
show: false,
},
splitLine: {
show: false,
},
axisLabel: {
show: false,
},
axisTick: {
show: false,
},
},
],
yAxis: [
{
type: 'category',
data: _.map(this.propData, 'name'),
axisLine: {
show: false,
},
splitLine: {
show: false,
},
axisLabel: {
show: true,
fontSize: this.fontSize,
textStyle: {
color: '#fff',
},
align: 'left', // 左对齐
padding: [0, 0, 0, -150], // 去掉内边距
interval: 0,
},
axisTick: {
show: false,
},
},
{
type: 'category',
data: this.propData,
offSet: -10,
axisLine: {
show: false,
},
splitLine: {
show: false,
},
axisLabel: {
show: false,
},
axisTick: {
show: false,
},
},
{
type: 'category',
data: this.propData,
axisLine: {
show: false,
},
splitLine: {
show: false,
},
axisLabel: {
show: false,
},
axisTick: {
show: false,
},
},
],
series: [...seriesBg, ...series],
}
},
// 获取最大值
getMaxValue(data) {
const values = _.map(data, 'value')
return Math.max(...values)
},
getData() {
return this.propData.map((item, index) => {
const color = item.color || colors[index] || '#ffffff'
return {
...item,
label: {
show: true,
position: [0, 0],
fontSize: this.fontSize - 5,
offset: [20, -70],
color: '#fff',
formatter: (params, index) => {
const text = this.propData[params.dataIndex]?.desc || ''
// 将文本拆分成数组，然后组合成富文本字符串
const parts = text.split(/(\{[^}]+\})/)
let richText = ''
parts.forEach((part) => {
if (part.startsWith('{') && part.endsWith('}')) {
// 移除花括号
const value = part.substring(1, part.length - 1)
richText += `{num|${value}}`
} else if (part) {
richText += part
}
})
return richText
},
rich: {
num: {
color, // 动态颜色
fontSize: this.fontSize ,
padding: [0, 5, 0, 5],
},
},
},
itemStyle: {
color: {
type: 'linear',
x: 0,
y: 0, // 上
x2: 1,
y2: 0, // 下
colorStops: [
{
offset: 0,
color: echarts.color.modifyAlpha(color, 0.1),
},
{
offset: 0.3,
color: echarts.color.modifyAlpha(color, 0.6),
},
{
offset: 1,
color: echarts.color.modifyAlpha(color, 1),
},
],
},
shadowColor: 'rgba(255,255,255,0.2)',
shadowBlur: 5,
shadowOffsetX: 0,
shadowOffsetY: 0,
},
}
})
},
getSeries(data) {
return [
{
name: '主系列',
type: 'bar',
stack: 'total',
barWidth: this.barWidth,
yAxisIndex: 0,
z: 2,
data,
},
]
},
// 最大值为背景底部进度条
getBackgroundBarSeries(maxValue) {
const config = {
data: this.propData.map(() => {
return maxValue
}),
tooltip: { show: false },
showInLegend: false,
}
const series = [
{
...config,
type: 'bar',
name: '背景bar',
barWidth: this.barWidth,
itemStyle: {
color: 'rgba(255, 255, 255,0.13)',
borderWidth: 0,
},
yAxisIndex: 1,
},
{
...config,
type: 'bar',
name: '背景框',
data: this.propData.map((i, index) => {
return {
value: maxValue + 5,
label: {
color: this.propData[index]?.color || '#fff',
},
}
}),
barWidth: this.barWidth + 20,
itemStyle: {
color: 'rgba(255, 255, 255,0)',
borderColor: '#fff',
borderWidth: 2,
borderRadius: 0,
},
label: {
show: true,
position: 'right',
fontSize: this.fontSize+10,
fontFamily: 'TRENDS',
offset: [50, 0],
formatter: (params) => {
return this.propData[params.dataIndex]?.value || 0
},
},
yAxisIndex: 2,
},
]
return series
},
},
})
