柱狀圖折線圖混合使用

時間 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>