echarts实现夜晚暗黑模式仪表盘图表效果代码
代码语言:html
所属分类:图表
代码描述:echarts实现夜晚暗黑模式仪表盘图表效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>BFW NEW PAGE</title> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/echarts.js"></script> </head> <body> <div id="container" style="height:500px;width:700px"> </div> <script type="text/javascript"> var 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: { // 坐标轴小标记 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: { // 其余属性默认使用全局文本样式,详见TEXTSTYLE fontWeight: '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,单位px textStyle: { // 其余属性默认使用全局文本样式,详见TEXTSTYLE fontWeight: '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: { // 坐标轴小标记 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,单位px textStyle: { // 其余属性默认使用全局文本样式,详见TEXTSTYLE fontWeight: '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,单位px textStyle: { // 其余属性默认使用全局文本样式,详见TEXTSTYLE fontWeight: 'bolder', color: '#fff' } }, data: [{ value: 1.5, name: 'x1000 r/min&.........完整代码请登录后点击上方下载按钮下载查看
网友评论0