Echarts图表实现数据异步加载_echarts 的异步加载json数据饼图html-优快云博客

这篇博客展示了如何使用ECharts库和jQuery来动态加载并展示JSON数据。HTML文档中，ECharts初始化了一个饼图，并通过AJAX从data.json文件获取数据。数据包括不同来源的访问统计，如魔术贴、板带等，每个来源都有相应的访问计数。当数据加载完成后，ECharts更新图表以显示这些信息。

data.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="echarts.min.js"></script>
    <script src="./jquery.js"></script>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        var myChart = echarts.init(document.getElementById('main'));
        // 显示标题，图例和空的坐标轴
        myChart.setOption({
            title: {
                text: '某站点用户访问来源',
                subtext: '纯属虚构',
                left: 'center'
            },
            tooltip: {
                trigger: 'item'
            },
            legend: {
                orient: 'vertical',
                left: 'left',
            },
            series: [{
                name: '访问来源',
                type: 'pie',
                radius: '50%',
                
                data: [],
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }]
        });
        $.ajax({
            type: "get",
            async: true,
            url: "data.json",
            dataType: "json",
            success: function (data) {
                console.log(data);
                myChart.setOption({
                    series: [{
                        data: data.serviceTypeInfo
                    }]
                })
            }
        });
    </script>
</body>
</html>

data.json

{
    "serviceTypeInfo": [{
        "name": "魔术贴",
        "value": "17717282"
    }, {
        "name": "板带",
        "value": "17717282"
    }, {
        "name": "帽檐",
        "value": "12234028"
    }, {
        "name": "裁剪",
        "value": "17717282"
    },
    {
        "name": "魔法",
        "value": "17717282"
    }]
}