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。

相关文章

Java调用C#动态库的三种方法详解

Java调用C#动态库的三种方法详解

《Java调用C#动态库的三种方法详解》在这个多语言编程的时代,Java和C#就像两位才华横溢的舞者,各自在不同的舞台上展现着独特的魅力,然而,当它们携手合作时,又会碰撞出怎样绚丽的火花呢？今天,我们... 目录方法1：C++/CLI搭建桥梁——Java ↔ C# 的“翻译官”步骤1：创建C#类库（.NET
阅读更多...
MyBatis编写嵌套子查询的动态SQL实践详解

MyBatis编写嵌套子查询的动态SQL实践详解

《MyBatis编写嵌套子查询的动态SQL实践详解》在Java生态中,MyBatis作为一款优秀的ORM框架,广泛应用于数据库操作,本文将深入探讨如何在MyBatis中编写嵌套子查询的动态SQL,并结... 目录一、Myhttp://www.chinasem.cnBATis动态SQL的核心优势1. 灵活性与可
阅读更多...
Mybatis嵌套子查询动态SQL编写实践

Mybatis嵌套子查询动态SQL编写实践

《Mybatis嵌套子查询动态SQL编写实践》：本文主要介绍Mybatis嵌套子查询动态SQL编写方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录前言一、实体类1、主类2、子类二、Mapper三、XML四、详解总结前言MyBATis的xml文件编写动态SQL
阅读更多...
SpringBoot实现Kafka动态反序列化的完整代码

SpringBoot实现Kafka动态反序列化的完整代码

《SpringBoot实现Kafka动态反序列化的完整代码》在分布式系统中,Kafka作为高吞吐量的消息队列,常常需要处理来自不同主题（Topic）的异构数据,不同的业务场景可能要求对同一消费者组内的... 目录引言一、问题背景1.1 动态反序列化的需求1.2 常见问题二、动态反序列化的核心方案2.1 ht
阅读更多...
Kotlin Compose Button 实现长按监听并实现动画效果(完整代码)

Kotlin Compose Button 实现长按监听并实现动画效果(完整代码)

《KotlinComposeButton实现长按监听并实现动画效果(完整代码)》想要实现长按按钮开始录音,松开发送的功能,因此为了实现这些功能就需要自己写一个Button来解决问题,下面小编给大... 目录Button 实现原理1. Surface 的作用（关键）2. InteractionSource3.
阅读更多...
golang实现动态路由的项目实践

golang实现动态路由的项目实践

《golang实现动态路由的项目实践》本文主要介绍了golang实现动态路由项目实践,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习... 目录一、动态路由1.结构体（数据库的定义）2.预加载preload3.添加关联的方法一、动态路由1
阅读更多...
Java List排序实例代码详解

Java List排序实例代码详解

《JavaList排序实例代码详解》：本文主要介绍JavaList排序的相关资料,Java排序方法包括自然排序、自定义排序、Lambda简化及多条件排序,实现灵活且代码简洁,文中通过代码介绍的... 目录一、自然排序二、自定义排序规则三、使用 Lambda 表达式简化 Comparator四、多条件排序五、
阅读更多...
JAVA数组中五种常见排序方法整理汇总

JAVA数组中五种常见排序方法整理汇总

《JAVA数组中五种常见排序方法整理汇总》本文给大家分享五种常用的Java数组排序方法整理,每种方法结合示例代码给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧... 目录前言：法一：Arrays.sort()法二：冒泡排序法三：选择排序法四：反转排序法五：直接插入排序前言：几种常用的Java数组排序
阅读更多...
使用Vue-ECharts实现数据可视化图表功能

使用Vue-ECharts实现数据可视化图表功能

《使用Vue-ECharts实现数据可视化图表功能》在前端开发中,经常会遇到需要展示数据可视化的需求,比如柱状图、折线图、饼图等,这类需求不仅要求我们准确地将数据呈现出来,还需要兼顾美观与交互体验,所... 目录前言为什么选择 vue-ECharts？1. 基于 ECharts，功能强大2. 更符合 Vue
阅读更多...
使用WPF实现窗口抖动动画效果

使用WPF实现窗口抖动动画效果

《使用WPF实现窗口抖动动画效果》在用户界面设计中,适当的动画反馈可以提升用户体验,尤其是在错误提示、操作失败等场景下,窗口抖动作为一种常见且直观的视觉反馈方式,常用于提醒用户注意当前状态,本文将详细... 目录前言实现思路概述核心代码实现1、 获取目标窗口2、初始化基础位置值3、创建抖动动画4、动画完成后
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2