VUE中怎么渲染Echarts动画柱状图

柱状图

效果图

安装Echarts依赖

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

npm install echarts --save

这是我的Echarts版本

"echarts": "^4.0.4"

第一步：在template减免 容器dom

第二步：初始化 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
完整页面代码：

 

 

.min-body{
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #010827;
}