柱状图折线图混合使用

时间 2021-08-13
标签 javascript css html java jquery echarts dom ide code orm 栏目 JavaScript 繁體版
原文原文链接
<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>柱状图折线图混合使用</title>
		<!-- 引入 echarts.js -->
		<script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js" type="text/javascript"></script>
		<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
	</head>

	<body>
		<!-- 为ECharts准备一个具有大小（宽高）的Dom -->
		<div id="main" style="width: 600px;height:400px;"></div>
		<script type="text/javascript">
			// 基于准备好的dom，初始化echarts实例
			var myChart = echarts.init(document.getElementById('main'));
			// 指定图表的配置项和数据
			myChart.setOption({

				title: {
					left: 'left',
					text: '几率',
					show: false
				},
				tooltip: {
					trigger: 'axis',
					formatter: '{a}:{c}',
					axisPointer: {
						type: 'cross',
						crossStyle: {
							color: '#999'
						}
					}
				},
				grid: {
					show: false,
					top: '30',
					bottom: '60',
					right: '60',
					left: '60'
				},
				legend: {
					show: true,
					selectedMode: 'single', //设置显示单一图例的图形，点击可切换
					bottom: 10,
					left: 50,
					textStyle: {
						color: '#666',
						fontSize: 12
					},
					itemGap: 20,
					data: ['设备一', '设备二', '设备三'],
					inactiveColor: '#ccc'
				},
				xAxis: [{
						type: 'category',
						data: ['济南', '青岛', '烟台', '威海', '潍坊', '东营', '日照',
							'滨州', '莱芜', '淄博', '德州', '聊城', '临沂', '泰安', '菏泽', '济宁', '枣庄'
						],
						axisPointer: {
							type: 'shadow'

						},

						axisTick: {
							show: true,
							interval: 0
						},
					}

				],

				//设置两个y轴，左边显示数量，右边显示几率
				yAxis: [{
						type: 'value',
						name: '数量',
						show: true,
						interval: 50,
					},
					{
						type: 'value',
						name: '几率',
						min: 0,
						max: 100,
						interval: 10,
						axisLabel: {
							formatter: '{value} %'
						}
					}

				],

				//每一个设备分数量、几率2个指标，只要让他们的name一致，便可经过，legeng进行统一的切换
				series: [{
						name: '设备一',
						type: 'bar',
						data: [900, 800, 700, 680, 650, 640, 600, 570, 680, 650, 640, 600, 570,
							450, 400, 380, 300
						],
						barWidth: '50%',

					},
					{
						name: '设备一',
						type: 'line',
						yAxisIndex: 1, //这里要设置哪一个y轴，默认是最左边的是0，而后1，2顺序来。
						data: [75, 65, 85, 66, 45, 55, 56, 42, 78, 69, 70, 36, 42, 50, 65, 75, 80],
						symbolSize: 10,
						itemStyle: {
							normal: {
								color: "#DDA0DD"
							}

						}
					},
					{
						name: '设备二',
						type: 'bar',
						data: [700, 680, 650, 640, 600, 570, 680, 650, 640, 600, 570,
							450, 400, 380, 300, 900, 800
						],
						barWidth: '50%',
					},
					{
						name: '设备二',
						type: 'line',
						yAxisIndex: 1,
						data: [75, 65, 85, 66, 45, 55, 56, 42, 78, 69, 70, 36, 42, 50, 65, 75, 80],
						symbolSize: 10,
						itemStyle: {
							normal: {
								color: "#87CEFA"
							}

						}
					},
					{
						name: '设备三',
						type: 'bar',
						data: [600, 570, 680, 650, 640, 600, 570,
							450, 400, 380, 300, 900, 800, 700, 680, 650, 640,
						],

						barWidth: '50%',
					},
					{
						name: '设备三',
						type: 'line',
						yAxisIndex: 1,
						data: [75, 65, 85, 66, 45, 55, 56, 42, 78, 69, 70, 36, 42, 50, 65, 75, 80],
						symbolSize: 10,
						itemStyle: {
							normal: {
								color: "#CD5C5C"
							}

						}
					}
				]

			});
		</script>
	</body>
</html>