Echarts 仪表盘参数详解

本文主要是介绍Echarts 仪表盘参数详解，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>ECharts练习</title><script type="text/javascript" src="js/echarts.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'));// 指定图表的配置项和数据option = {backgroundColor: '#1b1b1b',tooltip: {formatter: "{a} <br/>{c} {b}"},toolbox: {show: true,feature: {mark: {show: true},restore: {show: true},saveAsImage: {show: true}}},series: [{name: '速度',type: 'gauge',min: 0,max: 220,splitNumber: 11,radius: '50%',axisLine: { // 坐标轴线lineStyle: { // 属性lineStyle控制线条样式color: [[0.09, 'lime'],[0.82, '#1e90ff'],[1, '#ff4500']],width: 3,shadowColor: '#fff', //默认透明shadowBlur: 10}},axisLabel: { // 坐标轴小标记textStyle: { // 属性lineStyle控制线条样式fontWeight: 'bolder',color: '#fff',shadowColor: '#fff', //默认透明shadowBlur: 10}},axisTick: { // 坐标轴小标记length: 15, // 属性length控制线长lineStyle: { // 属性lineStyle控制线条样式color: 'auto',shadowColor: '#fff', //默认透明shadowBlur: 10}},splitLine: { // 分隔线length: 25, // 属性length控制线长lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式width: 3,color: '#fff',shadowColor: '#fff', //默认透明shadowBlur: 10}},pointer: { // 分隔线shadowColor: '#fff', //默认透明shadowBlur: 5},title: {textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLEfontWeight: 'bolder',fontSize: 20,fontStyle: 'italic',color: '#fff',shadowColor: '#fff', //默认透明shadowBlur: 10}},detail: {backgroundColor: 'rgba(30,144,255,0.8)',borderWidth: 1,borderColor: '#fff',shadowColor: '#fff', //默认透明shadowBlur: 5,offsetCenter: [0, '50%'], // x, y，单位pxtextStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLEfontWeight: 'bolder',color: '#fff'}},data: [{value: 40,name: 'km/h'}]}, {name: '转速',type: 'gauge',center: ['25%', '55%'], // 默认全局居中radius: '30%',min: 0,max: 7,endAngle: 45,splitNumber: 7,axisLine: { // 坐标轴线lineStyle: { // 属性lineStyle控制线条样式color: [[0.29, 'lime'],[0.86, '#1e90ff'],[1, '#ff4500']],width: 2,shadowColor: '#fff', //默认透明shadowBlur: 10}},axisLabel: { // 坐标轴小标记textStyle: { // 属性lineStyle控制线条样式fontWeight: 'bolder',color: '#fff',shadowColor: '#fff', //默认透明shadowBlur: 10}},axisTick: { // 坐标轴小标记length: 12, // 属性length控制线长lineStyle: { // 属性lineStyle控制线条样式color: 'auto',shadowColor: '#fff', //默认透明shadowBlur: 10}},splitLine: { // 分隔线length: 20, // 属性length控制线长lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式width: 3,color: '#fff',shadowColor: '#fff', //默认透明shadowBlur: 10}},pointer: {width: 5,shadowColor: '#fff', //默认透明shadowBlur: 5},title: {offsetCenter: [0, '-30%'], // x, y，单位pxtextStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLEfontWeight: 'bolder',fontStyle: 'italic',color: '#fff',shadowColor: '#fff', //默认透明shadowBlur: 10}},detail: {//backgroundColor: 'rgba(30,144,255,0.8)',// borderWidth: 1,borderColor: '#fff',shadowColor: '#fff', //默认透明shadowBlur: 5,width: 80,height: 30,offsetCenter: [25, '20%'], // x, y，单位pxtextStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLEfontWeight: 'bolder',color: '#fff'}},data: [{value: 1.5,name: 'x1000 r/min'}]}, {name: '油表',type: 'gauge',center: ['75%', '50%'], // 默认全局居中radius: '30%',min: 0,max: 2,startAngle: 135,endAngle: 45,splitNumber: 2,axisLine: { // 坐标轴线lineStyle: { // 属性lineStyle控制线条样式color: [[0.2, 'lime'],[0.8, '#1e90ff'],[1, '#ff4500']],width: 2,shadowColor: '#fff', //默认透明shadowBlur: 10}},axisTick: { // 坐标轴小标记length: 12, // 属性length控制线长lineStyle: { // 属性lineStyle控制线条样式color: 'auto',shadowColor: '#fff', //默认透明shadowBlur: 10}},axisLabel: {textStyle: { // 属性lineStyle控制线条样式fontWeight: 'bolder',color: '#fff',shadowColor: '#fff', //默认透明shadowBlur: 10},formatter: function(v) {switch(v + '') {case '0':return 'E';case '1':return 'Gas';case '2':return 'F';}}},splitLine: { // 分隔线length: 15, // 属性length控制线长lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式width: 3,color: '#fff',shadowColor: '#fff', //默认透明shadowBlur: 10}},pointer: {width: 2,shadowColor: '#fff', //默认透明shadowBlur: 5},title: {show: false},detail: {show: false},data: [{value: 0.5,name: 'gas'}]}, {name: '水表',type: 'gauge',center: ['75%', '50%'], // 默认全局居中radius: '30%',min: 0,max: 2,startAngle: 315,endAngle: 225,splitNumber: 2,axisLine: { // 坐标轴线lineStyle: { // 属性lineStyle控制线条样式color: [[0.2, 'lime'],[0.8, '#1e90ff'],[1, '#ff4500']],width: 2,shadowColor: '#fff', //默认透明shadowBlur: 10}},axisTick: { // 坐标轴小标记show: false},axisLabel: {textStyle: { // 属性lineStyle控制线条样式fontWeight: 'bolder',color: '#fff',shadowColor: '#fff', //默认透明shadowBlur: 10},formatter: function(v) {switch(v + '') {case '0':return 'H';case '1':return 'Water';case '2':return 'C';}}},splitLine: { // 分隔线length: 15, // 属性length控制线长lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式width: 3,color: '#fff',shadowColor: '#fff', //默认透明shadowBlur: 10}},pointer: {width: 2,shadowColor: '#fff', //默认透明shadowBlur: 5},title: {show: false},detail: {show: false},data: [{value: 0.5,name: 'gas'}]}]};myChart.setOption(option);setInterval(function() {option.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0;option.series[1].data[0].value = (Math.random() * 7).toFixed(2) - 0;option.series[2].data[0].value = (Math.random() * 2).toFixed(2) - 0;option.series[3].data[0].value = (Math.random() * 2).toFixed(2) - 0;myChart.setOption(option);}, 2000)</script></body></html>