echarts-柱状，动态

echarts-柱状，动态

代码

<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>

效果展示