echarts(三)折线柱状图

最新推荐文章于 2024-05-21 20:58:30 发布

Todd0517

最新推荐文章于 2024-05-21 20:58:30 发布

阅读量2k

点赞数

分类专栏： echarts

本文链接：https://blog.csdn.net/oSunXu/article/details/77981546

版权

echarts 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

折线柱状图的使用以官网中的例子为例，学习下基本属性。感觉echarts3文档写的真是特别清楚，直接拿来就能用，太简单了。

文档配置官网：

http://echarts.baidu.com/option.html#title

<body>
	<div>
		<div id="bar" style="height:500px; width:800px">  			
		</div>				
	</div>
	
</body>
<!-- 需要引用的JS -->
<script type="text/javascript" src="static/js/jquery.min.js"></script>
<script type="text/javascript" src="static/echarts/echarts.min.js"></script>

<script type="text/javascript">
	$(function(){
		showBar();					
	});

	function showBar(){
		title = '多 Y 轴示例';
		var colors = ['#5793f3', '#d14a61', '#675bba'];
		option = {
			color: colors,
		
			tooltip: {//提示框鼠标放轴上的时候显示，默认不显示配置以下属性可显示
				trigger: 'axis',//x轴触发
				axisPointer: {//坐标轴指示器配置项
					type: 'cross'
				}
			},
			grid: {
				right: '20%'
			},
			toolbox: {
				feature: {
					dataView: {show: true, readOnly: false},
					restore: {show: true},
					saveAsImage: {show: true}
				}
			},
			legend: {
				data:['蒸发量','降水量','平均温度']
			},
			xAxis: [
				{
					type: 'category',//value数值轴'category' 类目轴'time' 时间轴'log' 对数轴
					axisTick: {//坐标轴刻度相关设置。
						alignWithLabel: true
					},
					data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
				}
			],
			yAxis: [//多个y轴
				{
					type: 'value',
					name: '蒸发量',
					min: 0,//最小刻度
					max: 250,//最大刻度
					position: 'right',
					axisLine: {
						lineStyle: {
							color: colors[0]
						}
					},
					axisLabel: {
						formatter: '{value} ml'
					}
				},
				{
					type: 'value',
					name: '降水量',
					min: 0,
					max: 250,
					position: 'right',
					offset: 100,//偏移量
					axisLine: {
						lineStyle: {
							color: colors[1]
						}
					},
					axisLabel: {
						formatter: '{value} ml'
					}
				},
				{
					type: 'value',
					name: '温度',
					min: 0,
					max: 25,
					position: 'left',
					axisLine: {
						lineStyle: {
							color: colors[2]
						}
					},
					axisLabel: {
						formatter: '{value} °C'
					}
				}
			],
			series: [//顺序和yAxis对应
				{
					name:'蒸发量',
					type:'bar',
					data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
				},
				{
					name:'降水量',
					type:'bar',
					yAxisIndex: 1,//使用的 y 轴的 index，默认为0
					data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
				},
				{
					name:'平均温度',
					type:'line',
					yAxisIndex: 2,
					data:[2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
				}
			]
		};
			var chart = echarts.init(document.getElementById('bar'));
			chart.setOption(option);
	}
		
</script>

官网例子显示：

我们项目中使用代码：

function initBorthAndDeath(){
	var option = {
	    tooltip: {
	        trigger: 'axis',
	        axisPointer: {
	            type: 'cross',
	            crossStyle: {
	                color: '#999'
	            }
	        }
	    },
	    legend: {
	    	left:'right',
	    	top:'middle',
	    	orient:'vertical',
	        data:['出生人数','死亡人数'],
	        textStyle: {
 	        	color: '#ccc'
 	        }
	    },
	    xAxis: [
	        {
	            type: 'category',
	            data: [],
	            axisPointer: {
	                type: 'shadow'
	            },
	            axisLabel: {
		        	show: true,
		        	textStyle: {
		        		color: '#666'
		        	}
		        },
		        axisTick: {
		        	show: false
		        },
 	        	splitLine : {show: false}
	        }
	    ],
	    yAxis: [
	        {
	            type: 'value',
	            name: '人数',
	             nameTextStyle:{
		        	color: '#666'		        	
		        },
	            min: 0,
	            axisLabel: {
	                formatter: '{value}',
	                textStyle: {
		        		color: '#ccc'
		        	}
	            },axisTick: {
		        	show: false
		        },
 	        	splitLine : {show: false}
	        },
	        {
	            type: 'value',
	            name: '增长率',
	            nameTextStyle:{
		        	color: '#666'		        	
		        },
	            axisLabel: {
	                formatter: '{value}%',
	                textStyle: {
		        		color: '#ccc'
		        	}
	            },
	            axisTick: {
		        	show: false
		        },
 	        	splitLine : {show: false}
	        }
	    ],
	    grid: [
        	{
            	top: '15%',
		    	left: '8%',
		    	right: '20%',
		    	bottom: '18%'
    	    }
        ],
	    series: [
	        {
	            name:'出生人数',
	            type:'bar',
	            barWidth:'15%',
	            itemStyle: {
	                normal: {
	                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
	                        offset: 0,
	                        color: 'rgb(98,238,21)'
	                    }, {
	                        offset: 1,
	                        color: 'rgb(16,168,12)' 
	                    }])
	                }
	            },
	            data:[]
	        },
	        {
	            name:'死亡人数',
	            type:'bar',
	            barWidth:'15%',
	            itemStyle: {
	                normal: {
	                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
	                        offset: 0,
	                        color: 'rgb(11,233,247)'
	                    }, {
	                        offset: 1,
	                        color: 'rgb(4,88,226)'
	                    }])
	                }
	            },
	            data:[]
	        },
	        {
	            name:'出生增长率',
	            type:'line',
	            yAxisIndex: 1,
	            itemStyle: {
	            	normal:{
	            		color:'#66fb1c'
	            	}
	            },
	            data:[]
	        },
	        {
	            name:'死亡增长率',
	            type:'line',
	            yAxisIndex: 1,
	            itemStyle: {
	            	normal:{
	            		color:'#0477e3'
	            	}
	            },
	            data:[]
	        }
	    ]
	};
	var chart = echarts.init(document.getElementById('cssw'));
	var date = new Date();
	var year = date.getFullYear();
	//人口总数以及人口增长率
	$.ajax({
		async:true,
		url:DEFAULT_CONTEXT_PATH+"/console/chart/borthChart",
		data:{regionCode:regionCode,endTime:year-1,startTime:year-5},
		dataType:"json",
		type:"POST",
		success:function(data){
			option.xAxis[0].data = data.rowList;
			var index = 5;
			var borth = [];
			var addBorth = [];
			$.each(data.data,function(i,item){
				if(i<=5){
					if(i>0){
						borth.push(item.total);
						addBorth.push(item.add);
					}
				}else{
					return;
				}
			})
			option.series[0].data = borth;
			option.series[2].data = addBorth;
			//死亡人口以及死亡人口增长率
			$.ajax({
				async:true,
				url:DEFAULT_CONTEXT_PATH+"/console/chart/deathChart",
				data:{regionCode:regionCode,endTime:year-1,startTime:year-5},
				dataType:"json",
				type:"POST",
				success:function(data){
					option.xAxis[0].data = data.rowList;
					var index = 5;
					var death = [];
					var add = [];
					$.each(data.data,function(i,item){
						if(i<=5){
							if(i>0){
								death.push(item.total);
								add.push(item.add);
							}
						}else{
							return;
						}
					})
					option.series[1].data = death;
					option.series[3].data = add;
					chart.setOption(option);
				}
			});
		}
	});
}

效果展示：

Todd0517

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
echarts(三)折线柱状图

折线柱状图的使用以官网中的例子为例，学习下基本属性。感觉echarts3文档写的真是特别清楚，直接拿来就能用，太简单了。文档配置官网：http://echarts.baidu.com/option.html#title $(function(){ showBar(); }); function showBa
复制链接

扫一扫

专栏目录