echart仪表盘demo

2017-05-31
cmd-markdown-logo
案例 https://blog.csdn.net/guohangfei001/article/details/80995469
echart仪表盘demo

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>ECharts练习</title>
    <script src="https://cdn.bootcss.com/echarts/4.1.0/echarts.min.js"></script>
</head>
<body>
<div id="chart" class="chart" style="height: 530px;"></div>

<script type="text/javascript">
    // 基于准备好的dom，初始化echarts图表
    var myChart = echarts.init(document.getElementById('chart'));

    option = {
        backgroundColor: '#022647',
        toolbox: {
            feature: {
                restore: {},
                saveAsImage: {}
            }
        },

        series: [
            {
                name: '百分比100%',
                type: 'gauge',
                splitNumber: 12, //刻度数量
                //半径
                radius: 150,
                //起始角度。圆心 正右手侧为0度，正上方为90度，正左手侧为180度。
                startAngle: 180,
                //结束角度。
                endAngle: 0,
                center: ['50%', '50%'],
                //仪表盘轴线相关配置。
                axisLine: {            // 坐标轴线
                    show:true,
                    lineStyle: {       // 属性lineStyle控制线条样式
                        width: 10,
                        //控制显示长度 1是百分百
                        color:[[1, '#023454']],
                    }
                },
                //分隔线样式。
                splitLine: {
                    show:true,
                    length:10,
                    lineStyle:{
                        color: '#022748',
                        width:10
                    }
                },
                //刻度样式
                axisTick: {
                    show: false,
                },
                //刻度标签。
                axisLabel: {
                    show:false,
                },
                //仪表盘指针。
                pointer: {
                    show: false,
                    //指针长度
                    length:'90%',
                },
                //仪表盘标题。
                title: {
                    show: true,
                    offsetCenter: [0, '-10%'], // x, y，单位px
                    textStyle: {
                        color: 'white',
                        fontSize: 30
                    }
                },
                //仪表盘详情，用于显示数据。
                detail: {
                    show: true,
                    offsetCenter: [0, '-40%'],
                    formatter: '{value}%',
                    textStyle: {
                        fontSize: 30,
                        color:'#F8F43C'
                    }
                },
                data: [
                    { value:21,name:'完成率'},
                ],
                zlevel:1
            },
            {
                name: '进度条',
                type: 'gauge',
                //半径
                radius: 150,
                //起始角度。圆心 正右手侧为0度，正上方为90度，正左手侧为180度。
                startAngle: 180,
                //结束角度。
                endAngle: 0,
                center: ['50%', '50%'],
                //仪表盘轴线相关配置。
                axisLine: {            // 坐标轴线
                    show:true,
                    lineStyle: {       // 属性lineStyle控制线条样式
                        width: 10,
                        //控制显示长度 1是百分百
                        color:[[0.6, '#00BCD2']]
                    }
                },
                //分隔线样式。
                splitLine: {
                    show:true,
                    length:10,
                    lineStyle:{
                        color: '#022748',
                        width:10
                    }
                },
                //刻度样式
                axisTick: {
                    show: false,
                },
                //刻度标签。
                axisLabel: {
                    show:false,
                },
                //仪表盘指针。width
                pointer: {
                    show: false,
                },
                //仪表盘标题。
                title: {
                    show: false
                },
                //仪表盘详情，用于显示数据。
                detail: {
                    show: false,
                    offsetCenter: [0, '-10%'],
                    formatter: '',
                    textStyle: {
                        fontSize: 0
                    }
                },
                data: [
                    {name:'数量', value:'n'},
                ],
                zlevel:2
            }
        ]
    };

    // 为echarts对象加载数据
    myChart.setOption(option);
</script>
</body>
</html>