echarts寫儀表盤，指針到不一樣區域顯示不一樣顏色

時間 2019-11-25
標籤 echarts 儀表盤指針不一樣區域顯示顏色简体版
原文原文鏈接
<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>空氣質量</title>
	<link rel="stylesheet" href="http://v3.bootcss.com/dist/css/bootstrap.min.css">
	<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
	<script src="http://echarts.baidu.com/dist/echarts.min.js"></script>
</head>

<body>

	<!--正文-->
	<div class="container-fluid">
		<div class="title">
			<h4 class="text-center">房間名稱實時空氣質量</h4>
		</div>




		<div class="gaugelabel">
			<div class="gaugbox pull-left" style="width: 33%;">

				<a href="#">
					<div class="pull-left" id="pm" style="width: 100%;height: 500px"></div>
				</a>
			</div>
			<div class="gaugbox pull-left" style="width: 22%">

				<a href="#">
					<div class="pull-left" id="co2" style="width: 100%;height: 500px"></div>
				</a>
			</div>
			<div class="gaugbox pull-left" style="width: 22%">

				<a href="#">
					<div class="pull-left" id="voc" style="width: 100%;height: 500px"></div>
				</a>
			</div>
			<div class="gaugbox pull-left" style="width: 22%">

				<a href="#">
					<div class="pull-left" id="jqz" style="width: 100%;height: 500px"></div>
				</a>
			</div>
		</div>
	</div>
</body>
<script>
	$(document).ready(function() {



		gaugeimg('pm', '室內PM2.5', 0, 500, 300, 'μg/m3');
		gaugeimg('co2', '二氧化碳', 350, 5000, 780, 'ppm');
		gaugeimg('voc', 'voc', 0.2, 25, 25, 'mg/m3');
		gaugeimg('jqz', '甲醛', 0, 0.30, 0.2, 'mg/m3');



		/*
		 *id:id;
		 *title:儀表盤名稱
		 *min:最小值
		 *max:最大值
		 *val:當前實際值
		 *unit:單位符號
		 */
		function gaugeimg(id, title, min, max, val, unit) {
			var myChart = echarts.init(document.getElementById(id)); //初始化

			option = {
				title: {
					text: title,
					x: 'center',
					y: '90%'
				},
				tooltip: {
					formatter: "{a} <br/>{b} : {c}" + unit
				},
				toolbox: {
					show: false,
					feature: {
						mark: {
							show: true
						},
						restore: {
							show: true
						},
						saveAsImage: {
							show: true
						}
					}
				},
				series: [{
					center: ['50%', '50%'],
					number: [0, '50%'],
					startAngle: 240, //儀表盤起始角度
					endAngle: -60, //儀表盤結束角度
					//min: min,
					//max: max,
					splitNumber: 10, //分割段數
					name: title,
					type: 'gauge',
					radius: '90%',
					splitNumber: 10, // 分割段數，默認爲5
					axisLine: { // 座標軸線
						lineStyle: { // 屬性lineStyle控制線條樣式
							color: [
								[0.25, '#ddd'],
								[1, '#ddd']
							],
							width: 8
						}
					},
					axisTick: { // 座標軸小標記
						splitNumber: 10, // 每份split細分多少段
						length: 12, // 屬性length控制線長
						lineStyle: { // 屬性lineStyle控制線條樣式
							color: 'auto'
						}
					},
					axisLabel: { // 座標軸文本標籤，詳見axis.axisLabel
						textStyle: { // 其他屬性默認使用全局文本樣式，詳見TEXTSTYLE
							color: 'auto'
						}
					},
					splitLine: { // 分隔線
						show: true, // 默認顯示，屬性show控制顯示與否
						length: 22, // 屬性length控制線長
						lineStyle: { // 屬性lineStyle（詳見lineStyle）控制線條樣式
							color: 'auto'
						}
					},
					pointer: { //指針粗細
						width: 5
					},
					title: {
						textStyle: { // 其他屬性默認使用全局文本樣式，詳見TEXTSTYLE
							fontWeight: 'bolder'
						},
						"show": true,
						"offsetCenter": [0, "-30%"],
						"padding": [5, 10],
						"fontSize": 18,
						//"color": "auto",
					},
					detail: {
						formatter: '{value}' + unit,
						textStyle: { // 其他屬性默認使用全局文本樣式，詳見TEXTSTYLE
							color: 'auto',
							fontWeight: 'bolder',
							"fontSize": 20
						}
					},

					data: [{
						//value: val,
						//name: name
					}]
				}]
			};
			option.series[0].min = min;
			option.series[0].max = max;
			option.series[0].data[0].value = val;
			option.series[0].axisLine.lineStyle.color[0][0] = (val - min) / (max - min);
			option.series[0].axisLine.lineStyle.color[0][1] = detectionData(val, id);
			myChart.setOption(option);
		}


		/*
		 *顏色設置，
		 */
		function detectionData(str, id) {

			if (id == 'pm') { //空氣顏色設置
				var color = new echarts.graphic.LinearGradient(0, 0, 1, 1, [{
					offset: 0,
					color: '#56b7ef'
				}, {
					offset: 1,
					color: '#56b7ef'
				}]);
				option.series[0].data[0].name = '優';
				if (str >= 51 && str <= 100) {
					color = new echarts.graphic.LinearGradient(0, 0, 1, 1, [{
						offset: 0,
						color: '#00ab35'
					}, {
						offset: 1,
						color: '#00ab35'
					}]);
					option.series[0].data[0].name = '良';
				}
				if (str >= 101 && str <= 150) {
					color = new echarts.graphic.LinearGradient(0, 0, 1, 1, [{
						offset: 0,
						color: '#98c100'
					}, {
						offset: 1,
						color: '#98c100'
					}]);
					option.series[0].data[0].name = '輕度污染';
				}
				if (str >= 151 && str <= 200) {
					color = new echarts.graphic.LinearGradient(0, 0, 1, 1, [{
						offset: 0,
						color: '#f49c00'
					}, {
						offset: 1,
						color: '#f49c00'
					}]);
					option.series[0].data[0].name = '中度污染';
				}
				if (str >= 201 && str <= 300) {
					color = new echarts.graphic.LinearGradient(0, 0, 1, 1, [{
						offset: 0,
						color: '#fd2c00'
					}, {
						offset: 1,
						color: '#fd2c00'
					}]);
					option.series[0].data[0].name = '重度污染';
				} else if (str > 300) {
					color = new echarts.graphic.LinearGradient(0, 0, 1, 1, [{
						offset: 0,
						color: '#9d3f7e'
					}, {
						offset: 1,
						color: '#9d3f7e'
					}]);
					option.series[0].data[0].name = '嚴重污染';
				}
				option.series[0].axisLine.lineStyle.width = '11'; //重置儀表盤軸線寬度
				option.series[0].axisTick.length = '16'; //重置儀表盤刻度線長度
				option.series[0].title.color = color.colorStops[1].color; //字體顏色和軸線顏色一致
				option.series[0].title.fontSize = 30; //第一個字體變大


				return color;
			}
			if (id == 'co2') { //二氧化碳顏色設置

				var color = new echarts.graphic.LinearGradient(0, 0, 1, 1, [{
					offset: 0,
					color: '#56b7ef'
				}, {
					offset: 1,
					color: '#56b7ef'
				}]);
				option.series[0].data[0].name = '同通常室外環境';
				if (str >= 450 && str <= 1000) {
					color = new echarts.graphic.LinearGradient(0, 0, 1, 1, [{
						offset: 0,
						color: '#00ab35'
					}, {
						offset: 1,
						color: '#00ab35'
					}]);
					option.series[0].data[0].name = '空氣清新';
				}
				if (str >= 1001 && str <= 2000) {
					color = new echarts.graphic.LinearGradient(0, 0, 1, 1, [{
						offset: 0,
						color: '#f49c00'
					}, {
						offset: 1,
						color: '#f49c00'
					}]);
					option.series[0].data[0].name = '空氣混濁';
				}
				if (str >= 2001 && str <= 5000) {
					color = new echarts.graphic.LinearGradient(0, 0, 1, 1, [{
						offset: 0,
						color: '#fd2c00'
					}, {
						offset: 1,
						color: '#fd2c00'
					}]);
					option.series[0].data[0].name = '頭痛、輕度噁心';
				} else if (str > 5000) {
					color = new echarts.graphic.LinearGradient(0, 0, 1, 1, [{
						offset: 0,
						color: '#9f3979'
					}, {
						offset: 1,
						color: '#9f3979'
					}]);
					option.series[0].data[0].name = '嚴重缺氧';
				}
				option.series[0].title.color = color.colorStops[1].color; //字體顏色和軸線顏色一致
				return color;
			}
			if (id == 'voc') { //voc顏色
				var color = new echarts.graphic.LinearGradient(0, 0, 1, 1, [{
					offset: 0,
					color: '#56b7ef'
				}, {
					offset: 1,
					color: '#56b7ef'
				}]);
				option.series[0].data[0].name = '無效應水平';
				if (str >= 0.3 && str < 3) {
					color = new echarts.graphic.LinearGradient(0, 0, 1, 1, [{
						offset: 0,
						color: '#f49c00'
					}, {
						offset: 1,
						color: '#f49c00'
					}]);
					option.series[0].data[0].name = '感到不舒服';
				} else if (str >= 25) {
					color = new echarts.graphic.LinearGradient(0, 0, 1, 1, [{
						offset: 0,
						color: '#9f3979'
					}, {
						offset: 1,
						color: '#9f3979'
					}]);
					option.series[0].data[0].name = '出現毒性';
				}
				option.series[0].title.color = color.colorStops[1].color; //字體顏色和軸線顏色一致
				return color;
			}
			if (id == 'jqz') { //甲醛顏色設置

				var color = new echarts.graphic.LinearGradient(0, 0, 1, 1, [{
					offset: 0,
					color: '#56b7ef'
				}, {
					offset: 1,
					color: '#56b7ef'
				}]);
				option.series[0].data[0].name = '正常';
				if (str >= 0.10 && str <= 0.20) {
					color = new echarts.graphic.LinearGradient(0, 0, 1, 1, [{
						offset: 0,
						color: '#00ab35'
					}, {
						offset: 1,
						color: '#00ab35'
					}]);
					option.series[0].data[0].name = '輕度污染';
				}

				if (str >= 0.20 && str <= 0.30) {
					color = new echarts.graphic.LinearGradient(0, 0, 1, 1, [{
						offset: 0,
						color: '#fd2c00'
					}, {
						offset: 1,
						color: '#fd2c00'
					}]);
					option.series[0].data[0].name = '中度污染';
				} else if (str > 0.30) {
					color = new echarts.graphic.LinearGradient(0, 0, 1, 1, [{
						offset: 0,
						color: '#9f3979'
					}, {
						offset: 1,
						color: '#9f3979'
					}]);
					option.series[0].data[0].name = '重度污染';
				}
				option.series[0].title.color = color.colorStops[1].color; //字體顏色和軸線顏色一致
				return color;
			}


		}



	})

</script>

</html>
1.要想使儀表盤顏色所有同樣，設置css
option.series[0].axisLine.lineStyle.color[0][0] =100;html
相關標籤/搜索
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。