vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > VUE渲染Echarts动画柱状图

VUE中如何渲染Echarts动画柱状图

作者:前端互助会

这篇文章主要介绍了VUE中如何渲染Echarts动画柱状图问题,具有很好的参考价值,希望对大家有所帮助。

柱状图

效果图

安装Echarts依赖

要在vue中使用Echarts 需要先安装依赖

npm install echarts --save

这是我的Echarts版本

"echarts": "^4.0.4"

第一步:在template减免 容器dom

<template>
   <div class="min-body">
       <div style="width:80vw;height: 80vh" id="EchartsAnimate" ref="docement"></div>
   </div>
</template>

第二步:初始化 Echarts

注意:此处有一方法,是用于适配 Echarts 字体适配大屏的

chartsRelativeSize(percent, derection) {
                var windowW = this.$refs.docement.offsetWidth;
                var windowH = this.$refs.docement.offsetHeight
                var r = 0;
                if ('h' === derection) {
                    r = percent * windowH / 100;
                } else {
                    r = percent * windowW / 100;
                }
                return r;
},

使用:

第三步:请求数据 加载柱状图动画

原理:设置定时器,删除Echarts 柱状图的第一个数据的同属压入数组的最后一个

for(var i=0;i<this.echartsData.list.length && i<5;i++){
                    option.xAxis[0].data.push( that.echartsData.list[i].mc);
                    option.series[0].data.push( that.echartsData.list[i].sysl);
                    option.series[1].data.push( that.echartsData.list[i].dysl);
 
 }
                myCharts.setOption(option);
 
                if(window.hbfxInterval){
                    clearInterval(window.hbfxInterval);
                }
                window.hbfxIndex = 0;
                window.hbfxInterval = setInterval(function () {
                    option.xAxis[0].data.shift();
                    option.xAxis[0].data.push( that.echartsData.list[window.hbfxIndex% that.echartsData.list.length].mc);
 
                    option.series[0].data.shift();
                    option.series[0].data.push( that.echartsData.list[window.hbfxIndex% that.echartsData.list.length].sysl);
 
                    option.series[1].data.shift();
                    option.series[1].data.push( that.echartsData.list[window.hbfxIndex% that.echartsData.list.length].dysl);
 
                    myCharts.setOption(option);
                    window.hbfxIndex ++;
                },2000)

完整页面代码:

<template>
   <div class="min-body">
       <div style="width:80vw;height: 80vh" id="EchartsAnimate" ref="docement"></div>
   </div>
</template>
 
<script>
    export default {
        name: "EchasrtsAnimate",
        data:function () {
            return {
                echartsData:{"size":21,"list":[{"dysl":"70","mc":"刑事警情","dm":"01","sysl":"89"},{"dysl":"75","mc":"行政(治安)警情","dm":"02","sysl":"107"},{"dysl":"4","mc":"交通类警情","dm":"03","sysl":"21"},{"dysl":"7","mc":"火灾事故","dm":"04","sysl":"9"},{"dysl":"43","mc":"群众求助","dm":"05","sysl":"71"},{"dysl":"5","mc":"举报投诉","dm":"06","sysl":"10"},{"dysl":"20","mc":"纠纷","dm":"08","sysl":"44"},{"dysl":"1","mc":"灾害事故","dm":"09","sysl":"1"},{"dysl":"56","mc":"其他行政违法","dm":"10","sysl":"71"},{"dysl":"56","mc":"经济案件类警情","dm":"11","sysl":"65"},{"dysl":"9429","mc":"违法犯罪警情","dm":"20","sysl":"12320"},{"dysl":"25597","mc":"交通警情","dm":"21","sysl":"29575"},{"dysl":"272","mc":"火灾事故","dm":"22","sysl":"369"},{"dysl":"6040","mc":"群众求助","dm":"23","sysl":"7307"},{"dysl":"4203","mc":"举报投诉","dm":"24","sysl":"4983"},{"dysl":"27","mc":"群体事件","dm":"25","sysl":"44"},{"dysl":"9679","mc":"纠纷","dm":"26","sysl":"12396"},{"dysl":"44","mc":"灾害事故","dm":"27","sysl":"70"},{"dysl":"109","mc":"扬言","dm":"28","sysl":"146"},{"dysl":"17","mc":"警情备案","dm":"30","sysl":"23"},{"dysl":"75","mc":"其他警情","dm":"90","sysl":"69"}]}
            }
        },
        mounted(){
                this.loadEchartsAnimate()
        },
        methods:{
            chartsRelativeSize(percent, derection) {
                var windowW = this.$refs.docement.offsetWidth;
                var windowH = this.$refs.docement.offsetHeight
                var r = 0;
                if ('h' === derection) {
                    r = percent * windowH / 100;
                } else {
                    r = percent * windowW / 100;
                }
                return r;
            },
            loadEchartsAnimate(){
                var that = this
                var echarts = require('echarts');
                var myCharts = echarts.init(document.getElementById('EchartsAnimate'));
                var option = {
                    color:['#407FFF','#00CCCD'],
                    tooltip : {
                        trigger: 'axis',
                        textStyle:{
                            color:'#ffffff',
                            fontSize: this.chartsRelativeSize(0.5, 'r')
                        },
                        formatter: function (params) {
                            var arr = [];
                            params.forEach(function (item) {
                                var N=item.seriesName;
                                var V = '';
                                if(item.value>100000000){//亿
                                    V += (item.value/100000000).toFixed(1) + '亿';
                                }else if( item.value>10000){//万
                                    V += (item.value/10000).toFixed(1) + '万';
                                }else{
                                    V += item.value;
                                }
                                var a = {name:N,value:V};
                                arr.push(a);
                            });
                            var num = '';
                            arr.forEach(function (item) {
                                num += item.name+":"+item.value+"<br/>";
                            });
                            return params[0].name +"<br>"+ num;
                        }
                    },
                    grid: {
                        left: '25vw',
                        right: '25vw',
                        bottom: '9vh',
                        top:'30vh',
                        containLabel: true
                    },
                    /*dataZoom:[{
                        show: true,
                        height: 10,
                        bottom: 0,
                        startValue:0,
                        endValue:4,
                        handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
                        handleSize: '100%',
                        handleStyle:{color:"#ddd" },
                        textStyle:{color:"#666666"},
                        borderColor:"#eee"
                    }],*/
                    legend: {
                        orient: 'horizontal',
                        top:'0',
                        x: 'right',
                        itemWidth:15,
                        itemHeight:15,
                        textStyle:{
                            color:'#fff',
                            fontSize: this.chartsRelativeSize(0.5, 'r')
                        },
                        data:['上月','本月']
                    },
                    xAxis: [
                        {
                            type: 'category',
                            axisLine: {
                                lineStyle: {
                                    type: 'solid',
                                    color: '#2E3950',//左边线的颜色
                                    width: '1'//坐标线的宽度
                                }
                            },
                            axisLabel: {
                                textStyle: {
                                    color: '#fff',//坐标值得具体的颜色,
                                    fontSize:  this.chartsRelativeSize(0.5, 'r')
                                },
                                interval:0
                            },
                            axisTick:false,
                            data: [/*'崇川区','港闸区','通州区','如东县','海安市','启东市','海门市','如皋市'*/]
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value',
                            axisLine: {
                                lineStyle: {
                                    type: 'solid',
                                    color: '#2E3950',//左边线的颜色
                                    width: '1'//坐标线的宽度
                                }
                            },
                            axisLabel: {
                                textStyle: {
                                    color: '#e6e6e6',//坐标值得具体的颜色,
                                    fontSize:  this.chartsRelativeSize(0.5, 'r')
 
                                }
                            },
                            axisTick:false,
                            splitLine: {  //坐标轴在grid区域中的分隔线(网格中的横线)
                                show: true,
                                lineStyle: {
                                    color: ['#2E3950'],
                                    width: 1,
                                    type: 'solid',
                                }
                            },
                            splitArea: {//坐标轴在grid区域中的分隔区域(间隔显示网格区域)
                                interval: 1, //显示间隔的规律
                                show: true,
                                areaStyle: {//分隔区域的样式
                                    color: ['rgba(255,255,255,0.03)', 'rgba(255,255,255,0)']
                                }
                            }
                        }
                    ],
                    series : [
                        {
                            name:'上月',
                            type:'bar',
                            barGap:0,
                            barWidth:15,
                            data:[/*15,48,40,32,21,41,38,65*/]
                        },
                        {
                            name:'本月',
                            type:'bar',
                            barGap:0,
                            barWidth:15,
                            data:[/*43,12,56,67,12,45,41,15*/]
                        }
                    ]
                };
                for(var i=0;i<this.echartsData.list.length && i<5;i++){
                    option.xAxis[0].data.push( that.echartsData.list[i].mc);
                    option.series[0].data.push( that.echartsData.list[i].sysl);
                    option.series[1].data.push( that.echartsData.list[i].dysl);
                }
                myCharts.setOption(option);
 
                if(window.hbfxInterval){
                    clearInterval(window.hbfxInterval);
                }
                window.hbfxIndex = 0;
                window.hbfxInterval = setInterval(function () {
                    option.xAxis[0].data.shift();
                    option.xAxis[0].data.push( that.echartsData.list[window.hbfxIndex% that.echartsData.list.length].mc);
 
                    option.series[0].data.shift();
                    option.series[0].data.push( that.echartsData.list[window.hbfxIndex% that.echartsData.list.length].sysl);
 
                    option.series[1].data.shift();
                    option.series[1].data.push( that.echartsData.list[window.hbfxIndex% that.echartsData.list.length].dysl);
 
                    myCharts.setOption(option);
                    window.hbfxIndex ++;
                },2000)
            }
        }
    }
</script>
 
<style scoped>
.min-body{
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #010827;
}
 
</style>

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

您可能感兴趣的文章:
阅读全文