仪表盘设置图文实例echarts category配置项内容和展示

echarts 仪表盘设置图文

      var option = {
        legend: {     //配置legend，这里的data，要对应type为‘bar’的series数据项的‘name’名称，作为图例的说明
            data:['第一阶段','第二阶段','第三阶段','第四阶段','第五阶段'],
            selectedMode:false,  //图例禁止点击
            top:20,
            itemWidth:23,
            itemHeight:6,
            textStyle: {
                color: '#707070',
                fontStyle: 'normal',
                fontWeight: 'normal',
                fontFamily: 'sans-serif',
                fontSize: 12
            }
        },
        grid: {
            z:1,    //grid作为柱状图的坐标系，其层级要和仪表图层级不同，同时隐藏
            show:false,
            left: '-30%',
            right: '4%',
            bottom: '3%',
            containLabel: true,
            splitLine:{
                show: false    //隐藏分割线
            },
        },
        xAxis : [   //这里有很多的show，必须都设置成不显
             {
                type: 'category',
                data: [],
                axisLine: {
                    show: false
                },
                splitLine:{
                    show: false
                },
                splitArea: {
                    interval: 'auto',
                    show: false
                }
            }
        ],
        yAxis : [ //这里有很多的show，必须都设置成不显示
            {
                type : 'value',
                axisLine: {
                    show: false
                },
                splitLine:{
                    show: false
                },
            }
        ],
        toolbox: {
            show: false,
        },
        series : [
            {
                name:'刻度盘',
                type: 'gauge',
                startAngle: 180,
                endAngle: 0,
                center: ["50%", "80%"], //整体的位置设置
                z: 3,
                min: 0,
                max: 12,
                splitNumber: 12,
                radius: '90%',
                axisLine: {            // 坐标轴线
                     lineStyle: {       // 属性lineStyle控制线条样式
                          width: 10,
                          color: [
                              [0.2, '#41C468'],
                              [0.4, '#70C1B3'],
                              [0.6, '#00A1E9'],
                              [0.8, '#EE4444'],
                              [1, '#DCF2C4']
                          ],
                     }
                },
                axisTick: {            // 坐标轴小标记
                     length: 19,        // 属性length控制线长
                     splitNumber: 2,
                     lineStyle: {       // 属性lineStyle控制线条样式
                          color: '#cdcdcd'
                     }
                },
                splitLine: {           // 分隔线
                     length: 20,         // 属性length控制线长
                     lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                          color: 'auto'
                     }
                },
                axisLabel: {
                    textStyle: {
                        color:'#454A57'
                    }
                },
                pointer: {
                    show: true,
                    length: '70%',
                    width: 5,
                },
                itemStyle:{
                    normal:{
                        color:'#454A57',
                        borderWidth:0
                    }
                },
                title: {   //仪表盘标题
                    show: true,
                    offsetCenter: ['0', '20'],
                    textStyle: {
                        color: '#444A56',
                        fontSize: 12,
                        fontFamily: 'Microsoft YaHei'
                    }
                },
                detail: {
                    textStyle: {
                        fontSize: 12,
                        color: '#707070'
                    },
                    offsetCenter: ["0%", "-50%"],
                    formatter: function(){
                        return '创作时间\n'+'2018-01-17';
                    }
                },
                data:[{value: '3', name: '当前阶段'}]
            },
            {
                name: '灰色内圈',
                type: 'gauge',
                z:2,
                radius: '90%',
                startAngle: 180,
                endAngle: 0,
                center: ["50%", "80%"], //整体的位置设置
                splitNumber: 4,
                axisLine: { // 坐标轴线
                    lineStyle: { // 属性lineStyle控制线条样式
                        color: [
                            [1, '#ccc']
                        ],
                        width: 25,
                        opacity: 1,
                    }
                },
                splitLine: { //分隔线样式
                     show: false,
                },
                axisLabel: { //刻度标签
                     show: false,
                },
                axisTick: { //刻度样式
                     show: false,
                },
                detail : {
                    show:false,
                    textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                        fontWeight: 'bolder',
                        fontSize:12
                    }
                },
            },
            {
                name:'第一阶段',
                type:'bar',
                barWidth: '60%',  //不显示，可以随便设置
                 data:[0],
                itemStyle: {
                    normal: {
                        color: '#41C468',  //这里的图例要注意，颜色设置和仪表盘的颜色对应起来
                    }
                }
            },
            {
                name:'第二阶段',
                type:'bar',
                barWidth: '60%',
                data:[0],
                itemStyle: {
                    normal: {
                        color: '#70C1B3',
                    }
                }
            },
            {
                name:'第三阶段',
                type:'bar',
                barWidth: '60%',
                data:[0],
                itemStyle: {
                    normal: {
                        color: '#00A1E9',
                    }
                }
            },
            {
                name:'第四阶段',
                type:'bar',
                barWidth: '60%',
                data:[0],
                itemStyle: {
                    normal: {
                        color: '#EE4444',
                    }
                }
            },
            {
                name:'第五阶段',
                type:'bar',
                barWidth: '60%',
                data:[0],
                itemStyle: {
                    normal: {
                        color: '#DCF2C4',
                    }
                }
            }
        ]
    }