利用echarts做堆积折线图

工作需要做堆积图和折线图的组合，比如总收入、收入分成交易和广告，同时还想看收入的环比，但是excel做起来比较麻烦，在此利用echarts可以方便实现
直接上代码：
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <!-- 这里是加载刚下好的echarts.min.js，注意路径 -->
    <script src="echarts.js"></script>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 1000px;height:600px;"></div>
    <script type="text/javascript">

        // 基于准备好的dom，初始化echarts实例
		
		var myChart = echarts.init(document.getElementById('main'));

        var	option ={
					tooltip : {
						trigger: 'axis'
					},
					toolbox: {
						show : true,
						feature : {
							mark : {show: true},
							dataView : {show: true, readOnly: false},
							magicType: {show: true, type: ['line', 'bar']},
							restore : {show: true},
							saveAsImage : {show: true}
						}
					},
					calculable : true,
					legend: {
						data:['总水量','蒸发量','降水量','平均温度']
					},
					xAxis : [
						{
							type : 'category',
							min: 0,
							data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
						}
					],
					yAxis : [
						{
							type : 'value',
							max: 500
						},
						{
							type : 'value',
							name : '温度',
							axisLabel : {
								formatter: '{value} °C'
							}
						}
					],
					series : [
						{
							name:'总水量',
							type:'bar',
							color:'green',
							data:[4.6, 10.8, 16.0, 49.6, 54.3, 147.4, 311.2, 344.4, 80.3, 38.8, 12.4, 5.6],
							 itemStyle: {
                        //柱形图圆角，鼠标移上去效果，如果只是一个数字则说明四个参数全部设置为那么多
							normal: {
								//柱形图圆角，初始化效果
								barBorderRadius:[5, 5, 5, 5],
								label: {
									show: true,//是否展示
									textStyle: {
										fontWeight:'bolder',
										fontSize : '12',
										fontFamily : '微软雅黑',
										show: true,
										color:'#333',
										fontWeight:'bold'
									}
								}
							}
						}
						},

						{
							name:'蒸发量',
							type:'bar',
							stack:'总水量',
							color:'#ff7f50',
							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],
							 itemStyle: {
                        //柱形图圆角，鼠标移上去效果，如果只是一个数字则说明四个参数全部设置为那么多
							normal: {
								//柱形图圆角，初始化效果
								barBorderRadius:[5, 5, 5, 5],
								label: {
									show: true,//是否展示
									textStyle: {
										fontWeight:'bolder',
										fontSize : '12',
										fontFamily : '微软雅黑',
										show: true,
										color:'#333',
										fontWeight:'bold'
									}
								}
							}
							}
						},
						{
							name:'降水量',
							type:'bar',
							stack:'总水量',
							color:'#B5C334',
							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],
							 itemStyle: {
                        //柱形图圆角，鼠标移上去效果，如果只是一个数字则说明四个参数全部设置为那么多
                        

								normal: {
									//柱形图圆角，初始化效果
									barBorderRadius:[5, 5, 5, 5],
									label: {
										show: true,//是否展示
										textStyle: {
											fontWeight:'bolder',
											fontSize : '12',
											fontFamily : '微软雅黑',
											show: true,
											color:'#333',
											fontWeight:'bold'
										}
									}
								} 
							}
						},
						{
							name:'平均温度',
							type:'line',
							yAxisIndex: 1,
							color:'#FCCE10',
							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]
						}
					]
				};


        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);

    </script>
</body>
</html>
利用echarts做堆积折线图

猜你喜欢
