柱状图仪表盘echarts 柱状配置项内容和展示

圆角柱状图和仪表盘结合

      var image = "/asset/get/s/data-1557476832002-bIcP0vhB2.png";

option = {
    backgroundColor: '#FFF',
    title: [{
        text: 'AQI指数',
        bottom: '250',
        x: 'center',
        // borderColor: '#fff',
        // borderWidth: 1,
        // borderRadius: 15,
        padding: [7, 14],
        textStyle: {
            fontWeight: 'normal',
            fontSize: 18,
            color: '#333333'
        }
    }],
    angleAxis: {
        show: false,
        max: 100 * 360 / 270, //-45度到225度，二者偏移值是270度除360度
        type: 'value',
        startAngle: 225, //极坐标初始角度
        splitLine: {
            show: false
        }
    },
    barMaxWidth: 14, //圆环宽度
    radiusAxis: {
        show: false,
        type: 'category',
    },
    //圆环位置和大小
    polar: {
        center: ['50%', '50%'],
        // radius: '180'
        radius: '80%'
    },
    tooltip: {
        show: true,
        trigger: 'item'
    },
    series: [{
            type: 'bar',
            data: [{ //上层圆环，显示数据
                value: 75,
                itemStyle: {
                    color: '#F52639',
                },

            }],
            barGap: '-100%', //柱间距离,上下两层圆环重合
            coordinateSystem: 'polar',
            roundCap: true, //顶端圆角
            z: 2, //圆环层级，同zindex
            tooltip: {
                position: 'top',
                formatter: function(e) {
                    return '良';
                },
                color: 'red'
            }

        },
        // { //下层圆环，显示最大值
        //     type: 'bar',
        //     barWidth: 1,
        //     data: [{
        //         value: 100,
        //         itemStyle: {
        //             color: '#E9E9E9'
        //         }
        //     }],
        //     barGap: '-50%',
        //     coordinateSystem: 'polar',
        //     roundCap: true,
        //     z: 1,
        //     tooltip: {
        //         show: false,
        //         position: 'bottom'
        //     },
        //     emphasis: {
        //         itemStyle: {
        //             color: '#E9E9E9'
        //         }
        //     }
        // },
        {
            name: 'AQI',
            type: 'gauge',
            startAngle: 225, //起始角度，同极坐标
            endAngle: -45, //终止角度，同极坐标
            min: 0,
            max: 100,
            radius: '40%',
            center: ["50%", "50%"],
            axisLine: {
                show: true,
                lineStyle: {
                    color: [
                        [0.8, "#E9E9E9"],
                        [1, "#E9E9E9"]
                    ],
                    width: 2
                }
            },
            splitLine: {
                show: false
            },
            axisTick: {
                show: false
            },
            axisLabel: {
                show: false
            },
            splitLabel: {
                show: false
            },
            pointer: {
                show: false
            },
            title: {
                // fontFamily: 'PingFang SC Regular',
                fontSize: 20,
                color: 'transparent',
                offsetCenter: ['0', '0'],
                formatter: '2',
                // rich: {},
                // width: 400 / 3,
                // height: 260 / 3,
                backgroundColor: {
                    image: image
                }
            },
            detail: {
                show: false,
                formatter: function(e) {
                    return '良';
                },
                color: '#fff',
                fontSize: 16,
                offsetCenter: [40, -15],
                backgroundColor: '#FCC841',
                borderRadius: 8,
                padding: [4, 12],
            },
            data: [{
                value: 100,
                name: 100 + '\n' + '{a|' + '首要污染物：PM10' + '}'
            }]
        },
        {
            type: "gauge",
            name: "外圈",
            radius: "66%",
            startAngle: "180",
            endAngle: "0",
            splitNumber: "1",
            min:0,
            max:75,
            pointer: {
                show: false,
            },
            detail: {
                show: false,
            },
            data: [{
                value: 1,
            }, ],
            axisLine: {
                show: true,
                lineStyle: {
                    //-----------------外圈的颜色
                    color: [
                        [1, "rgba(49,95,138,1)"]
                    ],
                    width: 2,
                    opacity: 1,
                },
            },
            axisTick: {
                show: false,
            },
            splitLine: {
                show: true,
                length: 20,
                lineStyle: {
                    color: "#051932",
                    width: 0,
                    type: "solid",
                },
            },
            axisLabel:{
                textStyle:{
                    fontSize:10
                },
                formatter: "{value}%"
            }
        },
    ]
}