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

相关文章

基于Canvas的Html5多时区动态时钟实战代码

《基于Canvas的Html5多时区动态时钟实战代码》:本文主要介绍了如何使用Canvas在HTML5上实现一个多时区动态时钟的web展示,通过Canvas的API,可以绘制出6个不同城市的时钟,并且这些时钟可以动态转动,每个时钟上都会标注出对应的24小时制时间,详细内容请阅读本文,希望能对你有所帮助...

Vue中动态权限到按钮的完整实现方案详解

《Vue中动态权限到按钮的完整实现方案详解》这篇文章主要为大家详细介绍了Vue如何在现有方案的基础上加入对路由的增、删、改、查权限控制,感兴趣的小伙伴可以跟随小编一起学习一下... 目录一、数据库设计扩展1.1 修改路由表(routes)1.2 修改角色与路由权限表(role_routes)二、后端接口设计

Vue项目的甘特图组件之dhtmlx-gantt使用教程和实现效果展示(推荐)

《Vue项目的甘特图组件之dhtmlx-gantt使用教程和实现效果展示(推荐)》文章介绍了如何使用dhtmlx-gantt组件来实现公司的甘特图需求,并提供了一个简单的Vue组件示例,文章还分享了一... 目录一、首先 npm 安装插件二、创建一个vue组件三、业务页面内 引用自定义组件:四、dhtmlx

前端 CSS 动态设置样式::class、:style 等技巧(推荐)

《前端CSS动态设置样式::class、:style等技巧(推荐)》:本文主要介绍了Vue.js中动态绑定类名和内联样式的两种方法:对象语法和数组语法,通过对象语法,可以根据条件动态切换类名或样式;通过数组语法,可以同时绑定多个类名或样式,此外,还可以结合计算属性来生成复杂的类名或样式对象,详细内容请阅读本文,希望能对你有所帮助...

Nginx实现动态封禁IP的步骤指南

《Nginx实现动态封禁IP的步骤指南》在日常的生产环境中,网站可能会遭遇恶意请求、DDoS攻击或其他有害的访问行为,为了应对这些情况,动态封禁IP是一项十分重要的安全策略,本篇博客将介绍如何通过NG... 目录1、简述2、实现方式3、使用 fail2ban 动态封禁3.1 安装 fail2ban3.2 配

Vue3中的动态组件详解

《Vue3中的动态组件详解》本文介绍了Vue3中的动态组件,通过`component:is=动态组件名或组件对象/component`来实现根据条件动态渲染不同的组件,此外,还提到了使用`markRa... 目录vue3动态组件动态组件的基本使用第一种写法第二种写法性能优化解决方法总结Vue3动态组件动态

Android 悬浮窗开发示例((动态权限请求 | 前台服务和通知 | 悬浮窗创建 )

《Android悬浮窗开发示例((动态权限请求|前台服务和通知|悬浮窗创建)》本文介绍了Android悬浮窗的实现效果,包括动态权限请求、前台服务和通知的使用,悬浮窗权限需要动态申请并引导... 目录一、悬浮窗 动态权限请求1、动态请求权限2、悬浮窗权限说明3、检查动态权限4、申请动态权限5、权限设置完毕后

前端原生js实现拖拽排课效果实例

《前端原生js实现拖拽排课效果实例》:本文主要介绍如何实现一个简单的课程表拖拽功能,通过HTML、CSS和JavaScript的配合,我们实现了课程项的拖拽、放置和显示功能,文中通过实例代码介绍的... 目录1. 效果展示2. 效果分析2.1 关键点2.2 实现方法3. 代码实现3.1 html部分3.2

Spring排序机制之接口与注解的使用方法

《Spring排序机制之接口与注解的使用方法》本文介绍了Spring中多种排序机制,包括Ordered接口、PriorityOrdered接口、@Order注解和@Priority注解,提供了详细示例... 目录一、Spring 排序的需求场景二、Spring 中的排序机制1、Ordered 接口2、Pri

Java使用POI-TL和JFreeChart动态生成Word报告

《Java使用POI-TL和JFreeChart动态生成Word报告》本文介绍了使用POI-TL和JFreeChart生成包含动态数据和图表的Word报告的方法,并分享了实际开发中的踩坑经验,通过代码... 目录前言一、需求背景二、方案分析三、 POI-TL + JFreeChart 实现3.1 Maven