echarts进度条加描述实例代码举例
更新时间：2026年06月01日 10:37:16 作者：这个实现不了
ECharts是一款基于JavaScript的数据可视化库,可以用来创建各种各样的交互式图表和可视化效果,这篇文章主要介绍了echarts进度条加描述实例的相关资料,需要的朋友可以参考下
记录下工作中使用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
},
},
})
总结
到此这篇关于echarts进度条加描述实例的文章就介绍到这了,更多相关echarts进度条加描述内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了不用concat解决Javascript连接多个数组,需要的朋友可以参考下2014-03-03
今天在HTML中引入JavaScript文件运行时，alert弹出的提示框中文显示为乱码，怎么解决此问题呢？下面小编给大家带来了引入JavaScript时alert弹出框显示中文乱码问题的解决方法，一起看看吧2017-09-09
这篇文章主要为大家详细介绍了用js实现猜数字小游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-09-09
一文详解为什么JavaScript中的JSON.parse()报错
这篇文章主要介绍了JavaScript中JSON.parse()方法的使用和常见错误,包括非法JSON格式、包含不可解析的字符、使用单引号等,并提供了相应的解决方案和实际项目中的代码示例,需要的朋友可以参考下2025-03-03
一文彻底搞懂JavaScrip中的call、apply、arguments
在学习JavaScript时,你可能会遇到call、arguments和apply这三个方法,这篇文章主要介绍了关于JavaScrip中的call、apply、arguments的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下2025-04-04
这篇文章主要介绍了javascript中的Boolean对象知识点，对Boolean对象的基本使用方法进行解释，一段很详细的代码介绍，感兴趣的小伙伴们可以参考一下2015-11-11
TypeScript 中使用 getter 和 setter的方法
这篇文章主要介绍了TypeScript 中如何使用 getter 和 setter, getter使我们能够将属性绑定到在访问属性时调用的函数，而 setter 将属性绑定到在尝试设置属性时调用的函数，需要的朋友可以参考下2023-04-04
今天小编就为大家分享一篇在layui中layer弹出层点击事件无效的解决方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-09-09
event.srcElement 可以捕获当前事件作用的对象，如event.srcElement.tagName可以捕获活动标记名称。2009-12-12
最近在工作中在用laravel框架仿写饿了么外卖商城,于是学习了一下有关地图接口相关的知识,以下是百步地图接口开发文档的一些类和方法的使用，需要的朋友们可以参考借鉴，下面来一起看看吧。2017-02-02
最新评论