前几天看教程,从本地动态获取数值可以出图,但是如下我得代码读取不了本地文件,我不会 jQuery,简单了解 js。 echarts学习 data 文件内容: { 'categories':['你好','测试','不行'], 'data':[56,78,34] } 这段代码读取 data 文件内容 ..

有人会 echarts 吗?

前几天看教程,从本地动态获取数值可以出图,但是如下我得代码读取不了本地文件,我不会 jQuery,简单了解 js。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>echarts学习</title>
    
</head>

<body>
    <div id="main" style="width: 600px;height:400px;"></div>
	<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
	<script src="./echarts.min.js"></script>
    <script>
    var myChart = echarts.init(document.getElementById('main'));
    // 显示标题,图例和空的坐标轴
    myChart.setOption({
        title: {
            text: '异步数据加载示例'
        },
        tooltip: {},
        legend: {
            data:['test']
        },
        xAxis: {
            data: []
        },
        yAxis: {},
        series: [{
            name: 'test',
            type: 'bar',
            data: []
        }]
    });
    
    // 异步加载数据
    $.get('data/data.json').done(function (data){
        // 填入数据
        myChart.setOption({
            xAxis: {
                data: data.categories
            },
            series: [{
                // 根据名字对应到相应的系列
                name: 'test',
                data: data.data
            }]
        });
    });
    </script>
</body>
</html>

data 文件内容:

{
	"categories":["你好","测试","不行"],
	"data":[56,78,34]
}

这段代码读取 data 文件内容不能出图。
image.png

echarts官网实例

被采纳的回答
11 回帖   
请输入回帖内容...
  • Lee981265  

    获取数据的回调里面初始化 echarts

    1 回复
  • cuijianzhe        

    image.png
    这么写?但是……

  • a15572875965  

    你的源码报错内容,没给类型
    image.png
    加上类型就好了
    image.png

    image.png

    1 回复
  • alanfans  

    组装好数据,load 一下

  • cuijianzhe        

    你的那个怎么写的?我加上类型和 Y 轴空坐标也不行,能贴一下代码吗?
    image.png

    1 回复
  • a15572875965        

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>echarts学习</title>
        <script src="js/jquery-1.7.1.js"></script>
        <script src="js/echarts.js"></script>
    
    </head>
    
    <body>
    <div id="main" style="width: 600px;height:400px;"></div>
    
    <script>
        var myChart = echarts.init(document.getElementById('main'));
        // 异步加载数据
        $.get('data/data.json').done(function (data) {
    
            // 填入数据
            myChart.setOption({
                title: {
                    text: '异步数据加载示例'
                },
                tooltip: {},
                legend: {
                    data: ['test']
                },
                xAxis: {
                    data: data.categories
                },
                yAxis: {},
                series: [{
                    name: 'test',
                    type: 'bar',
                    data: data.data
                }]
            });
        });
    </script>
    </body>
    </html>
    

    1 回复
  • cuijianzhe        

    感谢……
    但是这两个文件我跟你的是不是不一样,jQuery 文件和 echarts 文件能发我一份看看嘛?😭

    1 回复
  • a15572875965        
  • HanZhaoYoung 1 赞同  

    这个东西跟 echarts jQuery 版本没啥关系。。。 老哥们也别只给个答案呀,因为 js 是单线程,你获取数据是异步操作,所以 echarts 的 setOption 要放在回调里。
    你以后不用 echarts 的时候若不知道这个小原理还是会遇到同样的问题的

    1 回复
  • alanfans  

    cv 大法

  • cuijianzhe        

    感谢 这次是着急才问的 我会补一下这些知识 平常涉及到的这块不太多😄

请输入回帖内容 ...