echarts中读取json文件；并在环形图中间显示总数_echarts 环形图中间汇总数-CSDN博客

本文链接：https://blog.csdn.net/junjiu0420/article/details/109495010

json文件

{
  "list": [
    { "value": 3, "name": "张江北区" },
    { "value": 3, "name": "张江南区" },
    { "value": 2, "name": "张江中区" },
    { "value": 3, "name": "康桥工业园南区" },
    { "value": 5, "name": "国际医学园区" },
    { "value": 4, "name": "规划保留用地" },
    { "value": 5, "name": "康桥工业园北区" }
  ]
}

html文件

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/echarts.min.js"></script>
    <script src="./jquery/jquery.js"></script>
    <style>
        ::-webkit-scrollbar {
            display: none;
            /* Chrome Safari */
        }

        * {
            margin: 0;
            padding: 0;
        }

        body {
            /* width: 100vw;
            height: 90vh; */
            /* background-color: rgb(94, 140, 158); */
        }

        * {
            content: "";
        }

        .main {
            width: 100vw;
            height: 90vh;
            /* background-color: rgb(14, 150, 59); */
            display: block;
        }
    </style>
</head>

<body>
    <canvas class="main"></canvas>
    <script>


        let width = document.body.offsetWidth;
        let height = document.body.offsetHeight;

        var el = document.querySelector('.main');
        el.width = width;
        el.height = height;

        var data = []
        var total = 0;

        $.ajax({
            type: 'get',
            url: 'json/data.json',
            dataType: 'json',
            success: function (response) {
                console.log(response.list);
                data = response.list;
            },
            error: function () {
                console.log('数据获取失败');
            }
        }).then(() => {
            console.log(data);
            data.forEach((res)=>{
                total+=res.value;
            })
            let myCharts = echarts.init(el);

            function setEchartsPie(data, total) {

                let option = {
                    // data = [1,2,2,3,5,4,4],
                    title: {
                        zlevel: 0,
                        subtext: total + '例',
                        subtextStyle: {
                            color: '#13227a',
                            fontWeight: 'bold',
                            fontSize: 50
                        },
                        x: 'center',//文字位置
                        y: 'center'//文字位置
                    },

                    legend: {
                        show: false,
                        data: ['张江北区', '张江南区', '张江中区', '康桥工业园南区', '国际医学园区', '规划保留用地', '康桥工业园北区']
                    },
                    tooltip: {
                        show: false
                    },

                    legend: {
                        show: false,
                        selectedMode: false,
                    },
                    series: [{
                        name: '访问来源',
                        type: 'pie',
                        radius: ['60%', '75%'],
                        avoidLabelOverlap: false,
                        hoverAnimation: false,
                        label: {
                            show: true,
                            // position: 'center',
                            formatter: '{b}:{c}例',
                            rich: {
                                c: {
                                    color: '#13227a',
                                    fontSize: 12,
                                    lineHeight: 10
                                },
                                // // b: {
                                //     fontSize: 12,
                                //     lineHeight: 20,
                                //     color: '#333'
                                // },
                            },
                            textStyle: {
                                fontSize: 25,

                                color: "#666"
                            }
                        },
                        emphasis: {
                            label: {
                                show: false,
                                fontSize: '30',
                                fontWeight: 'bold'
                            }
                        },
                        labelLine: {
                            show: true,
                            length: 50,
                            length2: 150,
                            lineStyle: {
                                color: '#808080'
                            },
                        },

                        data: data,
                    }]
                };
                myCharts.setOption(option);
            }
            setEchartsPie(data, total)
        });
    </script>
</body>

</html>

结果截图：