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.offsetHeightvar 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.offsetHeightvar r = 0;if ('h' === derection) {r = percent * windowH / 100;} else {r = percent * windowW / 100;}return r;},loadEchartsAnimate(){var that = thisvar 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>

感谢阅读，欢迎点赞关注！个人小记，仅供参考，欢迎一起讨论学习！！！！！！

VUE 中渲染Echarts 动画柱状图相关推荐

Vue中使用echarts实现柱状图（双柱）
实现效果: echarts使用说明请查看:Vue中使用echarts实现常用图表总结 option配置: option = {tooltip: {trigger: 'axis',axisPointer ...
vue中引入Echarts画柱状图
目录 1 引入Echarts 1.1 安装 1.2 引入 2 基本柱状图 3 多列柱状图 4 柱状图样式设置 4.1 柱条样式 4.2 柱条间距 5 动态排序柱状图 6 总结 1 引入Echarts ...
echarts vue 柱状图实例_VUE中使用Echarts绘制柱状图
在main.js中引入echarts import echarts from 'echarts' Vue.prototype.$echarts = echarts 在相应的vue中导入echarts ...
Vue中引入echarts的步骤，折线图、柱状图、饼图的常用配置项
vue中引入echarts 一.安装echarts 二.引入echarts 1.全局引入 2.局部引入三.vue中使用echarts 1.准备好函数 2.准备一个容器来放echarts 3.初始化容 ...
vue中使用echarts实现动态数据绑定、获取后端接口数据
之前几篇echarts的文章是实现了静态的柱状图.折线图.饼状图.地图,在项目中我们肯定是需要获取后端接口,将后端返回的数据显示在图表上,所以这次就记录一下如何实现echarts的动态数据绑定. 简单 ...
在vue中使用antV-G2展示柱状图
介绍 G2 是一套基于图形语法理论的可视化底层引擎,以数据驱动,提供图形语法与交互语法,具有高度的易用性和扩展性.使用 G2,你可以无需关注图表各种繁琐的实现细节,一条语句即可使用 Canvas 或 ...
vue - vue中使用echart实现柱状图和折线图
vue中使用echart实现柱状图和折线图,所用到的数据会放到最后面,在costRate.js里面: 1,先看效果图一些重要注释我都写到代码里面了:第一个图柱状图,第二个是折线图 2,代码实现 &l ...
Vue中使用echarts图表插件
一.安装echarts依赖 npm install echarts -S 或者使用淘宝的镜像 npm install -g cnpm --registry=https://registry.npm.t ...
echart高级使用_Vue:在Vue中使用echarts
前言公司的项目中需要对数据做可视化处理,高级点的D3.js目前还没接触到,因此选用了大众化的Echarts, 在vue的生态系统中已经有实现好的vue-echarts,但是使用现成的就意味着必须使用 ...

VUE 中渲染Echarts 动画柱状图

安装Echarts依赖

第一步：在template减免容器dom

第二步：初始化 Echarts

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

使用：

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

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

《完整页面代码》

VUE 中渲染Echarts 动画柱状图相关推荐

最新文章

热门文章

VUE 中渲染Echarts 动画 柱状图

安装Echarts依赖

第一步：在template减免 容器dom

第二步：初始化 Echarts

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

使用：

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

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

《完整页面代码》

VUE 中渲染Echarts 动画 柱状图相关推荐

最新文章

热门文章

VUE 中渲染Echarts 动画柱状图

第一步：在template减免容器dom

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

VUE 中渲染Echarts 动画柱状图相关推荐