ECharts柱状图背景动态效果实现
创作时间:
作者:
@小白创作中心
ECharts柱状图背景动态效果实现
引用
CSDN
1.
https://blog.csdn.net/weixin_46394325/article/details/139477217
本文将介绍如何使用ECharts实现柱状图的背景动态效果。通过添加一组同系列数据并使用定时器,可以实现柱状图背景的动态显示效果。
这里的动态效果实现原理,就是相当于柱状图多了一组同系列数据,其值与数组展示数据一致(类似下图)
即,柱形图的每一个柱体都有它对应的另外一个柱体
其中白色柱体要与展示柱体重合,效果类似与给柱体做背景,只需要加上 barGap
,值为 -100%
即可,白色柱体在展示柱体上方,可以通过设置大于展示柱体的 z值
实现
我们想要实现的效果是动态的,即白色柱体并不是一直存在的,因此可以通过定时器,设置每隔1秒 series中白色柱体的配置动态显示一次,
let option={...}
let myChart=this.$echarts.init(document.getElementById('canvas'))
myChart.setOption(option)
let flag=true
setInterval(()=>{
if(flag){
//给series添加白色主题配置
option.series.push({...//白色主题配置})
flag=false
}else{
//动态效果显示后要正常显示,因此还要把白色柱体去掉
option.series.pop()
flag=true
}
//渲染新的表格,这里要注意的是要传第二个参数 true
//第二个参数表示是否不跟之前设置的option进行合并,默认为false,即合并,那我们动态效果只会变化一次,这就是导致二次渲染不成功的原因,由于我们这里会重复渲染,因此要传第二个参数,且为true
myChart.setOption(option,true)
})
首图效果图代码
initCategory(){
let option={
color:['rgba(255,255,255,0.1)'],
xAxis: {
type: 'value',
splitLine: { show: false },
axisTick: { show: false },
axisLine: { show: false },
axisLabel: { show: false }
},
yAxis: {
type: 'category',
inverse:true,
data:['1','2','3','4'],
splitLine: { show: false },
axisTick: { show: false },
axisLine: { show: false },
},
series: [
{
barWidth:20,
animation:false,
data: [{
value:500,
label:{
show:true,
position:'right'
},
itemStyle:{
color:{
type: 'linear',
x: 0,
y: 1,
x2: 1,
y2: 0,
colorStops: [{
offset: 0, color: '#3caee7' // 0% 处的颜色
}, {
offset: 1, color: '#2e8bb9' // 100% 处的颜色
}],
global: false // 缺省为 false
}
}
}, {
value:200,
label:{
show:true,
position:'right'
},
itemStyle:{
color:{
type: 'linear',
x: 0,
y: 1,
x2: 1,
y2: 0,
colorStops: [{
offset: 0, color: '#32c5e9' // 0% 处的颜色
}, {
offset: 1, color: '#2494ad' // 100% 处的颜色
}],
global: false // 缺省为 false
},
}
}, {
value:150,
label:{
show:true,
position:'right'
},
itemStyle:{
color:{
type: 'linear',
x: 0,
y: 1,
x2: 1,
y2: 0,
colorStops: [{
offset: 0, color: '#68dfe2' // 0% 处的颜色
}, {
offset: 1, color: '#54b8b9' // 100% 处的颜色
}],
global: false // 缺省为 false
}
}
}, {
value:80,
label:{
show:true,
position:'right'
},
itemStyle:{
color:{
type: 'linear',
x: 0,
y: 1,
x2: 1,
y2: 0,
colorStops: [{
offset: 0, color: '#9fe6b8' // 0% 处的颜色
}, {
offset: 1, color: '#89c79f' // 100% 处的颜色
}],
global: false // 缺省为 false
}
}
}],
type: 'bar',
itemStyle:{
borderRadius: 15
},
z:2
},
]
}
const myChart=this.$echarts.init(document.getElementById('category'))
myChart.setOption(option)
let flag=true
setInterval(()=>{
if(flag){
option.series.push({
barWidth:20,
barGap:'-100%',
data: [500, 200, 150, 80],
type: 'bar',
itemStyle:{
borderRadius: 15
},
z:3
})
flag=false
}else{
flag=true
option.series.pop()
}
myChart.setOption(option,true)
},1000)
}
热门推荐
未成年人保护 | 你知道不同年龄段的未成年人都受哪些法律保护吗?
西安博物院:古都西安的历史与文化深度探索 🏛️
炼金攻略游戏情侣:深度解析炼金术在游戏中的魅力
古代百姓穿合裆裤 皇帝和贵族们为何一直穿开裆裤
2024年法律硕士(非法学)考研指南:中国人民大学法律硕士非法学备考指南
八字怎么看两个人缘分深浅,八字怎么看两个人是不是正缘
第10个核国家崛起,全球核扩散再度引发关注,当前局势如何重塑国际安全格局?
从古埃及到现代动漫:猫娘文化的演变历程
如何正确地教育你的宠物猫(学习正确的猫咪教育方法)
揭秘"中继盗窃":偷车贼如何通过增强遥控钥匙信号盗车
9个快速恢复精力的方法
单亲家庭孩子面临的挑战及应对之道
为什么有“生理反应”的喜欢,才是真正的喜欢?
法国大革命中的恐怖统治:雅各宾派的血腥镇压
都有什么棋
保护与开发并重 水西林古建筑群焕发新活力
深度探讨AI大模型的比较标准与重要性
解码“智慧市政”的创新实践与战略意义
软件测试报告中的关键指标解读
唐三插曲千仞雪不亦说乎:千仞雪下的绝世情缘,何其壮丽与悲凉
深度解读:一代哲学大师笛卡尔的哲学思想
女性脸色发黄有3个原因,去黄可以这样吃
借势而生,情深似海:凌霄花的花语与寓意探析
山再高,志更坚——成语愚公移山的启示
数字技术如何助力民俗博物馆,实现沉浸式文化空间升级?
《斗罗大陆》漫画第359话:老一辈的荣耀之战,唐昊、剑斗罗强势登场
Excel中设置单元格引用超链接的多种方法
如何改善客户关系管理
小学英语游戏化教学策略研究
涨停的条件是什么?涨停现象反映了市场的哪些情况?