echarts-柱状，动态
echarts-柱状，动态
代码
```vue
<template>
<div style="width:100%;height:100%;" id="issues"></div>
</template>
<script>
import echarts from 'echarts'
export default {
mounted() {
this.drawLine()
},
methods: {
drawLine(){
let myChart = echarts.init(document.getElementById('issues'));
var salvProName =["陇南成县发布抖音平台","陇南成县发布公众号","今日头条","人民号","成县广电新视听"];
var salvProValue =[422,799,725,137,408];
var totalValue = [1000,1000,1000,1000,1000]
var option = {
grid: {
left: '8%',
right: '8%',
bottom: '2%',
top: '6%',
containLabel: false
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'none'
},
formatter: function(params) {
return params[0].name + ' : ' + params[0].value
}
},
xAxis: {
show: false,
type: 'value'
},
yAxis: [{
type: 'category',
inverse: true,
axisLabel: {
show: true,
align: "left",
padding:[0,0,20,10],
textStyle: {
color: '#fff',
fontSize:10
},
},
splitLine: {
show: false
},
axisTick: {
show: false
},
axisLine: {
show: false
},
data: salvProName
}, {
type: 'category',
inverse: true,
axisTick: 'none',
axisLine: 'none',
show: true,
axisLabel: {
padding:[0,0,20,-45],
textStyle: {
color: '#ffffff',
fontSize: '10'
},
formatter: function(value) {
return value.toLocaleString()+ '条';
},
},
data:salvProValue
}],
series: [{
name: '值',
type: 'bar',
zlevel: 1,
itemStyle: {
normal: {
barBorderRadius: 30,
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
offset: 0,
color: 'rgb(57,89,255,1)'
}, {
offset: 1,
color: 'rgb(46,200,207,1)'
}]),
},
},
barWidth: 8,
data: salvProValue
},
{
name: '背景',
type: 'bar',
zlevel: 0,
barGap: '-100%',
itemStyle: {
normal: {
barBorderRadius: 30,
color: 'rgba(24,31,68,1)',
},
},
barWidth: 8,
data: totalValue
}
]
}
myChart.setOption(option);
var salvProNamesrc =["掌上成县","新华号","新华社","陇南融媒","陇南成县发布抖音平台","陇南成县发布公众号","今日头条","人民号","成县广电新视听","成县融媒官方快手","学习强国"];
var salvProValuesrc =[584,123,72,393,422,799,725,137,408,193,350];
var key=0
setInterval(function() {
salvProValue.shift();
salvProName.shift();
salvProValue.push(salvProValuesrc[key]);
salvProName.push(salvProNamesrc[key]);
key=(key+1)%10;
myChart.setOption(option);
}, 2000);
}
}
}
</script>
```
### 效果展示
