ECharts获取Json文件数据

ECharts获取Json文件数据

编写html

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>echarts-JSON请求数据</title>

    <script src="./echarts.helper.js"></script>
    <script src="./echarts.min.js"></script>
    <script src="./jquery-1.9.1.min.js"></script>
    <script>
        $(document).ready(function () {
            var chart = document.getElementById('chart');
            var chartData = echarts.init(chart);
            chartData.setOption({
                title: { text: '异步加载' },
                tooltip: {},
                legend: { data: ['销量'] },
                xAxis: { data: [] },
                yAxis: {},
                series: [{ name: '销量', type: 'bar', data: [] }]
            });
            $.get('./data.json').done(function (data) {
                console.dir(data);     // 填入数据       
                chartData.setOption({
                    xAxis: {
                        data: data.categories
                    },
                    series: [{
                        name: '销量',
                        data: data.data
                    }]
                });
            });
            function eConsole(param) {
                console.dir(param);
            } chartData.on("click", eConsole);
        });</script>
</head>

<body>
    <div id="chart" style="width: 1200px; height: 500px;"></div>
</body>

</html>

编写json

{
    "categories": [
        "苹果",
        "橘子",
        "荔枝",
        "桃子",
        "栗子",
        "梨子",
        "柿子"
    ],
    "data": [
        500,
        280,
        386,
        190,
        107,
        207,
        452
    ]
}

提示，这个要放在服务器里边去跑，不然后要报跨域异常

  • 我用的是apache-tomcat服务器。
  • 把写的这两个文件放在一个文件夹下。
  • 在把这个文件夹放在apache-tomcat下webapps目录下即可
  • 运行项目需启动apache-tomcat服务器。在bin目录下点击startup.bat文件即可。

前端运行

启动apache-tomcat

项目文件路径

这里的js文件如果需要的可加我qq:2103717751

posted @ 2021-10-28 22:44  阿向向  阅读(2258)  评论(0)  编辑  收藏  举报