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 = {
            
            tooltip: {
                formatter: "{a} <br/>{c} {b}"
            },
            toolbox: {
                show: true,
                feature: {
                    restore: {
                        show: true
                    },
                    saveAsImage: {
                        show: true
                    }
                }
            },
            series: [{
                name: '速度',
                type: 'gauge',
                z: 3,
                min: 0,
                max: 220,
                splitNumber: 11,
                radius: '50%',
                axisLine: {
                    // 坐标轴线
                    lineStyle: {
                        // 属性lineStyle控制线条样式
                        width: 10
                    }
                },
                axisTick: {
                    // 坐标轴小标记
                    length: 15,
                    // 属性length控制线长
                    lineStyle: {
                        // 属性lineStyle控制线条样式
                        color: 'auto'
                    }
                },
                splitLine: {
                    // 分隔线
                    length: 20,
                    // 属性length控制线长
                    lineStyle: {
                        // 属性lineStyle(详见lineStyle)控制线条样式
                        color: 'auto'
                    }
                },
       .........完整代码请登录后点击上方下载按钮下载查看

网友评论0