echarts动态加载数据生成饼状图

最新推荐文章于 2024-10-29 17:09:31 发布

原创

最新推荐文章于 2024-10-29 17:09:31 发布 · 903 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#JS #Echarts #Ajax #动态加载 #饼状图

本文通过Ajax技术从JSON文件获取数据，动态生成Echarts饼状图。展示了如何结合Echarts、jQuery和Ajax实现数据的动态加载，提供了相关代码示例及数据结构，并给出了必要的资源下载链接。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本文简单介绍使用ajax从JSON文件加载数据，动态生产并状态，第一次写，供大家参考。欢迎大家提出优化意见和建议。

一下是前端的代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .echarts {
            margin: 0 auto;
            width: 1000px;
            height: 500px;
        }
    </style>

    <script src="js/echarts.js"></script>
    <script src="js/jquery-3.4.1.js"></script>
    <script src="js/jquery-3.4.1.min.js"></script>
</head>
<body>
<div id="database_chart" class="echarts"></div>
<script type="text/javascript">
    var myChart = echarts.init(document.getElementById('database_chart'));
    myChart.showLoading({
        text: '正在努力的读取数据中...',
    });

    function bindData() {
        $.ajax({
            url: 'js/data.json',  //url: '@Url.Action("GetDataBaseRecord