基于ECharts.js的条形和折线混合统计图

最新推荐文章于 2024-05-22 09:57:12 发布

chengpiaoliang

最新推荐文章于 2024-05-22 09:57:12 发布

阅读量1.1k

点赞数

文章标签：数据可视化(ECharts)

本文链接：https://blog.csdn.net/yangchuangxyz/article/details/80246424

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div class="mui-input-group" id="chart_l">
			<div class="mui-content-padded">
				<p class="chart-a" style="float: left;margin-top: 0.3rem;">
					全县统计
					<span style="font-size: 0.22rem;color: #ACACB4">(近一年)</span>					
				</p>
				<p class="chart-a" style="float: right;margin-right: 0.2rem;margin-top: 0.3rem;">
					<a style="display: inline-block;width: 25px;height: 4px;border-radius: 10px;background-color: #18abf1;margin-right: 5px;"></a><span>人数</span>
					<a style="display: inline-block;width: 25px;height: 4px;border-radius: 10px;background-color: #FF8C00;margin-right: 5px"></a><span>金额</span>
				</p>
				<div id="chart" style="width: 95%;height: 200px;"></div>
			</div>		
		</div>		
	<script src="../js/echarts-all.js"></script>
	<script>
	months = [1,2,3,4,5,6,7,8,9,10,11,12];
	people = [10,35,50,80,60,90,100,155,195,190,145,140];
	money = [190,190,1000,150,1455,2345,895,790,560,900,785,125];
	Max_money = Math.max.apply(null,money);
	Max_people = Math.max.apply(null,people);
	Max_money = Math.ceil(Max_money/100)*100;
	Max_people = Math.max.apply(null,people);
	  chart(money,people,months,Max_money,Max_people);
	  function chart(money,people,months,Max_money,Max_people)
	    {
		  	var getOption = function(chartType1,chartType2) {   //分别对应下面的bar(条形),line(折线)
            var chartOption={
             tooltip: {   //鼠标悬浮交互时的信息提示
			      trigger: 'axis',
			      axisPointer: {
	                type: 'cross',
	                crossStyle: {
	                    color: '#999'
	                }
                  }
			     },
			 grid: {      //直角坐标系内绘图网格
					x: 45,   
					x2:40,	 
					y: 25,	 
					y2: 25,	 
					borderWidth:0
			     },
			 toolbox: {
				 show: false,					
			     },
			 calculable: true,   //是否启用拖拽重计算特性
			 xAxis: [{   //横坐标
					type: 'category',
					data: months,
					axisLine: {show: false},   //坐标轴线，默认显示且带样式
			        axisTick: {show: false},   //坐标轴小标记，数值轴和时间轴默认不显示，类目轴默认显示
			         splitLine:{ 
	                      show:false 
	                   },
			     }],
			 yAxis: [{	   //纵坐标
			 	    name:"元",
					type: 'value',
					nameTextStyle:{color:"#ccc"},
					min:0,
					max:Max_money,
					axisLine: {lineStyle:{width:0}},
					axisLabel:{formatter: '{value}'},   //坐标轴文本标签选项
				 },
				 {
				 	name:"人",
		            type : 'value',
		            nameTextStyle:{color:"#ccc"},
		            min:0,
					max:Max_people,
		            axisLine: {lineStyle:{width:0}}, //坐标轴线的样式
		            axisLabel : {formatter: '{value}'},
		        }
			],
			series: [{
                name:"人数",		//人数采用圆角矩形			
				type: chartType1,
				yAxisIndex: 1,
				barWidth : 8,
				data: people,
				 itemStyle:{
		        	 normal: {
		        	 	color:'#18abf1',
	                     //柱形图圆角，初始化效果
	                    barBorderRadius:20,
	                    label: {
	                        show: false,//是否展示数据
	                    },                   
                  }
	            }
			}, {
				name: '金额',		//金额采用	折线		
				type: chartType2,
				  symbol:'none',  //去掉折线小圆点
		         smooth:true,
				data: money,
				 itemStyle:{
		        	normal:{
		        		lineStyle:{color:'#FF8C00'}
		        	}
		        }
			}]
		};
	return chartOption;
	};
	var byId = function(id) {
	    return document.getElementById(id);
    };
	var barChart = echarts.init(byId('chart'));   //将其显示到页面上
	barChart.setOption(getOption('bar','line'));
}         				
	</script>
	</body>
</html>

chengpiaoliang

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
基于ECharts.js的条形和折线混合统计图

&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;div class="mui-input-group&q
复制链接

扫一扫