身心能量指数 ♥♥♥♥♥echarts 柱状配置项内容和展示

      let data = 100;
let rate = '♥♥♥♥♥';
option = {
    //backgroundColor: 'transparent',
    backgroundColor: '#00111b',
    // 标题：【0】指数显示，【1】数值显示
    title: [{
        text: '身心能量指数\n' + rate,
        x: 'center',
        top: '54%',
        textStyle: {
            color: '#be8c3c',
            fontSize: 20,
            fontWeight: '100',
        }
    }, {
        text: data,
        x: 'center',
        top: '43%',
        textStyle: {
            fontSize: '90',
            color: '#be8c3c',
            fontFamily: 'SimHei',
            fontStyle: 'oblique',
            foontWeight: '500',
        },
    }],
    // 极坐标系
    polar: {
        radius: ['24%', '30%'],
        center: ['50%', '50%'],
    },
    // 极坐标系：角度轴
    angleAxis: {
        max: 100 * 360 / 270,
        show: false,
        type: 'value',
        startAngle: 225
    },
    // 极坐标系：径向轴
    radiusAxis: {
        type: 'category',
        show: true,
        axisLabel: {
            show: false,
        },
        axisLine: {
            show: false,

        },
        axisTick: {
            show: false
        },
    },
    series: [
        // 第二层：数据以进度条的形式展示
        {
            type: 'bar',
            data: [{
                value: data
            }],
            itemStyle: {
                color: function() {
                    let obj = {
                        type: 'linear',
                        x: 0, //右
                        y: 0.5, //下
                        x2: 1, //左
                        y2: 0, //上
                        colorStops: [{
                            offset: 0,
                            color: '#8ac4d4'
                        }, {
                            offset: 1,
                            color: '#ec5e26'
                        }]
                    };

                    if (data >= 0 && data < 20) {
                        obj.colorStops[1].color = '#8ac4d4';
                    } else if (data >= 20 && data < 40) {
                        obj.y = 0.3;
                        obj.x2 = 2;
                    } else if (data >= 40 && data < 60) {
                        obj.y = 0.3;
                        obj.x2 = 1.5;
                    } else if (data >= 60 && data < 80) {
                        obj.y = 0.4;
                        obj.x2 = 1.1;
                    }
                    return obj;
                }
            },
            barGap: '-100%',
            coordinateSystem: 'polar',
            roundCap: true,
            cursor: 'auto',
            z: 2
        },
        // 第二层：进度条背景
        {
            type: 'bar',
            data: [{
                value: 100,
            }],
            itemStyle: {
                color: '#013f72'
            },
            barGap: '-100%',
            coordinateSystem: 'polar',
            roundCap: true,
            cursor: 'auto',
            emphasis: {
                itemStyle: {
                    color: '#013f72'
                }
            },
            z: 1
        },
        // 第一层：中心文字展示区
        {
            type: 'pie',
            radius: ['0%', '22%'],
            hoverAnimation: false,
            center: ['50%', '50%'],
            cursor: 'auto',
            itemStyle: {
                normal: {
                    labelLine: {
                        show: false
                    },
                    color: {
                        type: 'radial',
                        x: 0.5,
                        y: 0.5,
                        r: 0.5,
                        colorStops: [{
                            offset: 0,
                            color: '#174869'
                        }, {
                            offset: 1,
                            color: '#08385c'
                        }]
                    }
                }
            },
            data: [{
                value: 100
            }],
            z: 2
        },
        // 第三层；仪表盘：只显示刻度
        {
            type: 'gauge',
            radius: '35%',
            startAngle: '225',
            endAngle: '-45',
            splitNumber: 10,
            center: ['50%', '50%'],
            min: 0,
            max: 100,
            pointer: {
                show: false
            },
            title: {
                show: false
            },
            detail: {
                show: false
            },
            data: [{
                value: 100,
                name: ''
            }],
            axisLine: {
                lineStyle: {
                    width: 20,
                    color: [
                        [0, '#5fa7ca'],
                        [1, '#5fa7ca']
                    ],
                    opacity: 0
                }
            },
            axisTick: {
                length: 14,
                lineStyle: {
                    color: 'auto'
                }
            },
            splitLine: {
                show: false
            },
            axisLabel: {
                show: true,
                distance: 18, //距离刻度的距离
                lineHeight: -50,
                formatter: function(value) {
                    return value % 100 === 0 ? value : '';
                }
            }
        },
        // 第四层；背景圆：带阴影
        {
            type: 'pie',
            radius: ['0%', '40%'],
            hoverAnimation: false,
            center: ['50%', '50%'],
            cursor: 'auto',
            itemStyle: {
                color: {
                    type: 'radial',
                    x: 0.5,
                    y: 0.5,
                    r: 0.5,
                    colorStops: [{
                        offset: 0,
                        color: '#002e50'
                    }, {
                        offset: 0.9,
                        color: '#002e50'
                    }, {
                        offset: 1,
                        color: '#134568'
                    }]
                }
            },
            data: [{
                value: 100
            }],
            labelLine: {
                show: false
            },
            z: -1
        },
        // 第五层：视觉上类似于边框，带阴影
        {
            type: 'pie',
            radius: ['0', '40.4%'],
            hoverAnimation: false,
            center: ['50%', '50%'],
            cursor: 'auto',
            itemStyle: {
                color: '#146a90',
                shadowBlur: 50,
                shadowColor: '#146a90'
            },
            data: [{
                value: 100
            }],
            labelLine: {
                show: false
            },
            emphasis: {
                itemStyle: {
                    color: '#146a90'
                }
            },
            z: -2
        },
        // 第六层：看着类似一个边框，不细看，看不出来，此项目的在于突出立体感
        {
            type: 'pie',
            radius: ['46.7%', '47%'],
            hoverAnimation: false,
            center: ['50%', '50%'],
            cursor: 'auto',
            itemStyle: {
                color: '#07223b',
            },
            data: [{
                value: 100
            }],
            labelLine: {
                show: false
            },
            emphasis: {
                itemStyle: {
                    color: '#07223b'
                }
            },
            z: -2
        },
        // 第七层：
        {
            type: 'pie',
            radius: ['47%', '54%'],
            hoverAnimation: false,
            center: ['50%', '50%'],
            cursor: 'auto',
            itemStyle: {
                color: '#00182d',
            },
            data: [{
                value: 100
            }],
            labelLine: {
                show: false
            },
            emphasis: {
                itemStyle: {
                    color: '#00182d'
                }
            },
            z: -2
        },
        // 第八层：
        {
            type: 'pie',
            radius: ['54%', '60%'],
            hoverAnimation: false,
            center: ['50%', '50%'],
            cursor: 'auto',
            itemStyle: {
                color: '#011422',
            },
            data: [{
                value: 100
            }],
            labelLine: {
                show: false
            },
            emphasis: {
                itemStyle: {
                    color: '#011422'
                }
            },
            z: -2
        },
    ]
};

// 随机数据
function numb() {
    data = Math.floor(Math.random() * 100);
    if (data >= 0 && data < 20) {
        rate = '♡♡♡♡♡';
    } else if (data >= 20 && data < 40) {
        rate = '♥♡♡♡♡';
    } else if (data >= 40 && data < 60) {
        rate = '♥♥♡♡♡';
    } else if (data >= 60 && data < 80) {
        rate = '♥♥♥♡♡';
    } else if (data >= 80 && data <= 100) {
        rate = '♥♥♥♥♡';
    } else {
        rate = '♥♥♥♥♥';
    }
    option.title[0].text = '身心能量指数\n' + rate;
    option.title[1].text = data;
    option.series[0].data[0].value = data;
    myChart.setOption(option, true);
}
setInterval(function() {
    numb();
}, 1000);