echarts進度條加描述實例代碼舉例
更新時間：2026年06月01日 10:37:16 作者：這個實現(xiàn)不了
ECharts是一款基于JavaScript的數(shù)據(jù)可視化庫,可以用來創(chuàng)建各種各樣的交互式圖表和可視化效果,這篇文章主要介紹了echarts進度條加描述實例的相關(guān)資料,需要的朋友可以參考下
記錄下工作中使用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, // 監(jiān)聽整個 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], // 去掉內(nèi)邊距
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 || ''
// 將文本拆分成數(shù)組，然后組合成富文本字符串
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, // 動態(tài)顏色
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
},
},
})
總結(jié)
到此這篇關(guān)于echarts進度條加描述實例的文章就介紹到這了,更多相關(guān)echarts進度條加描述內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Javascript連接多個數(shù)組不用concat來解決
這篇文章主要介紹了不用concat解決Javascript連接多個數(shù)組,需要的朋友可以參考下2014-03-03
今天在HTML中引入JavaScript文件運行時，alert彈出的提示框中文顯示為亂碼，怎么解決此問題呢？下面小編給大家?guī)砹艘隞avaScript時alert彈出框顯示中文亂碼問題的解決方法，一起看看吧2017-09-09
這篇文章主要為大家詳細介紹了用js實現(xiàn)猜數(shù)字小游戲，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
一文詳解為什么JavaScript中的JSON.parse()報錯
這篇文章主要介紹了JavaScript中JSON.parse()方法的使用和常見錯誤,包括非法JSON格式、包含不可解析的字符、使用單引號等,并提供了相應(yīng)的解決方案和實際項目中的代碼示例,需要的朋友可以參考下2025-03-03
一文徹底搞懂JavaScrip中的call、apply、arguments
在學習JavaScript時,你可能會遇到call、arguments和apply這三個方法,這篇文章主要介紹了關(guān)于JavaScrip中的call、apply、arguments的相關(guān)資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2025-04-04
每天一篇javascript學習小結(jié)（Boolean對象）
這篇文章主要介紹了javascript中的Boolean對象知識點，對Boolean對象的基本使用方法進行解釋，一段很詳細的代碼介紹，感興趣的小伙伴們可以參考一下2015-11-11
TypeScript?中使用?getter?和?setter的方法
這篇文章主要介紹了TypeScript?中如何使用?getter?和?setter,?getter使我們能夠?qū)傩越壎ǖ皆谠L問屬性時調(diào)用的函數(shù)，而?setter?將屬性綁定到在嘗試設(shè)置屬性時調(diào)用的函數(shù)，需要的朋友可以參考下2023-04-04
在layui中l(wèi)ayer彈出層點擊事件無效的解決方法
今天小編就為大家分享一篇在layui中l(wèi)ayer彈出層點擊事件無效的解決方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
event.srcElement 可以捕獲當前事件作用的對象，如event.srcElement.tagName可以捕獲活動標記名稱。2009-12-12
詳解Javascript百度地圖接口開發(fā)文檔中的類和方法
最近在工作中在用laravel框架仿寫?zhàn)I了么外賣商城,于是學習了一下有關(guān)地圖接口相關(guān)的知識,以下是百步地圖接口開發(fā)文檔的一些類和方法的使用，需要的朋友們可以參考借鑒，下面來一起看看吧。2017-02-02