网站后台策划,邢台建网站哪里有,菜鸟建站网,惠州建设公司网站这里的动态效果实现原理#xff0c;就是相当于柱状图多了一组同系列数据#xff0c;其值与数组展示数据一致#xff08;类似下图#xff09; 即#xff0c;柱形图的每一个柱体都有它对应的另外一个柱体 其中白色柱体要与展示柱体重合#xff0c;效果类似与给柱体做背景… 这里的动态效果实现原理就是相当于柱状图多了一组同系列数据其值与数组展示数据一致类似下图 即柱形图的每一个柱体都有它对应的另外一个柱体 其中白色柱体要与展示柱体重合效果类似与给柱体做背景只需要加上barGap值为-100%即可白色柱体在展示柱体上方可以通过设置大于展示柱体的 z值 实现
我们想要实现的效果是动态的即白色柱体并不是一直存在的因此可以通过定时器设置每隔1秒 series中白色柱体的配置动态显示一次
let option{...}
let myChartthis.$echarts.init(document.getElementById(canvas))
myChart.setOption(option)
let flagtrue
setInterval((){if(flag){//给series添加白色主题配置option.series.push({...//白色主题配置})flagfalse}else{//动态效果显示后要正常显示因此还要把白色柱体去掉option.series.pop()flagtrue}//渲染新的表格,这里要注意的是要传第二个参数 true//第二个参数表示是否不跟之前设置的option进行合并默认为false,即合并那我们动态效果只会变化一次这就是导致二次渲染不成功的原因由于我们这里会重复渲染因此要传第二个参数且为truemyChart.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 myChartthis.$echarts.init(document.getElementById(category))myChart.setOption(option)let flagtruesetInterval((){if(flag){option.series.push({barWidth:20,barGap:-100%,data: [500, 200, 150, 80],type: bar,itemStyle:{borderRadius: 15},z:3})flagfalse}else{flagtrueoption.series.pop()}myChart.setOption(option,true)},1000)}
