echarts(堆疊柱狀圖)

堆疊柱狀圖和dataZoom 組件 用於區域縮放的實現的一個實例,參數顏色是本身自定義的,可根據須要添加顏色

/**
 * 獲取上傳率圖表Option
 * 
 * @param chart
 * @param json
 *            json對象
 *            格式例子:{"devices":[{"name":"已啓用","data":[{"name":"UDP透傳","value":48},{"name":"電信IoT","value":4}]},
 *            {"name":"已停用","data":[{"name":"UDP透傳","value":10},{"name":"電信IoT","value":5}]},
 *            {"name":"其餘","data":[{"name":"UDP透傳","value":3853},{"name":"電信IoT","value":2}]}],
 *            "series":[{"name":"已上傳","data":[{"name":"UDP透傳","value":1},{"name":"電信IoT","value":0}]},
 *            {"name":"未上傳","data":[{"name":"UDP透傳","value":3900},{"name":"電信IoT","value":6}]}],
 *            "uprates":[{"name":"UDP透傳","value":0.03},{"name":"電信IoT","value":0}]}
 * @param serColors
 *            series顏色數組
 * @param devColors
 *            devices顏色數組
 * @param rateColor
 *            上傳率顏色
 * @param chartTitle
 *            圖表標題
 */
function getUprateChartOption(json, serColors, devColors, rateColor, chartTitle) {
	var maxValue = 0;
	var series = [];
	var legend = [];
	var category = [];
	// 上傳率
	var uprate = {
		name : "上傳率(%)",
		type : 'line',
		itemStyle : {
			normal : {
				color : rateColor
			}
		},
		yAxisIndex : 0,
		data : []
	};
	for (var j = 0; j < json.uprates.length; j++) {
		uprate.data.push(json.uprates[j].value);
	}
	series.push(uprate);
	// 上傳數合計
	var serTotal = {
		name : "應上傳數",
		type : 'bar',
		stack : 'ser',
		label : {
			normal : {
				offset : [ '50', '800' ],
				show : true,
				position : 'insideBottom',
				formatter : '{c}',
				textStyle : {
					color : '#0ea87a',
					fontWeight : '600'
				}
			}
		},
		itemStyle : {
			normal : {
				color : 'rgba(128, 128, 128, 0)'
			}
		},
		yAxisIndex : 1,
		data : []
	};
	// 設備數合計
	var devTotal = {
		name : '設備總數',
		type : 'bar',
		stack : 'dev',
		label : {
			normal : {
				offset : [ '50', '800' ],
				show : true,
				position : 'insideBottom',
				formatter : '{c}',
				textStyle : {
					color : '#0ea87a',
					fontWeight : '600'
				}
			}
		},
		itemStyle : {
			normal : {
				color : 'rgba(128, 128, 128, 0)'
			}
		},
		yAxisIndex : 1,
		data : []
	};
	for (var i = 0; i < json.series.length; i++) {
		var obj = json.series[i];
		legend.push(obj.name);
		var serObj = {
			name : obj.name,
			type : 'bar',
			barWidth : '40%',
			itemStyle : {
				normal : {
					color : serColors[i % serColors.length]
				}
			},
			label : {
				normal : {
					show : true,
					position : 'inside',
					textStyle : {
						color : '#fff',
						fontWeight : '600'
					}
				}
			},
			stack : 'ser',
			yAxisIndex : 1,
			data : []
		};
		for (var j = 0; j < obj.data.length; j++) {
			if (i == 0) {
				category.push(obj.data[j].name);
				serTotal.data.push(obj.data[j].value);
			} else {
				serTotal.data[j] = serTotal.data[j] + obj.data[j].value;
			}
			serObj.data.push(obj.data[j].value);
		}
		series.push(serObj);
	}
	series.push(serTotal);
	for (var i = 0; i < serTotal.data.length; i++) {
		if (maxValue < serTotal.data[i]) {
			maxValue = serTotal.data[i];
		}
	}
	for (var i = 0; i < json.devices.length; i++) {
		var obj = json.devices[i];
		legend.push(obj.name);
		var devObj = {
			name : obj.name,
			type : 'bar',
			barWidth : '40%',
			itemStyle : {
				normal : {
					color : devColors[i % devColors.length]
				}
			},
			label : {
				normal : {
					show : true,
					position : 'inside',
					textStyle : {
						color : '#fff',
						fontWeight : '600'
					}
				}
			},
			stack : 'dev',
			yAxisIndex : 1,
			data : []
		};
		for (var j = 0; j < obj.data.length; j++) {
			if (i == 0) {
				devTotal.data.push(obj.data[j].value);
			} else {
				devTotal.data[j] = devTotal.data[j] + obj.data[j].value;
			}
			devObj.data.push(obj.data[j].value);
		}
		series.push(devObj);
	}
	series.push(devTotal);
	for (var i = 0; i < devTotal.data.length; i++) {
		if (maxValue < devTotal.data[i]) {
			maxValue = devTotal.data[i];
		}
	}
	var len = String(Math.floor(maxValue)).length;
	var num = Math.pow(10, len - 1);
	maxValue = Math.floor((maxValue + num) / num) * num;
	var option = {
		title : {
			text : chartTitle,
			textStyle : {
				fontSize : '14'
			},
			bottom : '0',
			x : 'center'
		},
		tooltip : {
			trigger : 'axis',
			axisPointer : { // 座標軸指示器，座標軸觸發有效
				type : 'shadow' // 默認爲直線，可選爲：'line' | 'shadow'
			},
			textStyle : {
				align : 'left'
			}
		},
		grid : {
			left : '10',
			right : '10',
			bottom : '60',
			containLabel : true
		},
		legend : {
			data : legend
		},
		xAxis : [ {
			type : 'category',
			data : category,
			axisLine : {
				show : false
			},
			axisTick : {
				show : false
			}
		} ],
		yAxis : [ {
			name : '上傳率 (%)',
			splitLine : {
				show : false
			},
			min : 0,
			max : 100,
			type : 'value',
			inverse : false,
			axisLine : {
				lineStyle : {
					color : rateColor
				}
			}
		}, {
			name : '設備數',
			type : 'value',
			splitLine : {
				show : true
			},
			axisLabel : {
				formatter : '{value}'
			},
			max : maxValue
		} ],
		series : series
	};
	return option;
}

html圖表渲染部分的使用

<div style="margin-top: 18px;">
						<div id="proviceChart" style="width: 1100px; height: 400px;"></div>
						<script>
							$(document).ready(function() {
								var proviceChart = echarts.init(document.getElementById('proviceChart'));
								var proviceOption = getUprateChartOption(JSON.parse('${table.proviceChartData}'), uprateSerColors, uprateDevColors, uprateColor, "省份上傳率圖表");
								proviceOption['dataZoom'] = [ {
									type : 'slider',
									show : true,
									xAxisIndex : 0,
									bottom : 26,
									start : 70,
									end : 100,
								}, {
									type : 'inside',
									xAxisIndex : 0,
									bottom : 26,
									start : 70,
									end : 100,
								}, {
									type : 'slider',
									show : true,
									yAxisIndex : [ 1 ],
									right : 0
								} ];
								proviceChart.setOption(proviceOption);
								proviceChart.hideLoading();
							});
						</script>
					</div>

記得本身去官網下載echarts.js 並引入,頁面效果如圖所示,datazoom組件能夠拖動 x軸 y軸縮放圖表內容

標題