有人会 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 文件内容不能出图。

echarts 官网实例

使用 ECharts 绘制网址径向树状图

an.rustfisher.com 有很多内容，很多页面。如果用一个树状图把所有页面展示出来会是什么效果？第一时间想到了 ECharts。最后效果： https://an.rustfisher.com/an-tree.html 数据处理数据来源于配置文件。我们只需要把内容读出来，整理成 ECharts 需要的格式 ..

欢迎来到这里！

我们正在构建一个小众社区，大家在这里相互信任，以平等 • 自由 • 奔放的价值观进行分享交流。最终，希望大家能够找到与自己志同道合的伙伴，共同成长。

关于

<!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>