0
代码
代码
Issues
Pull Requests
讨论
Wiki
分析
0
Zzhangxiaohuiupdate
b5a4ce28创建于 2021年4月14日历史提交
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<!-- ECharts单文件引入 -->
<script src="common/js/echarts-2.2.2/echarts.js"></script>
<script type="text/javascript">
// 初始化仪表盘字段
function initDefaultChart(ec){
		var myChart = ec.init(document.getElementById('main01'));
		var   option = {
					tooltip : {
						formatter: "{a} <br/>{b} : {c}%"
					},
					toolbox: {
						show : false,
						feature : {
							mark : {show: true},
							restore : {show: true},
							saveAsImage : {show: true}
						}
					},
					series : [
						{
							name:'业务指标',
							type:'gauge',
							splitNumber: 10,       // 分割段数，默认为5
							axisLine: {            // 坐标轴线
								lineStyle: {       // 属性lineStyle控制线条样式
									color: [[0.2, '#228b22'],[0.8, '#48b'],[1, '#ff4500']], 
									width: 3
								}
							},
							axisTick: {            // 坐标轴小标记
								splitNumber: 10,   // 每份split细分多少段
								length :10,        // 属性length控制线长
								lineStyle: {       // 属性lineStyle控制线条样式
									color: 'auto'
								}
							},
							axisLabel: {           // 坐标轴文本标签，详见axis.axisLabel
								textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
									color: 'auto'
								}
							},
							splitLine: {           // 分隔线
								show: true,        // 默认显示，属性show控制显示与否
								length :15,         // 属性length控制线长
								lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
									color: 'auto'
								}
							},
							pointer : {
								width : 5
							},
							title : {
								show : true,
								offsetCenter: [0, '-40%'],       // x, y，单位px
								textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
									fontWeight: 'bolder'
								}
							},
							detail : {
								formatter:'{value}%',
								textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
									color: 'auto',
									fontWeight: 'bolder'
								}
							},
							data:[{value: 25, name: '完成率'}]
						}
					]
				};
		myChart.setOption(option);
		setInterval(function (){
			option.series[0].data[0].value = (Math.random()*100).toFixed(2) - 0;
			myChart.setOption(option,true);
		},2000);
		
		//02
		var myChart02 = ec.init(document.getElementById('main02'));
		var   option02 = {
					tooltip : {
						formatter: "{a} <br/>{b} : {c}%"
					},
					toolbox: {
						show : false,
						feature : {
							mark : {show: true},
							restore : {show: true},
							saveAsImage : {show: true}
						}
					},
					series : [
						{
							name:'温度指标',
							type:'gauge',
							splitNumber: 10,       // 分割段数，默认为5
							axisLine: {            // 坐标轴线
								lineStyle: {       // 属性lineStyle控制线条样式
									color: [[0.2, '#228b22'],[0.8, '#48b'],[1, '#ff4500']], 
									width: 3
								}
							},
							axisTick: {            // 坐标轴小标记
								splitNumber: 10,   // 每份split细分多少段
								length :10,        // 属性length控制线长
								lineStyle: {       // 属性lineStyle控制线条样式
									color: 'auto'
								}
							},
							axisLabel: {           // 坐标轴文本标签，详见axis.axisLabel
								textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
									color: 'auto'
								}
							},
							splitLine: {           // 分隔线
								show: true,        // 默认显示，属性show控制显示与否
								length :15,         // 属性length控制线长
								lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
									color: 'auto'
								}
							},
							pointer : {
								width : 5
							},
							title : {
								show : true,
								offsetCenter: [0, '-40%'],       // x, y，单位px
								textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
									fontWeight: 'bolder'
								}
							},
							detail : {
								formatter:'{value}',
								textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
									color: 'auto',
									fontWeight: 'bolder'
								}
							},
							data:[{value: 50, name: '完成率'}]
						}
					]
				};
		myChart02.setOption(option);
		setInterval(function (){
			option02.series[0].data[0].value = (Math.random()*100).toFixed(2) - 0;
			myChart02.setOption(option02,true);
		},2000);
}

</script>
<script type="text/javascript">
	//仪表盘
	require.config({
		paths: {
			echarts: 'common/js/echarts-2.2.2'
		}
	});
	require(
		[
			'echarts',
			'echarts/chart/line',   // 按需加载所需图表，如需动态类型切换功能，别忘了同时加载相应图表
			'echarts/chart/bar',
			'echarts/chart/gauge'
		],
		function (ec) {
			initDefaultChart(ec);
		}
	
	);
</script>
</head>
<body>
  <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
  <div id="main01" style="height:400px"></div>
  
  <div id="main02" style="height:400px"></div>
</body>
</html>