echarts仪表盘option_echarts仪表盘完整代码

var option = {

backgroundColor: '#00162a',

title: [{

x: "40%",

y: "53%",

text: '主干道平均车速:36km/h',

textStyle: {

fontWeight: 'normal',

fontSize: 16,

color: "#fff"

},

}],

series: [

{

name: "",

type: 'gauge',

min: 0,

max: 10,

radius: "80%",

splitNumber: 1, //刻度数量

startAngle: 180,

endAngle: 0,

axisLine: { // 坐标轴线

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

width: 60,

color: [

[1, new echarts.graphic.LinearGradient(0, 0, 1, 0, [{

offset: 0,

color: '#3aa600'

}, {

offset: 1,

color: '#f70700'

}])]

],

}

},

splitLine: {

show: false,

},

axisLabel: {

show: true,

color: "#fff",

formatter: "{value}",

distance: 40,

padding: [-20, 0, 0, 0],

fontSize: 16

},

axisTick: {

show: false

},

pointer: {

show: true,

length: '82%',

width: 2,

},

itemStyle: {

color: '#0782f9'

},

title: {

show: false,

},

detail: {

offsetCenter: [0, '-35%'],

textStyle: {

color: '#8bd100',

fontSize: 48,

fontWeight: 500

}

},

data: [{

value: 3.5, //指针数值

}]

},

{

name: '拥堵程度',

type: 'gauge',

z: 2,

min: 0,

max: 10,

splitNumber: 25,

startAngle: 0,

endAngle: 180,

radius: '80%',

axisLine: {

show: false,

lineStyle: {

width: 0

}

},

axisTick: {

show: false,

},

axisLabel: {

show: true,

color: '#ffffff',

fontSize: 14,

rotate: '40',

formatter: function(e){

switch (e + "") {

case "0.8":

return "畅";

case "1.2":

return "通";

case "2.4":

return "轻";

case "2.8":

return "度";

case "3.2":

return "拥";

case "3.6":

return "堵";

case "4.4":

return "中";

case "4.8":

return "度";

case "5.2":

return "拥";

case "5.6":

return "堵";

case "6.4":

return "中";

case "6.8":

return "度";

case "7.2":

return "拥";

case "7.6":

return "堵";

case "8.4":

return "严";

case "8.8":

return "重";

case "9.2":

return "拥";

case "9.6":

return "堵";

// default:

// return e;

}

},

},

splitLine: { // 分隔线

show: false,

length: 19,

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

color: 'blue',

width: 1

}

},

detail: {

show: false,

},

data: [],

clockwise: false

},

{

name: '刻度',

type: 'gauge',

radius: "80%",

startAngle: 144,

endAngle: 36,

center: ['50%', '50%'],

min: 2,

max: 8,

splitNumber: 3,

axisLine: { // 坐标轴线

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

width: 60,

color: [

[1, 'rgba(0,0,0,0)']

]

}

},

axisLabel: {

show: true,

fontSize: 18,

color: '#ffffff'

},

axisTick: {

show: false,

splitNumber: 10,

lineStyle: {

color: '#707070', //用颜色渐变函数不起作用

width: 1

},

length: -10

},

splitLine: {

show: true, //改1

length: 62,

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

color: '#ffffff',

width: 1

}

},

pointer: {

show: false

}

},

{

"name": '指针小圆形', //装饰作用

"type": 'pie',

"hoverAnimation": false,

"legendHoverLink": false,

"radius": ['0%', '1%'],

"center": ['50%', '50%'],

"z": 10,

"label": {

"normal": {

"show": false,

"position": 'center'

},

"emphasis": {

"show": false

}

},

"labelLine": {

"normal": {

"show": false

}

},

"data": [{

"value": 0,

"name": '1',

itemStyle: {

normal: {

color: "red"

}

}

}, {

"value": 100,

"name": '2',

itemStyle: {

normal: {

color: "#0782f9"

},

emphasis: {

color: "#0782f9"

}

}

}]

},

{

name: '外层辅助线',

type: 'gauge',

z: 1,

min: 0,

max: 10,

splitNumber: 5,

startAngle: 0,

endAngle: 180,

radius: '85%',

axisLine: { // 坐标轴线

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

width: 4,

color: [

[1, '#0666c9']

],

opacity: 1

}

},

axisTick: {

show: false

},

axisLabel: {

show: false,

},

splitLine: { // 分隔线

show: false,

length: 15,

},

detail: {

show: false,

},

data: [],

clockwise: false

},

{

"name": '背景',

"type": 'pie',

"hoverAnimation": false,

"legendHoverLink": false,

radius: '66%',

center: ['50%', '50%'],

"z": 0,

"startAngle": 180,

"label": {

"normal": {

"show": false,

"position": 'center'

},

"emphasis": {

"show": false,

}

},

"labelLine": {

"normal": {

"show": false

}

},

"data": [{

"value": 50,

"name": '1',

itemStyle: {

normal: {

color: "#021a30"

},

}

}, {

"value": 50,

"name": '2',

itemStyle: {

normal: {

color: "rgba(0,0,0,0)"

}

}

}]

},

]

};

表情包
插入表情
评论将由博主筛选后显示,对所有人可见 | 还能输入1000个字符
相关推荐
<p> 课程演示环境:Windows10  </p> <p> 需要学习<span>Ubuntus</span>系统<span>YOLOv4-tiny</span>的同学请前往《<span>YOLOv4-tiny</span>目标检测实战:训练自己的数据集》 <span></span> </p> <p> <span> </span> </p> <p> <span style="color:#E53333;">YOLOv4-tiny</span><span style="color:#E53333;">来了!速度大幅提升!</span><span></span> </p> <p> <span> </span> </p> <p> <span>YOLOv4-tiny</span>在<span>COCO</span>上的性能可达到:<span>40.2% AP50, 371 FPS (GTX 1080 Ti)</span>。相较于<span>YOLOv3-tiny</span>,<span>AP</span>和<span>FPS</span>的性能有巨大提升。并且,<span>YOLOv4-tiny</span>的权重文件只有<span>23MB</span>,适合在移动端、嵌入式设备、边缘计算设备上部署。<span></span> </p> <p> <span> </span> </p> <p> 本课程将手把手地教大家使用<span>labelImg</span>标注和使用<span>YOLOv4-tiny</span>训练自己的数据集。课程实战分为两个项目:单目标检测(足球目标检测)和多目标检测(足球和梅西同时检测)。<span></span> </p> <p> <span> </span> </p> <p> 本课程的<span>YOLOv4-tiny</span>使用<span>AlexAB/darknet</span>,在<span>Windows10</span>系统上做项目演示。包括:<span>YOLOv4-tiny</span>的网络结构、安装<span>YOLOv4-tiny</span>、标注自己的数据集、整理自己的数据集、修改配置文件、训练自己的数据集、测试训练出的网络模型、性能统计<span>(mAP</span>计算<span>)</span>和先验框聚类分析。 <span> </span> </p> <p> <span> </span> </p> <p> 除本课程《<span>Windows</span>版<span>YOLOv4-tiny</span>目标检测实战:训练自己的数据集》外,本人推出了有关<span>YOLOv4</span>目标检测的系列课程。请持续关注该系列的其它视频课程,包括:<span></span> </p> <p> 《<span>Windows</span>版<span>YOLOv4</span>目标检测实战:训练自己的数据集》<span></span> </p> <p> 《<span>Windows</span>版<span>YOLOv4</span>目标检测实战:人脸口罩佩戴识别》<span></span> </p> <p> 《<span>Windows</span>版<span>YOLOv4</span>目标检测实战:中国交通标志识别》<span></span> </p> <p> 《<span>Windows</span>版<span>YOLOv4</span>目标检测:原理与源码解析》<span></span> </p> <p> <span> <img alt="" src="https://img-bss.csdnimg.cn/202007061503586145.jpg" /></span> </p> <p> <span><img alt="" src="https://img-bss.csdnimg.cn/202007061504169339.jpg" /><br /> </span> </p>
©️2020 CSDN 皮肤主题: 1024 设计师:白松林 返回首页