圆环echarts 柱状配置项内容和展示

      var blue = "/asset/get/s/data-1605255510124-QwqfBsT1P.png";
const red = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADgAAAB8CAYAAAA8T3NkAAAIZklEQVR4Xu2cf4xUVxXHP2eGBSkGuhSoirVaYyrakgqN0QqNMG8Xa0vaammLmLQNlR/zBgoFMdF/NkaNP2qh7LyRYn8l/qKAtlZDSucNWIGaVk1rS2ub1EgatHYpG6rYEpaZY+6wg7vL7rz73r6lmtyX8A/zPefc77nn3HPvuTcrjNDnh6o2qgNPxAaXFDNiyh3B3ilxM5g0NnvlXIgmdaDLQZeDSWOnv5zLwaR+dDnocjBp7LgcTMdzLgddDqYTSa4OJvWjy0GXg0ljx9XBdDznctDlYDqR5OpgUj+6HHQ5mDR2XB1Mx3MuB10OphNJrg4m9aPLQZeDSWPH1cF0POdy0OVgOpHk6mBSP7ocdDmYNHZcHUzHcy4HXQ6mE0muDib1o8tBl4NJY8fVwXQ853LQ5WA6keTqYFI/uhx0OZg0dlwdTMdzLgddDqYTSa4OJvWjy0GXg0ljx9XB4XtuWUWnZpWDNpoUvgs8W8uyb9McOWAjEweT2ipaKOvFKtyM8FmUD8cZRB/sS8DDWmNLqV2eSaijn9iwCHZ0aKZrNjdklDUKM9MYUB8dTwhsnLSXbR0dUkuqOzFBv6LXCnxdlYuSGreUe0FhTcmTRy3xw5vB/E49jyx3C1yRxGBSGYUHa1VWbponXXF0xJrB5WW9MiP8CGiNYyQ1rHCIKguDdqnY6rQm6Ff0KyjfBLK2ykcIVwXWBZ7caaM/kqBZSA7N4gfAEhuFZwyjbAg8bkek6d/MaE5QVQq7uFuVL52xgccwpHBXyZNVzUSaEvRDNSH51Rg2zzxUWB3kZMNQhockWKjoAlUeBCLDeAjlR4HdwG9U2D+qyl+P1Tg6agwqVcZT4zzNcIkolyO0AWMTesfk5BWBJ+XB5Acd/Mqyvq8qPAeMT2D0WRXWn3WCbXfMk3/byK/dqeOOZblRYTXwURuZAZjuapVpg5WQ0wmavAt5VIX2OIYEXkVZO2kfW5LuPOoL2qfq273vAJPi2Ae2B54sGChzGsF8qIsEfhxT+a9Hn+Cm9Z+R7phyg8KX7dQpmSw/EfDi6JMMVxfnyiN9ZfoR7Niqow9N5EXgA7aKRVg/aQ9rk87aUHYWbNXsuRPZqJC3HQvw/OS9TO87ln4E86HmBYIYCu8MPFkTAx8b6le0hLLcVlCFL5Ry8rMG/r8EVcWv8DwwzUaZCL8ozuW6qEJro6sZxszklFYeqR/DLD6Fp0uezDiNoP+Y5sgQWugwkIM9ykWb2+QNS/ywYH6o5wg8p/BuG0Va42ON8+SpGfRD/SFwq40CgWuLnjxsg00LE3Px2xh4cpuxXSdYD4OJ/B2YEjkgYV+Qk1mRuJQBvXvip4HpFqpfCTw5/xTBFRX9eE150kIQlGuCNvmlFTZlUCHULyr141rkp8pHSm3y5/oM5su6WgSb40fX5CxTO+bIiUgLIwBY8is9q2VsPdImRKkXuLXoyb11gn6oDwA3RQkB9wWeLLbAjRjED3U78HkLA0HgSaFBcA8QmVcq3FLKiXHG2/blK1oQpdNiAOXAk/YGQdPDnBol1Hf5jcKO1O9+RS9HeTxSv/BikJNpDYL/At4ZKQSTAk8OW+BGDOJX9HwUmwbx3wJP3tsg+D/xpzJtvLKkrBNahCMW2H8Gnkz4vyO4YoeOr43GZgd1LPBkbIPgcaAlyistWVo3zBEb70WpSvx7fre+S6q8aqHgSOBJa4PgP4Bzo4REmV5sE3PSf9u+5WX9REb4XeQAlJeDNvlQg+DvgUsjhWBh4MkWC9yIQQqhLla4J9KAUAly4tUJFsr6UxUWRgmpsqnUJtZnsyh9SX73y3ofwi0WspsDT5aenMGTXetvWwgdmLyXD6Z9erewW4fEORQoLCt5Yu5QYEWos2vwWxtDIuSKOdllg00bk6/ofFH69VyGspHJcEnnXPnTSYI7dExtNK9bFXtlR9AmV6Y9eBt9fqjm0mWuBbarq5v3bLteqn0PvNuA6yyEkRqziu2yzwabFsYP1TSHH7PRp3BvyZP64f0UwUKo1yg8ZKOg3r3qZkbH9WLq54h/q5/QscffxBx2L7QxloG2Tk/q7ZdTBE3L8PWJHLDteyB0BjlZaWNwuJgYK6c5kL88eR8XNhbCfm3DQkW/pso3bAek4Jc8Kdnik+AKoa5T6p1uq09gVdGTuxrgfgRX7daze6r8BZhopc34S/GDNjH3h6l/+VDXCNwRQ/FrPW9xweb58uagBM1/+qHeDnw/hlJDc0NPK+s2Xyo9seSGAN+8W98xroqZhViXrgJLi55s7qv2tLuJJX/QlpYj/BG4OOZgn1FYUvLEbPsSf/myzhLBDNKqAd3H0FNd3VxmSkNTgubH5bt0ZqZW39BGnjAGMDHnyu0K34tF1HTVdzEb5cvAVQm8cywDMzs9eWGg7JCXmzE6bUONp/5qqabsyWTY33WYgw3vmh7na7N4fxam1+DTAvOBCxIQq4s06xUNfXt78q7C9CAXJTU8iJw5S46y2jHZGo0oV02vp+vXaa08ZHvxYTumtHDmcdChbhYNzLvIHOwL6L0z3ApcndbAUtLz88lZboxqQls9MOglaVY2m+ZwSuNvquaenrPJ25QlK4INU36oZmtmCm/c1TUt0sdVWFPKSdFWYSyCRqlf0Rko91ve8tiOwwb3VLXK4k3zZL8NuIGJTdAIms3A6De4TbX+SGhkH+aZB3jwra7DdDZbTIYinYhgQ1nv3tW8bVlq05WL43mgS5X1jKJYmiPmUVGib1gEGxZNR6A6hs+JcgPU39ckfbV0VCEU5YGeVnbYLCJRrFMh2NeIebX0VpbLgE8C5jGA2aGYf+MGDMa8qXlF4SVR9meEx8/p5sm0D9GpE2zmURPSx+HEcEIuasYG/v4fORCpqksb2FMAAAAASUVORK5CYII='
let min = 0;
let max = 270
let title = '出勤率'
// 圆环
let barValue = [10]
// 指针
let pointValue = [10]
// 指针
let picList = [red, blue]

let angleMax = max * 4 / 3

colorList = ['#FF5652', '#FFBD4B']


let zIndex = 100
let graphicData = pointValue.map((item, index) => {
    // 指针
    let rotate = parseInt(item / max * 270)
    return {
        type: 'image',
        left: 'center',
        top: 'center',
        rotation: (Math.PI / 180 * 135) - Math.PI / 180 * rotate,
        position: [0, 0],
        style: {
            image: picList[index],
            height: 62,
            width: 28
        }
    }
})
let seriesData = barValue.map((item, index) => {
    return {
        type: 'bar',
        data: [,,item],
        coordinateSystem: 'polar',
        barWidth: 17,
        // barMaxWidth: '20%',
        z: 99 - index,
        name: '抢修项目',
        roundCap: true,
        color: {
            x: 0,
            y: 0,
            x2: 1,
            y2: 0,
            colorStops: [{
                offset: 0,
                color: 'rgba(99, 180, 255, 1)'
            }, {
                offset: 1,
                color: 'rgba(24, 144, 255, 1)'
            }]
        },
        barGap: '-80%',
    }
})
console.log('seriesData', seriesData)
var option = {
    title:{
        text:title,  
        textStyle:{
            color:'#ffffff',
            fontSize:13
        },
        backgroundColor:{
            x:0,
            y:0,
            x2:1,
            y2:0,
            colorStops:[
                {
                    offset:0,
                    color:'rgba(83, 172, 255, 1)'
                },
                {
                    offset:1,
                    color:'rgba(24, 144, 255, 1)'
                }
            ]
        },
        padding:[10,45,7,45],
        borderRadius:13,
        bottom:20,
        left:'center'
    },
    angleAxis: {
        axisLine: {
            show: false
        },
        axisLabel: {
            show: false
        },
        splitLine: {
            show: false
        },
        axisTick: {
            show: false
        },
        min: 0,
        max: angleMax,
        boundaryGap: ['0', '100'],
        startAngle: 225
    },
    radiusAxis: {
        type: 'category',
        axisLine: {
            show: false
        },
        axisTick: {
            show: false
        },
        axisLabel: {
            show: false
        },
        data: ['a', 'b', 'c'],
        z: 10
    },
    polar: {
        radius: '80%'
    },
    graphic: [
        {
            type: 'group',
            bottom: 200,
            left: 'center',
            width: 100,
            height: 300,
            z: 1000,
            children: [{
                type: 'text',
                style: {
                    fill: '#00BAFF',
                    text: barValue+'%',
                    font: '400 30px Source Han Sans CN',
                }
            }]

        }
        , ...graphicData
    ],
    series: [...seriesData,
        {
            type: 'bar',
            data: [,,max],
            z: 0,
            silent: true,
            coordinateSystem: 'polar',
            barWidth: 18,
            // barMaxWidth: '40%',
            name: 'C',
            roundCap: true,
            color: {
                x: 0,
                y: 0,
                x2: 1,
                y2: 0,
                colorStops: [{
                    offset: 0,
                    color: 'rgba(99, 180, 255, 0.2)'
                }, {
                    offset: 1,
                    color: 'rgba(24, 144, 255, 0.2)'
                }]
            },
        },
        {
            type: 'gauge',
            radius: '90%',
            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: {
                show: false,
                lineStyle: {
                    width: 20,
                    color: [
                        [0, '#5fa7ca'],
                        [1, '#5fa7ca']
                    ],
                    opacity: 0
                }
            },
            axisTick: {
                show: false,
                length: 8,
                lineStyle: {
                    // 此处修改圆环tick的颜色
                    color: 'rgba(21, 152, 255, 0.3)',
                    width:3,
                }
            },
            splitLine: {
                show: false
            },
            axisLabel: {
                show: false,
                distance: 18, //距离刻度的距离
                lineHeight: -50,
                formatter: function(value) {
                    return value % 100 === 0 ? value : '';
                }
            }
        }
    ],


};