echarts 多环形图

最新推荐文章于 2024-05-15 18:02:09 发布

北京-小强-加油

最新推荐文章于 2024-05-15 18:02:09 发布

阅读量321

点赞数 2

文章标签： echarts android 前端

本文链接：https://blog.csdn.net/qqqqqqqq188/article/details/137632244

版权

文章详细描述了如何使用ECharts库在JavaScript中创建一个带有三种颜色条形的环形图，包括角度轴、半径轴设置以及每个条形的颜色和背景样式。

摘要由CSDN通过智能技术生成

环形图效果：
在这里插入图片描述

option = {
    "angleAxis": {
        "max": 1,
        "show": false,
        "splitLine": {
            "show": false
        },
        "axisLabel": {
            "show": false
        },
        "axisTick": {
            "show": false
        }
    },
    "radiusAxis": {
        "show": false,
        "type": "category",
        "data": [
            "v",
            "w",
            "x"
        ]
    },
    "polar": {
        "radius": [
            "30%",
            "80%"
        ],
        "center": [
            "50%",
            "50%"
        ]
    },
    "series": [
        {
            "type": "bar",
            "data": [
                1.047
            ],
            "coordinateSystem": "polar",
            "barWidth": 15,
            "showBackground": true,
            "backgroundStyle": {
                "color": "rgba(255, 204, 0, 0.4)"
            },
            "roundCap": true,
            "itemStyle": {
                "color": "#FFCC00"
            }
        },
        {
            "type": "bar",
            "data": [
                0.273
            ],
            "coordinateSystem": "polar",
            "barWidth": 15,
            "showBackground": true,
            "backgroundStyle": {
                "color": "rgba(40, 199, 194, 0.4)"
            },
            "roundCap": true,
            "itemStyle": {
                "color": "#28C7C2"
            }
        },
        {
            "type": "bar",
            "data": [
                0.273
            ],
            "coordinateSystem": "polar",
            "barWidth": 15,
            "showBackground": true,
            "backgroundStyle": {
                "color": "rgba(0, 164, 219, 0.4)"
            },
            "roundCap": true,
            "itemStyle": {
                "color": "#00A4DB"
            }
        }
    ]
}```