echarts 柱状图(带柱平移动画、进度条效果柱状、动态增长排序)、折线图(曲线图)

2023-12-14 22:59
文章标签 动态 排序 效果 动画 进度条 echarts 折线图 柱状图 增长 曲线图 平移 柱状 带柱

本文主要是介绍echarts 柱状图(带柱平移动画、进度条效果柱状、动态增长排序)、折线图(曲线图)，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！ 

柱状图:1、x轴和y轴设置:水平方向柱状图:x轴和y轴内容互换xAxis:{type:'category',  类目轴,即x方向按不同内容分类data:xData, 	类目轴数据boundaryGap:false,  设置x第一个节点值,从y轴开始,默认有间距splitLine:{  	去掉坐标轴的水平虚线指示线show:false},},yAxis:{type:'value'  	type='value'不需要设置data,会根据series中的数据显示scale:true,  	让y轴的值不从0开始splitNumber:5,  坐标轴分割的段数,只是预估值,会根据实际值的可读程度而改变minInterval:5,  坐标轴的最小刻度尺单位,会被splitNumber分割成的刻度而影响maxInterval:5   坐标轴的最大刻度尺单位,强制限定},2、设置数据的显示方式和数据内容series:[{name:'系列名称',type:'bar', 数据显示方式,line为折线图data:yData,  y轴数据和鼠标放上显示内容markPoint:{  标记点,可以标记最大值和最小值以及任意点data:[{type:'max',name:'最大值',},{type:'min',name:'最小值'},{type:'average',name:'平均值'}]},markLine:{ 标注线data:[{type:'average',name:'平均值'}]},markArea:{ 标志指定区间阴影data: [[{name:'区间1',xAxis:'张三',},{xAxis: '彭万里',}],[{name: '60分到80分',yAxis: 60},{yAxis: 80}],]},label:{ 数值标签show:true,  每个柱显示y轴对应值rotate:60,position:'inside'},barWidth:40,  图的宽度}]3、柱状图平移动画(1)通过dataZoom设置startValue和endValue设置(2)动态改变startValue和endValue的值,即可进行筛选平移4、进度条效果柱状(1)根据方向设置两个x轴/y轴(2)第二个x/y轴的数据是相同且大于第一个x/y轴的数据(3)设置第二个x/y轴对应的柱状样式,如边框和颜色为空在series中通过xAxisIndex/yAxisIndex来指定控制对应的轴5、设置不同类型的bar,以及多个图表坐标轴分离option = {legend: {},tooltip: {},dataset: {source: [['product', '2012', '2013', '2014', '2015'],['Matcha Latte', 41.1, 30.4, 65.1, 53.3],['Milk Tea', 86.5, 92.1, 85.7, 83.1],['Cheese Cocoa', 24.1, 67.2, 79.5, 86.4]]},xAxis: [{type: 'category', gridIndex: 0},{type: 'category', gridIndex: 1}],yAxis: [{gridIndex: 0},{gridIndex: 1}],grid: [{bottom: '55%'},{top: '55%'}],series: [// 这几个系列会在第一个直角坐标系中，每个系列对应到 dataset 的每一行。{type: 'bar', seriesLayoutBy: 'row'},{type: 'bar', seriesLayoutBy: 'row'},{type: 'bar', seriesLayoutBy: 'row'},// 这几个系列会在第二个直角坐标系中，每个系列对应到 dataset 的每一列。{type: 'bar', xAxisIndex: 1, yAxisIndex: 1},{type: 'bar', xAxisIndex: 1, yAxisIndex: 1},{type: 'bar', xAxisIndex: 1, yAxisIndex: 1},{type: 'bar', xAxisIndex: 1, yAxisIndex: 1}]}6、动态排序增长柱状图yAxis.inverse 					设为true,表示Y轴从下往上是从小到大的排列,否则相反yAxis.animationDuration 		建议设为300,表示第一次柱条排序动画的时长yAxis.animationDurationUpdate 	建议设为300,表示第一次后柱条排序动画的时长yAxis.max						只显示前n名,将yAxis.max设为n - 1,否则显示所有柱条xAxis.max 						建议设为'dataMax'表示用数据的最大值作为X轴最大值,视觉效果更好series.realtimeSort  			设为true,表示开启Y 轴的动态排序效果series.label.valueAnimation		如果想要实时显示标签,需要将series.label.valueAnimation设为trueanimationDuration 				设为0,表示第一份数据不需要从0开始动画(如果希望从0开始则建议设为和animationDurationUpdate 相同的值)animationDurationUpdate 		建议设为3000表示每次更新动画时长,这一数值应与调用setOption改变数据的间隔时间相同以animationDurationUpdate的频率调用setInterval,更新数据值,显示下一个时间点对应的柱条排序折线图:基础配置和柱状图相同series:[{type:'line',smooth:true, 	设置平滑曲线stack:'all',	堆叠图,stack可以是任意值,则第二个图就会在第一个图的每个数据*2的高度上进行绘制,避免交叉重叠lineStyle:{ 	线条样式color:'purple',type:'dashed'},areaStyle:{ 	绘制线条对应的到x轴的区域面积color:'orange'},},{type:'line',stack:'all',	stack可以是任意值,则第二个图就会在第一个图的每个数据*2的高度上进行绘制,避免重叠}]

效果图:
在这里插入图片描述在这里插入图片描述
在这里插入图片描述在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

代码示例:
柱状图:

<template><div id="app"><div class='map'></div><!-- <router-view/> --></div>
</template><script>
import echarts from 'echarts';export default {name: 'App',mounted:function(){var myMap=echarts.init(document.querySelector('.map'));var xData=['张三','彭万里','高大山','谢大海','马宏宇','林莽','黄强辉','章汉夫']var yData=[88,92,63,77,94,80,72,86];var option = {xAxis:{type:'category',//类目轴data:xData //类目轴数据},yAxis:{type:'value'  //type='value'不需要设置data,会根据series中的数据显示},// xAxis:{//    type:'value'  //type='value'不需要设置data,会根据series中的数据显示// },// yAxis:{//   type:'category',//类目轴//   data:xData //类目轴数据// },series:[ {name:'成绩',type:'bar', //数据显示方式,bar柱状图data:yData,  //y轴数据和鼠标放上显示内容markPoint:{ //标记点,可以标记最大值和最小值以及任意点data:[{type:'max',name:'最大值',},{type:'min',name:'最小值'},{type:'average',name:'平均值'}]},markLine:{ //标注线data:[{type:'average',name:'平均值'}]},label:{ //数值标签show:true,  //每个柱显示y轴对应值rotate:60,position:'inside'},barWidth:40,}],tooltip:{trigger:'item'}};myMap.setOption(option);}
}
</script><style>
.map{height:500px;width:500px;
}
</style>

柱状图平移动画实现:

<template><div class='s-c'><div class='s-chart' ref='range'></div></div>
</template><script>export default {name:'trender',data(){return{myMap:null,data:[],startValue:0,endValue:9,timer:null}},mounted(){this._initChart();this._getData();window.onresize=this._resize;//第一次适配调用this._resize();},destroyed(){window.removeEventListener('resize',this._resize);clearInterval(this.timer);},methods:{_initChart(){this.myMap=this.$echarts.init(this.$refs.range,'chalk');const option={title: {text: '▎ 地区销售排行',left: 20,top: 20},grid: {top: '40%',left: '5%',right: '5%',bottom: '5%',containLabel: true},tooltip: {show: true},xAxis:{type:'category'},yAxis:{type:'value',splitLine:{  show:false},},series:[{type:'bar',}]};this.myMap.setOption(option);this._listen();},async _getData(){let res = await this.$axios.get('/api/rank');this.data=res.data;this.data.sort((a,b)=>{return b.value-a.value;})this._updateChart();},_updateChart(){const xData=this.data.map((item)=>{return item.name;})const yData=this.data.map((item)=>{return item.value;})const colorArr = [['#0BA82C', '#4FF778'],['#2E72BF', '#23E5E5'],['#5052EE', '#AB6EE5']]const option={xAxis:{data:xData},dataZoom:[{show:false,startValue:this.startValue,endValue:this.endValue}],series:[{data:yData,itemStyle:{color:e=>{let targetColorArr = nullif (e.value > 300) {targetColorArr = colorArr[0]} else if (e.value > 200) {targetColorArr = colorArr[1]} else {targetColorArr = colorArr[2]}return new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: targetColorArr[0]},{offset: 1,color: targetColorArr[1]}])}}}]};this.myMap.setOption(option);this._panMove();},_resize(){const container = this.$refs.range.offsetWidth;const titleFontSize=container/100*3.6const option={title:{textStyle:{fontSize:titleFontSize}},series:[{barWidth:titleFontSize,itemStyle:{barBorderRadius:[titleFontSize/2,titleFontSize/2,0,0]}}]};this.myMap.setOption(option);this.myMap.resize();},//定时器平移柱_panMove(){if(this.timer){clearInterval(this.timer);}this.timer=setInterval(()=>{this.startValue++;this.endValue++;if(this.endValue>this.data.length-1){this.startValue=0;this.endValue=9;}this._updateChart();},2000)},//监听移入移出_listen(){this.myMap.on('mouseover',()=>{clearInterval(this.timer);})this.myMap.on('mouseout',()=>{this._panMove();})}}}
</script><style lang='less' scoped>
.s-c{width: 100%;height:100%;.s-chart{width: 100%;height:100%;}
}
</style>

进度条效果柱状：

<template><div class="map" ref='bartech'>dd</div>
</template><script>export default {name:'bartech',data(){return{myMap:null}},mounted(){this._initMap();window.onresize=this._resize;},destroyed(){window.removeEventListener('resize',this._resize);},methods:{//0.25rem;_initMap(){this.myMap=this.$echarts.init(this.$refs.bartech);this._updataChart();   },_updataChart(){var data = [70, 34, 60, 78, 69];var titlename = ["HTML5", "CSS3", "javascript", "VUE", "NODE"];var valdata = [702, 350, 610, 793, 664];var myColor = ["#1089E7", "#F57474", "#56D0E3", "#F8B448", "#8B78F6"];let option={title:{text:'技能掌握',textStyle:{color:'white',fontWeight: 400},left:'center'},grid: {left: "0%",top: "30px",right: "0%",bottom: "4%",containLabel: true},xAxis:{type:'value',show:false,},yAxis:[{type:'category',inverse:true,data:titlename,splitLine:{show:false},axisLabel: {color: "#fff",rich: {lg: {backgroundColor: "#339911",color: "#fff",borderRadius: 15,// padding: 5,align: "center",width: 15,height: 15}}},axisTick: {show: false},axisLine: {show: false},},{show: true,inverse: true,data: valdata,axisLabel: {textStyle: {fontSize: 12,color: "#fff"}}}],series:[{type:'bar',data:data,barWidth: "35%",itemStyle: {barBorderRadius: 5},yAxisIndex:0,barCategoryGap: 50,label: {show: true,position: "inside",formatter: "{c}%"},itemStyle:{barBorderRadius: 20,color:function(params){var num=myColor.length;return myColor[params.dataIndex%num]}}},{type:'bar',data:[100, 100, 100, 100, 100],yAxisIndex: 1,barWidth:'50%',itemStyle:{color:'none',borderColor:"#00c1de",borderWidth: 3,barBorderRadius: 15}}]}this.myMap.setOption(option);},_resize(){this.myMap.resize();}}}
</script><style lang='less' scoped>
.map{height: 100%;width:100%;}
</style>

动态排序增长柱状图：

var data = [];
for (let i = 0; i < 5; ++i) {data.push(Math.round(Math.random() * 200));
}option = {xAxis: {max: 'dataMax',},yAxis: {type: 'category',data: ['A', 'B', 'C', 'D', 'E'],inverse: true,animationDuration: 300,animationDurationUpdate: 300,max: 2 // only the largest 3 bars will be displayed},series: [{realtimeSort: true,name: 'X',type: 'bar',data: data,label: {show: true,position: 'right',valueAnimation: true}}],legend: {show: true},animationDuration: 0,animationDurationUpdate: 3000,animationEasing: 'linear',animationEasingUpdate: 'linear'
};function run () {var data = option.series[0].data;for (var i = 0; i < data.length; ++i) {if (Math.random() > 0.9) {data[i] += Math.round(Math.random() * 2000);}else {data[i] += Math.round(Math.random() * 200);}}myChart.setOption(option);
}setTimeout(function() {run();
}, 0);
setInterval(function () {run();
}, 3000);

折线图:

<template><div id="app"><div class='map'></div><!-- <router-view/> --></div>
</template><script>
import echarts from 'echarts';export default {name: 'App',mounted:function(){var myMap=echarts.init(document.querySelector('.map'));var xData=['张三','彭万里','高大山','谢大海','马宏宇','林莽','黄强辉','章汉夫']var yData1=[88,92,63,77,94,80,72,86];var yData2=[80,90,60,70,90,70,62,76];var option = {title:{text:'标题显示',textStyle:{color:'red'},subtext:'副文本',subtarget:'blank',sublink:'https://www.baidu.com',borderWidth:10,left:40},xAxis:{type:'category',//类目轴data:xData, //类目轴数据boundaryGap:false,  //设置x第一个节点值,从y轴开始,默认有间距},yAxis:{type:'value',  //type='value'不需要设置data,会根据series中的数据显示scale:true,  //让y轴的值不从0开始splitNumber:5,  //坐标轴分割的段数,只是预估值,会根据实际值的可读程度而改变minInterval:5,  //坐标轴的最小刻度尺单位,会被splitNumber分割成的刻度而影响maxInterval: 5  //坐标轴的最大刻度尺单位,强制限定},// xAxis:{//    type:'value'  //type='value'不需要设置data,会根据series中的数据显示// },// yAxis:{//   type:'category',//类目轴//   data:xData //类目轴数据// },series:[ {name:'成绩',type:'line', //数据显示方式,bar柱状图data:yData1,  //y轴数据和鼠标放上显示内容stack:'all',  //stack可以是任意值,则第二个图就会在第一个图的每个数据*2的高度上进行绘制,避免重叠markPoint:{ //标记点,可以标记最大值和最小值以及任意点data:[{type:'max',name:'最大值',},{type:'min',name:'最小值'},{type:'average',name:'平均值'}]},markLine:{ //标注线data:[{type:'average',name:'平均值'}]},markArea:{ //标志指定区间阴影data: [[{name:'区间1',xAxis:'张三',},{xAxis: '彭万里',}],[{name: '60分到80分',yAxis: 60},{yAxis: 80}],]},smooth:true,lineStyle:{ //线条样式color:'purple',type:'dashed'},areaStyle:{ //绘制线条对应的到x轴的区域面积color:'orange'},label:{ //数值标签show:true,  //每个柱显示y轴对应值rotate:60,position:'inside'},barWidth:12,},{name:'其他',data:yData2,type:'line',stack:'all', label:{show:true}}],tooltip:{show:true,trigger:'axios',showContent:true,formatter: '{a}: {b}({c})' //自定义提示框显示内容},toolbox:{ //使视图带有导出图片，数据视图，动态类型切换，数据区域缩放，重置show:true,showTitle:true,feature:{ //开启功能saveAsImage:{}, //可以导出下载dataView:{},   //切换成数据视图restore:{},  //重置dataZoom:{},  //区域缩放magicType:{ //动态类型切换type:['bar','line']}   }},legend:{data:['成绩','其他成绩'],}};myMap.setOption(option);}
}
</script><style>
.map{height:500px;width:500px;
}
</style>

这篇关于echarts 柱状图(带柱平移动画、进度条效果柱状、动态增长排序)、折线图(曲线图)的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/494201。

相关文章

vue基于ElementUI动态设置表格高度的3种方法

vue基于ElementUI动态设置表格高度的3种方法

《vue基于ElementUI动态设置表格高度的3种方法》ElementUI+vue动态设置表格高度的几种方法,抛砖引玉,还有其它方法动态设置表格高度,大家可以开动脑筋... 方法一、css + js的形式这个方法需要在表格外层设置一个div，原理是将表格的高度设置成外层div的高度，所以外层的div需要
阅读更多...
大数据小内存排序问题如何巧妙解决

大数据小内存排序问题如何巧妙解决

《大数据小内存排序问题如何巧妙解决》文章介绍了大数据小内存排序的三种方法：数据库排序、分治法和位图法,数据库排序简单但速度慢,对设备要求高；分治法高效但实现复杂；位图法可读性差,但存储空间受限... 目录三种方法：方法概要数据库排序（http://www.chinasem.cn对数据库设备要求较高）分治法（常
阅读更多...
SpringBoot实现动态插拔的AOP的完整案例

SpringBoot实现动态插拔的AOP的完整案例

《SpringBoot实现动态插拔的AOP的完整案例》在现代软件开发中,面向切面编程（AOP）是一种非常重要的技术,能够有效实现日志记录、安全控制、性能监控等横切关注点的分离,在传统的AOP实现中,切... 目录引言一、AOP 概述1.1 什么是 AOP1.2 AOP 的典型应用场景1.3 为什么需要动态插
阅读更多...
Python中lambda排序的六种方法

Python中lambda排序的六种方法

《Python中lambda排序的六种方法》本文主要介绍了Python中使用lambda函数进行排序的六种方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们... 目录1.对单个变量进行排序2. 对多个变量进行排序3. 降序排列4. 单独降序1.对单个变量进行排序
阅读更多...
VUE动态绑定class类的三种常用方式及适用场景详解

VUE动态绑定class类的三种常用方式及适用场景详解

《VUE动态绑定class类的三种常用方式及适用场景详解》文章介绍了在实际开发中动态绑定class的三种常见情况及其解决方案,包括根据不同的返回值渲染不同的class样式、给模块添加基础样式以及根据设... 目录前言1.动态选择class样式（对象添加：情景一）2.动态添加一个class样式（字符串添加：情
阅读更多...
Python中实现进度条的多种方法总结

Python中实现进度条的多种方法总结

《Python中实现进度条的多种方法总结》在Python编程中,进度条是一个非常有用的功能,它能让用户直观地了解任务的进度,提升用户体验,本文将介绍几种在Python中实现进度条的常用方法,并通过代码... 目录一、简单的打印方式二、使用tqdm库三、使用alive-progress库四、使用progres
阅读更多...
SpringCloud配置动态更新原理解析

SpringCloud配置动态更新原理解析

《SpringCloud配置动态更新原理解析》在微服务架构的浩瀚星海中,服务配置的动态更新如同魔法一般,能够让应用在不重启的情况下,实时响应配置的变更,SpringCloud作为微服务架构中的佼佼者,... 目录一、SpringBoot、Cloud配置的读取二、SpringCloud配置动态刷新三、更新@R
阅读更多...
关于Java内存访问重排序的研究

关于Java内存访问重排序的研究

《关于Java内存访问重排序的研究》文章主要介绍了重排序现象及其在多线程编程中的影响,包括内存可见性问题和Java内存模型中对重排序的规则... 目录什么是重排序重排序图解重排序实验as-if-serial语义内存访问重排序与内存可见性内存访问重排序与Java内存模型重排序示意表内存屏障内存屏障示意表Int
阅读更多...
最好用的WPF加载动画功能

最好用的WPF加载动画功能

《最好用的WPF加载动画功能》当开发应用程序时,提供良好的用户体验（UX）是至关重要的,加载动画作为一种有效的沟通工具,它不仅能告知用户系统正在工作,还能够通过视觉上的吸引力来增强整体用户体验,本文给... 目录前言需求分析高级用法综合案例总结最后前言当开发应用程序时，提供良好的用户体验（UX）是至关重要
阅读更多...
基于Python实现PDF动画翻页效果的阅读器

基于Python实现PDF动画翻页效果的阅读器

《基于Python实现PDF动画翻页效果的阅读器》在这篇博客中,我们将深入分析一个基于wxPython实现的PDF阅读器程序,该程序支持加载PDF文件并显示页面内容,同时支持页面切换动画效果,文中有详... 目录全部代码代码结构初始化 UI 界面加载 PDF 文件显示 PDF 页面页面切换动画运行效果总结主
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2