echarts仪表盘option_echarts 仪表盘设置

option = {

backgroundColor:"#293c55",

series : [

{

name: '速度',

type: 'gauge',

center:["50%","50%"], //仪表盘在画布中的位置

min: 0,

max:100,

splitNumber: 10, //仪表盘分割段数

radius: '50%',

axisLine: { // 坐标轴线

show:true,

lineStyle: { // 属性lineStyle控制线条样式

width: 30, //表盘宽度

color:[[1, '#3fa7dc']] //设置仪表盘颜色和指针颜色

}

},

axisTick: { // 坐标轴小标记

length: -10, // 属性length控制线长 刻度长度 负值刻度朝外,正值刻度朝内

lineStyle: { // 属性lineStyle控制线条样式

color: 'auto',

}

},

splitLine: { // 分隔线

length: -16, // 属性length控制线长 负值刻度朝外,正值刻度朝内

lineStyle: { // 属性lineStyle(详见lineStyle)控制线条样式

color: '#ccc' // 分割线颜色

}

},

axisLabel: {

// backgroundColor: 'auto', //设置刻度数值的背景颜色

// borderRadius: 2, //设置圆角

color: '#eee',

// padding: 3,

textShadowBlur: 2,

textShadowOffsetX: 1,

textShadowOffsetY: 0,

textShadowColor: '#222',

padding:[-15,-8,0,-15],

},

detail: {

// 其余属性默认使用全局文本样式,详见TEXTSTYLE

formatter: function (value) {

value = (value + '').split('.');

value.length<2&& (value.push('00'));

return ('00' + value[0]).slice(-2)

+ '.' + (value[1] + '00').slice(0, 2)+"%";

},

fontSize:24, //文字大小

// fontWeight: 'bolder', //字体粗细

// borderRadius: 3, //文字边框圆角

// backgroundColor: '#444', // 文字背景颜色

// borderColor: '#aaa', //文字边框颜色

shadowBlur: 5, //文字背景阴影长度

shadowColor: '#0ff', //文字背景颜色

shadowOffsetX: 0, //文字背景阴影x偏移

shadowOffsetY:3, //文字背景y偏移

// borderWidth: 2, //边框粗细

textBorderColor: '#000', //文字描边颜色

textBorderWidth: 2, // 文字描边宽度

textShadowBlur: 2, //文字背景阴影长度

textShadowColor: '#fff', //文字本身阴影颜色

textShadowOffsetX: 0, //文字阴影x偏移

textShadowOffsetY: 0, //文字阴影y偏移

fontFamily: 'Arial',

width: 100, //文字块宽度

color: '#fff', //文字块颜色

rich: {},

},

data: [{value: 91.3}],

},

]

};

myChart.setOption(option,true);

// 定时改变数值

// setInterval(function (){

// option.series[0].data[0].value= (Math.random()*100).toFixed(2)- 0;

// myChart.setOption(option,true);

// },2000);

已标记关键词 清除标记
表情包
插入表情
评论将由博主筛选后显示,对所有人可见 | 还能输入1000个字符
相关推荐
©️2020 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页