echars组合饼图

最新推荐文章于 2024-06-27 10:10:22 发布

LoveZJC12138

最新推荐文章于 2024-06-27 10:10:22 发布

阅读量339

点赞数

文章标签： javascript 前端 html echarts 开发语言 Powered by 金山文档

本文链接：https://blog.csdn.net/LoveZJC96/article/details/128658173

版权

本文介绍如何利用Echarts库在前端开发中创建一种特殊的饼图，即组合饼图，展示数据的组成结构。

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

做成这种效果，做成组成饼图（其实是一个饼图）。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>
    <style>
        #map {
            height: 500px;
            width: 80%;
            margin: 0 auto;
        }
    </style>
</head>

<body>
    <div id="map"></div>
    <script src=" https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>

    <script>

        let pieName = [
            "农村环境",
            "工业集聚",
            "城市黑臭水",
            "城镇生活",
            "散乱污整治"
        ]
        //组合饼图数据
        let pieData = [//把所有数据分成对应的数据块
            [
                {
                    "value": 120,
                    "name": "农村环境"
                },
                {
                    "value": 88,
                    "name": "工业集聚"
                },
                {
                    "value": 99,
                    "name": "城市黑臭水"
                },
                {
                    "value": 25,
                    "name": "城镇生活"
                },
                {
                    "value": 137.5,
                    "name": "散乱污整治"
                }
            ],
            [
                {
                    "value": 10,
                    "name": "农村环境"
                },
                {
                    "value": 40,
                    "name": "工业集聚"
                },
                {
                    "value": 50,
                    "name": "城市黑臭水"
                },
                {
                    "value": 114.29,
                    "name": "城镇生活"
                },
                {
                    "value": 71.43,
                    "name": "散乱污整治"
                }
            ],
            [
                {
                    "value": 30,
                    "name": "农村环境"
                },
                {
                    "value": 110,
                    "name": "工业集聚"
                },
                {
                    "value": 20,
                    "name": "城市黑臭水"
                },
                {
                    "value": 100,
                    "name": "城镇生活"
                },
                {
                    "value": 100,
                    "name": "散乱污整治"
                }
            ],
            [
                {
                    "value": 70,
                    "name": "农村环境"
                },
                {
                    "value": 80,
                    "name": "工业集聚"
                },
                {
                    "value": 90,
                    "name": "城市黑臭水"
                },
                {
                    "value": 200,
                    "name": "城镇生活"
                },
                {
                    "value": 60,
                    "name": "散乱污整治"
                }
            ]
        ]
        //外圈数据
        let pieOutData = [
            { value: 5, names: 'CODMn' },
            { value: 10, names: 'NH3' },
            { value: 20