echarts 仪表盘实例

定义方法

function show() {
		var myChart = echarts.init(document.getElementById('container2'));
		var option = {
			title : {
				text : '超年限库存占比',
				x : 'center',
				textStyle : {
					fontSize : 15,
					lineHeight : '20px',
					fontWeight : 'normal',
					color : '#000'
				},
				textAlign : 'center',
				subtext : '单位：吨'
			},
			tooltip : {
				textStyle : {
					fontSize : 13,
					lineHeight : '20px',
					fontWeight : 'normal'
				}
			},
			toolbox : {
				show : false,
				feature : {
					mark : {
						show : true
					},
					restore : {
						show : true
					},
					saveAsImage : {
						show : true
					}
				}
			},
			series : [
				{
					name : '超年限库存占比',
					type : 'gauge',
					radius : '85%',
					center : [ '50%', '60%' ],
					splitNumber : 10, // 分割段数，默认为5
					axisLine : { // 坐标轴线
						lineStyle : { // 属性lineStyle控制线条样式
							color : [ [ 0.2, '#228b22' ], [ 0.8, '#48b' ], [ 1, '#ff4500' ] ],
							width : 10
						}
					},
					axisTick : { // 坐标轴小标记
						splitNumber : 10, // 每份split细分多少段
						length : 14, // 属性length控制线长
						lineStyle : { // 属性lineStyle控制线条样式
							color : 'auto'
						}
					},
					axisLabel : { // 坐标轴文本标签，详见axis.axisLabel
						textStyle : { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
							color : 'auto'
						}
					},
					splitLine : { // 分隔线
						show : true, // 默认显示，属性show控制显示与否
						length : 30, // 属性length控制线长
						lineStyle : { // 属性lineStyle（详见lineStyle）控制线条样式
							color : 'auto'
						}
					},
					pointer : {//指针
						width : 7
					},
					//设置指针中间有个白点，但是不知为什么失效了，可能是echarts文档有问题
/*					markPoint:{
					    symbol:'circle',
					    symbolSize:5,
					    data:[
					    //跟你的仪表盘的中心位置对应上，颜色可以和画板底色一样
						    {
						    	x:'50%',y:'60%',itemStyle:{color:'#fff'}
						    }
					    ]
					    },*/
					title : {
						show : true,
						offsetCenter : [ 0, '-40%' ], // x, y，单位px
						textStyle : { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
							fontWeight : 'bolder'
						}
					},
					detail : {
						formatter : '{value}%',
						textStyle : { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
							color : 'auto',
							fontWeight : 'bolder',
							fontSize: 15
						},
						offsetCenter: [0, '60%'] 
					},
					data : []
				}
			]
		};
		myChart.setOption(option);
		$.ajax({
			url : contextPath + "/_data/busquery/inventory/storedtl/statistics",
			type : "post",
			data : {
			},
			traditional : true, //这里设置为true,将自动生成的[]符号去除
			dataType : "json",
			success : function(result) {
				var servicedata = [];
				var showdata = [];
				var formatdata = [];
				for (var i = 0; i < result.length; i++) {
					var obj = new Object();
					obj.name = result[i].name;
					obj.value = result[i].value;
					servicedata[i] = obj;
					formatdata[i] = result[i].value;
					if (result[i].name == "占比") {
						var obj = new Object();
						obj.name = "";
						obj.value = parseFloat(result[i].value).toFixed(2);
						showdata[i] = obj;
					}
				}
				myChart.setOption({
					series : [ {
						data : showdata,
					}],
					tooltip : {
						formatter: function () {
						   var edit = "超年限库存占比" + "<br>";
						   for (var i = 0; i < servicedata.length; i++) {
							   if (servicedata[i].name == "占比"){
								   edit += servicedata[i].name + ":" + parseFloat(servicedata[i].value).toFixed(2) +"%" + "<br>";
							   }else {
								   edit += servicedata[i].name + ":" + servicedata[i].value + "<br>";
							   }
						   }
						   return edit;
						}
					}
					
				});
			}
		});
	}

tooltip中的formatter是自己定义显示的值，没有需要的话按照官网的定义即可

调用的时候直接调用show方法

定义的div

<div id="container2" class="home_container_body_center"></div>

效果图：