echarts实现夜晚暗黑模式仪表盘图表效果代码-html代码-BFW代码库

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',
                .........完整代码请登录后点击上方下载按钮下载查看