echart 仪表盘

echart 仪表盘_第1张图片

option = {
    tooltip: {
        formatter: '{a} 
{b} : {c}%' }, toolbox: { feature: { restore: {}, saveAsImage: {} } }, series: [ // name: '业务指标', // type: 'gauge', // detail: {formatter: '{value}%'}, // data: [{value: 50, name: '完成率'}], { radius: '85%', type: 'gauge', detail: {show:false}, axisLine: { // 坐标轴线 lineStyle: { // 属性lineStyle控制线条样式 color: [ [1, '#bef701']], width: 13, shadowColor: '#fff', //默认透明 shadowBlur: 10 } }, axisLabel:{ show:false }, splitLine:{ show:false }, axisTick:{ show:false } },{ type: 'gauge', radius: '67%', min: 0, max: 100, splitNumber: 4, axisLine: { // 坐标轴线 lineStyle: { // 属性lineStyle控制线条样式 color: [[1, '#acad7f']], width: 0, // shadowColor: '#2bb71f', // shadowBlur: 10 } }, axisLabel: { // 坐标轴小标记 textStyle: { // 属性lineStyle控制线条样式 // fontWeight: 'bolder', color: '#acad7f', shadowColor: '#acad7f', //默认透明 shadowBlur: 10, fontSize:10 } }, splitLine: { // 分隔线 length: 20, // 属性length控制线长 lineStyle: { // 属性lineStyle(详见lineStyle)控制线条样式 width: 1, color: '#acad7f', shadowColor: '#acad7f', //默认透明 shadowBlur: 10 } }, axisTick: { // 坐标轴小标记 length: 12, // 属性length控制线长 lineStyle: { // 属性lineStyle控制线条样式 color: 'auto', shadowColor: '#acad7f', //默认透明 shadowBlur: 10, }, splitNumber: 15 }, pointer: { // 分隔线 shadowColor: '#acad7f', //默认透明 shadowBlur: 5, width:2, length: '70%' }, itemStyle:{ color:'#9289da' }, detail: { offsetCenter: [0, '84%'], // x, y,单位px formatter: function (value) { return value.toFixed(2) + '%'; }, textStyle: { // 其余属性默认使用全局文本样式,详见TEXTSTYLE // fontWeight: 'normal', color: '#CCFF00', fontFamily: 'lcdd', fontSize: 34 } }, title:{ show: false }, data: [{value: 50,}] } ] }; setInterval(function () { option.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0; myChart.setOption(option, true); },2000);

你可能感兴趣的:(ECharts,javascript)