echarts-柱狀，動(dòng)態(tài)
echarts-柱狀，動(dòng)態(tài)
代碼
```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 =["隴南成縣發(fā)布抖音平臺(tái)","隴南成縣發(fā)布公眾號(hào)","今日頭條","人民號(hào)","成縣廣電新視聽"];
? ? ? ? ? ? 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 =["掌上成縣","新華號(hào)","新華社","隴南融媒","隴南成縣發(fā)布抖音平臺(tái)","隴南成縣發(fā)布公眾號(hào)","今日頭條","人民號(hào)","成縣廣電新視聽","成縣融媒官方快手","學(xué)習(xí)強(qiáng)國"];
? ? ? ? ? ? ? ? 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>
```
### 效果展示
