Echarts柱状图叠加、重合

柱状图叠加series-stack属性，只要两组数据的stack属性相同，就会叠加显示。效果如下：代码如下：<!DOCTYPE html><html><head><meta charset="utf-8"><title>EChartsTest</title><!--...

leo_qiu_s

19734人浏览 · 2019-08-13 16:07:45

leo_qiu_s · 2019-08-13 16:07:45 发布

柱状图叠加

series-stack属性，只要两组数据的stack属性相同，就会叠加显示。

效果如下：

代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>EChartsTest</title>
    <!-- 引入 echarts.js -->
	<script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js"></script>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 1000px;height:400px;border:2px solid #000"></div>
	
	<script type = "text/javascript" >

	// 基于准备好的dom，初始化echarts实例
	var myChart = echarts.init(document.getElementById('main'));
	var xAxis = ["06.01", "06.02", "06.03", "06.04", "06.05", "06.06", "06.07", "06.08", "06.09", "06.10", "06.11", "06.12"];
	var legend = ['总数', '响应时间', '接单时间', '评价得分'];
	var total = [2, 5, 4, 3, 6, 5, 4, 1, 10, 3, 4, 20];
	var res = [2.0, 2.2, 3.3, 3.5, 5.3, 7, 8, 9, 9.0, 6.5, 7.0, 16];
	var order = [3.0, 3.3, 3.3, 4.5, 6.3, 10, 9.3, 7.4, 8.0, 6.5, 3.0, 6.3];
	var score = [3.0, 3.3, 5, 4.5, 4.3, 3.3, 4.3, 3.4, 3.0, 4.5, 4.0, 4.3]

	var option = {
		//默认色板
		color: ['#dd3ee5', '#12e78c', '#fe8104'],
		//标题，可以自定义标题的位置和样式
		title: {
			//text: '服务指标'
		},
		//鼠标hover提示框
		tooltip: {
			trigger: 'axis', //触发类型；轴触发，axis则鼠标hover到一条柱状图显示全部数据，item则鼠标hover到折线点显示相应数据，
			axisPointer: { //坐标轴指示器，坐标轴触发有效，
				type: 'cross', //默认为line，line直线，cross十字准星，shadow阴影
				crossStyle: {
					color: '#fff'
				}
			}
		},

		//图例
		legend: {
			data: legend, //注意：图例的名字必须跟下面series数组里面的name一致
			itemHeight: 9, //改变圆圈大小
			icon: "circle",
			textStyle: {
				color: '#B0CEFC' // 图例文字颜色
			}
		},
		//直角坐标系内绘图网格，设置表格显示区域
		grid: {
			x: 38, //图表左上角到左边界的距离
			y: 38, //图表左上角到上边界的距离
			x2: 65, //图表右下角到右边界的距离
			y2: 26, // 图表右下角到下边界的距离
		},
		xAxis: [{
				type: 'category', //轴类型，横轴默认为类目型'category'，纵轴默认为数值型'value'，
				data: xAxis,
				axisPointer: { //坐标轴指示器
					type: 'shadow' //在tooltip的cross基础上，增加阴影类型的X轴指示器
				},
				//坐标轴文字标签
				axisLabel: {
					show: true, //如果为false，则X轴不显示文字标签
					textStyle: {
						color: '#B0CEFC',
					}
				},
			},
		],
		yAxis: [
			//第一个Y轴
			{
				position: 'left',
				type: 'value', //轴类型，横轴默认为类目型'category'，纵轴默认为数值型'value'，
				name: '(分值)分支分支',
				min: 0, //Y轴最小值
				max: 5, //Y轴最大值
				interval: 1, //Y轴间隔
				//坐标轴文本样式，nameTextStyle和axisLabel区别是，前者管坐标轴顶端文字（坐标轴标题），或者管轴上断点的文字标签
				nameTextStyle: {
					align: 'right',
					color: '#B0CEFC',
					padding: 10 //内边距
				},
				//坐标轴文字标签
				axisLabel: {
					show: true,
					textStyle: {
						color: '#B0CEFC',
					}
				},
				//坐标轴线
				axisLine: {
					show: true
				},
				//分割线/网格样式
				splitLine: {
					show: true,
					lineStyle: {
						color: ['#14364f', '#11233c', '#122b44', '#14314a', '#102c42'],
						width: 1,
						type: 'solid' //实心，solid | dotted | dashed，
					}
				}
			},
			//第二个Y轴
			{
				position: 'right',
				type: 'value',
				name: '      (分钟)',
				nameTextStyle: {
					color: '#B0CEFC',
					padding: 10
				},
				axisLabel: {
					show: true,
					textStyle: {
						color: '#B0CEFC',
					}
				},
				axisLine: {
					show: false
				},
				//分割线/网格
				splitLine: {
					show: true, //是否显示网格
					lineStyle: {
						color: ['blue'],
						width: 1,
						type: 'dotted'
					}
				}
			},
			//第三个Y轴在左边，距离第一个Y轴50像素
			{
				show: false,
				position: 'left',
				offset: 35, //距离第一个Y轴50像素，注意grid: x=85，给第三个Y轴预留空间
				type: 'value',
				name: '(总数)      ',
				//不设置min、max、interval，坐标浮动处理
				nameTextStyle: { //坐标轴文字样式
					color: '#B0CEFC',
					padding: 10
				},
				axisLabel: {
					show: true,
					textStyle: {
						color: '#B0CEFC',
					}
				},
				//坐标轴线
				axisLine: {
					show: false
				},
				//分割线
				splitLine: {
					show: false,
				}
			}
		],
		series: [{
				stack: '1',  //随便取个名字，只要两组数据的stack值相同即可。
				name: '总数',
				data: total,
				type: 'bar', //数据表现形式（bar为柱形图，line为折线图）
				yAxisIndex: 2, //选择index为2的Y轴作为参考系
				barWidth: 12, //柱图宽度 
				color: new echarts.graphic.LinearGradient(0, 1, 0, 0, 
                	[{offset: 0,color: '#3F77FE'}, //旧色板：紫色d223e7-f376e0 蓝色4962FC-768BFF 鹅黄色FF5C01-FD9E06 蓝色二 3F77FE-02CBF9
                	 {offset: 1,color: '#02CBF9'}] //新色板：蓝色4962FC-189CBF 绿色18D070-12ED93 
				),									//createChart图例色板：紫色dd3ee5  绿色12e78c  橙色fe8104 青色 01C2F9 暗蓝色4962FC 亮蓝色 4B7CF3
				//图形样式							//橙色图例色板：亮黄色 F4CB29 暗黄色 FD9E06 
				itemStyle: {
					normal: {
						//柱形图圆角，初始化效果
						barBorderRadius: [10, 10, 10, 10],
					}
				},
				//标签：顶部显示柱状图数值
				label: {
					normal: {
						show: true,
						position: 'top',
						formatter: '{c}',
						textStyle: {
							fontSize: 16,
							color: '#B0CEFC'
						}
					}
				}
			}, {
				stack: '1',
				name: '响应时间',
				type: 'bar', //数据表现形式（bar为柱形图，line为折线图）
				yAxisIndex: 1, //选择index为1的Y轴作为参考系
				data: res,
				barWidth: 12, //柱图宽度 
				//线条样式，如折线图
				itemStyle: {
					normal: {
						//柱形图圆角，初始化效果
						barBorderRadius: [10, 10, 10, 10],
					}
				},
			}, {
				name: '接单时间',
				type: 'line',
				yAxisIndex: 1, //选择index为1的Y轴作为参考系
				data: order,
				lineStyle: {
					normal: {
						color: "#12e78c"
					}
				}
			}, {
				name: '评价得分',
				type: 'line',
				yAxisIndex: 0, //选择index为0的Y轴作为参考系
				data: score,
				lineStyle: {
					normal: {
						color: "#fe8104"
					}
				}
			}
		]
	};

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

	</script >
	
</body>
</html>

柱状图重合

思路：设置两个X轴，一组数据默认参考xAxisIndex:0，另一组数据默认参考xAxisIndex:1，实现叠加效果，

效果展示：

代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>EChartsTest</title>
    <!-- 引入 echarts.js -->
	<script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js"></script>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 1000px;height:400px;border:2px solid #000"></div>
	
	<script type = "text/javascript" >

	// 基于准备好的dom，初始化echarts实例
	var myChart = echarts.init(document.getElementById('main'));
	var xAxis = ["06.01", "06.02", "06.03", "06.04", "06.05", "06.06", "06.07", "06.08", "06.09", "06.10", "06.11", "06.12"];
	var legend = ['总数', '响应时间', '接单时间', '评价得分'];
	var total = [2, 5, 4, 13, 6, 7, 14, 18, 10, 13, 14, 15];
	var res = [2.0, 2.2, 1.5, 3.5, 0.5, 2, 3, 2, 1.5, 2.5, 3.0, 4];
	var order = [3.0, 3.3, 3.3, 4.5, 6.3, 10, 9.3, 7.4, 8.0, 6.5, 3.0, 6.3];
	var score = [3.0, 3.3, 5, 4.5, 4.3, 3.3, 4.3, 3.4, 3.0, 4.5, 4.0, 4.3]

	var option = {
		//默认色板
		color: ['#dd3ee5', '#12e78c', '#fe8104'],
		//标题，可以自定义标题的位置和样式
		title: {
			//text: '服务指标'
		},
		//鼠标hover提示框
		tooltip: {
			trigger: 'axis', //触发类型；轴触发，axis则鼠标hover到一条柱状图显示全部数据，item则鼠标hover到折线点显示相应数据，
			axisPointer: { //坐标轴指示器，坐标轴触发有效，
				type: 'cross', //默认为line，line直线，cross十字准星，shadow阴影
				crossStyle: {
					color: '#fff'
				}
			}
		},

		//图例
		legend: {
			data: legend, //注意：图例的名字必须跟下面series数组里面的name一致
			itemHeight: 9, //改变圆圈大小
			icon: "circle",
			textStyle: {
				color: '#B0CEFC' // 图例文字颜色
			}
		},
		//直角坐标系内绘图网格，设置表格显示区域
		grid: {
			x: 38, //图表左上角到左边界的距离
			y: 38, //图表左上角到上边界的距离
			x2: 65, //图表右下角到右边界的距离
			y2: 26, // 图表右下角到下边界的距离
		},
		xAxis: [
			{
				type: 'category', //轴类型，横轴默认为类目型'category'，纵轴默认为数值型'value'，
				data: xAxis,
				axisPointer: { //坐标轴指示器
					type: 'shadow' //在tooltip的cross基础上，增加阴影类型的X轴指示器
				},
				//坐标轴文字标签
				axisLabel: {
					show: true, //如果为false，则X轴不显示文字标签
					textStyle: {
						color: '#B0CEFC',
					}
				},
			},{
				show: false,
				type: 'category', //轴类型，横轴默认为类目型'category'，纵轴默认为数值型'value'，
				data: xAxis,
				axisPointer: { //坐标轴指示器
					type: 'shadow' //在tooltip的cross基础上，增加阴影类型的X轴指示器
				},
				//坐标轴文字标签
				axisLabel: {
					show: true, //如果为false，则X轴不显示文字标签
					textStyle: {
						color: '#B0CEFC',
					}
				},
			}
			
		],
		yAxis: [
			//第一个Y轴
			{
				position: 'left',
				type: 'value', //轴类型，横轴默认为类目型'category'，纵轴默认为数值型'value'，
				name: '(分值)分支分支',
				min: 0, //Y轴最小值
				max: 5, //Y轴最大值
				interval: 1, //Y轴间隔
				//坐标轴文本样式，nameTextStyle和axisLabel区别是，前者管坐标轴顶端文字（坐标轴标题），或者管轴上断点的文字标签
				nameTextStyle: {
					align: 'right',
					color: '#B0CEFC',
					padding: 10 //内边距
				},
				//坐标轴文字标签
				axisLabel: {
					show: true,
					textStyle: {
						color: '#B0CEFC',
					}
				},
				//坐标轴线
				axisLine: {
					show: true
				},
				//分割线/网格样式
				splitLine: {
					show: true,
					lineStyle: {
						color: ['#14364f', '#11233c', '#122b44', '#14314a', '#102c42'],
						width: 1,
						type: 'solid' //实心，solid | dotted | dashed，
					}
				}
			},
			//第二个Y轴
			{
				position: 'right',
				type: 'value',
				name: '      (分钟)',
				nameTextStyle: {
					color: '#B0CEFC',
					padding: 10
				},
				axisLabel: {
					show: true,
					textStyle: {
						color: '#B0CEFC',
					}
				},
				axisLine: {
					show: false
				},
				//分割线/网格
				splitLine: {
					show: true, //是否显示网格
					lineStyle: {
						color: ['blue'],
						width: 1,
						type: 'dotted'
					}
				}
			},
			//第三个Y轴在左边，距离第一个Y轴50像素
			{
				show: false,
				position: 'left',
				offset: 35, //距离第一个Y轴50像素，注意grid: x=85，给第三个Y轴预留空间
				type: 'value',
				name: '(总数)      ',
				//不设置min、max、interval，坐标浮动处理
				nameTextStyle: { //坐标轴文字样式
					color: '#B0CEFC',
					padding: 10
				},
				axisLabel: {
					show: true,
					textStyle: {
						color: '#B0CEFC',
					}
				},
				//坐标轴线
				axisLine: {
					show: false
				},
				//分割线
				splitLine: {
					show: false,
				}
			}
		],
		series: [{
				name: '总数',
				data: total,
				type: 'bar', //数据表现形式（bar为柱形图，line为折线图）
				yAxisIndex: 2, //选择index为2的Y轴作为参考系
				barWidth: 12, //柱图宽度 
				color: new echarts.graphic.LinearGradient(0, 1, 0, 0, 
                	[{offset: 0,color: '#3F77FE'}, //旧色板：紫色d223e7-f376e0 蓝色4962FC-768BFF 鹅黄色FF5C01-FD9E06 蓝色二 3F77FE-02CBF9
                	 {offset: 1,color: '#02CBF9'}] //新色板：蓝色4962FC-189CBF 绿色18D070-12ED93 
				),									//createChart图例色板：紫色dd3ee5  绿色12e78c  橙色fe8104 青色 01C2F9 暗蓝色4962FC 亮蓝色 4B7CF3
				//图形样式							//橙色图例色板：亮黄色 F4CB29 暗黄色 FD9E06 
				itemStyle: {
					normal: {
						//柱形图圆角，初始化效果
						barBorderRadius: [10, 10, 10, 10],
					}
				},
				//标签：顶部显示柱状图数值
				label: {
					normal: {
						show: true,
						position: 'top',
						formatter: '{c}',
						textStyle: {
							fontSize: 16,
							color: '#B0CEFC'
						}
					}
				}
			}, {
				xAxisIndex: 1,
				name: '响应时间',
				type: 'bar', //数据表现形式（bar为柱形图，line为折线图）
				yAxisIndex: 1, //选择index为1的Y轴作为参考系
				data: res,
				barWidth: 12, //柱图宽度 
				//线条样式，如折线图
				itemStyle: {
					normal: {
						//柱形图圆角，初始化效果
						barBorderRadius: [10, 10, 10, 10],
					}
				},
			}, {
				name: '接单时间',
				type: 'line',
				yAxisIndex: 1, //选择index为1的Y轴作为参考系
				data: order,
				lineStyle: {
					normal: {
						color: "#12e78c"
					}
				}
			}, {
				name: '评价得分',
				type: 'line',
				yAxisIndex: 0, //选择index为0的Y轴作为参考系
				data: score,
				lineStyle: {
					normal: {
						color: "#fe8104"
					}
				}
			}
		]
	};

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

	</script >
	
</body>
</html>

View Design

基于 Vue 的企业级 UI 组件库和中后台系统解决方案，为数万开发者服务。

更多推荐

Element UI组件介绍

简介element ui 就是基于vue的一个ui框架,该框架基于vue开发了很多相关组件,方便我们快速开发页面。1、安装Element UI，通过vue脚手架创建项vue init webpack element(项目名)2、在vue脚手架项目中安装elementui# 1.下载elementui的依赖npm i element-ui -S# 2.指定当前项目中使用elementuiimport