学习笔记：Echarts读取本地json文件形成图表

最新推荐文章于 2024-07-24 02:07:18 发布

「黑白」

最新推荐文章于 2024-07-24 02:07:18 发布

阅读量1w

点赞数 12

分类专栏：学习笔记文章标签： js json jquery

本文链接：https://blog.csdn.net/Rch963/article/details/105780353

版权

学习笔记专栏收录该内容

3 篇文章 0 订阅

订阅专栏

Echarts读取本地json文件形成图表

初学 Echarts,在读取本地json文件的时候卡了挺久，记录一下怎么解决Echarts的读取问题。

首先官方有教程，下载jquery使用get方法即可读取，但是就我个人经历来说，教程中的代码没办法直接使用，一共有两个坑需要注意。

关于读入数据的格式问题

首先下方代码是我的一个get方法使用实例。

$.get('from_to.json').done(function (data) {
    // 填入数据
    data=JSON.parse(data);  //这一句是关键，后面会说
    myChart.setOption({
      series: 
        {
            links:data.links,
            data:data.data
        }
    });
});

上面的代码中，data.json为你要读入的json文件，此处我的json文件内容如下：

{
            "links":
                [
                {
                    "source":0,
                    "target":1
                },
                {
                    "source":2,
                    "target":3
                }
                ],
           "data": 
                [
                {
               "name": "沙雕1"
                }, 
                {
                "name": "沙雕2"
                }, 
                {
                "name": "沙雕3"
                }, 
                {
                "name": "沙雕4"
                }
                ]
}

（我不知道为什么Echarts官方教程没提这个，可能是jquery版本的问题？顺带一提我用的是3.4.1）
使用get方法读入json文件后，data的格式是String,但是setoption函数需求的是object格式，所以要加一个转换，也就是

data=JSON.parse(data);

如果这一句出错，那么多半是你的json文件里内容格式有问题。检查一下引号逗号的使用就好。

Jquery的load加载本地文件出现跨域错误

当你用F12查看网页，出现

Access to XMLHttpRequest at 'xxx' from origin 'null' has 
been blocked by CORS policy: Cross origin requests are 
only supported for protocol schemes: http, data, chrome, 
chrome-extension, https.

这样的错误的时候，那么你碰到的就是“Jquery的load加载本地文件出现跨域错误“的问题。
具体原因我就不说了，网上都有，这里我只说解决方法：
创建一个chrome浏览器的快捷方式，右键–属性–快捷方式，在目标一栏的后面添加

 --user-data-dir="c:\ChromeDebug" --test-type --disable-web-security

然后将你的html拖拽到这个快捷方式上打开，即可解决问题。

最后附上我的一个斥力图的成功用例，供萌新参考。
代码比较丑。。毕竟是练习代码。

html文件：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="./echarts.js"></script>
      <script src="./jquery-3.4.1/jquery-3.4.1.js"></script>
    <script src="from_to.json"></script>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 100%;height:600px;"></div>
    
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
//      var ppp = {
//    links: 
//    [
//        {
//            source: 0,
//            target: 1,
//        },
//        {
//            source: 2,
//            target: 3,
//        }
//    ],               
//};
//        
//         alert(ppp);
//         alert(typeof(ppp));
var option = {
    title: {
        text: ''
    },
    tooltip: {},
    animationDurationUpdate: 1500,
    animationEasingUpdate: 'quinticInOut',
    label: {
        normal: {
            show: true,
            textStyle: {
                fontSize: 12
            },
        }
    },
    legend: {
        x: "center",
        show: false,
    },
    series: [
        {
            type: 'graph',
            layout: 'force',
            symbolSize: 45,
            focusNodeAdjacency: true,
            roam: true,
            
//            categories: [{
//                name: '1',
//                itemStyle: {
//                    normal: {
//                        color: "#009800",
//                    }
//                }
//            }
//            , {
//                name: '2',
//                itemStyle: {
//                    normal: {
//                        color: "#4592FF",
//                    }
//                }
//            },{
//                name: '3',
//                itemStyle: {
//                    normal: {
//                        color: "#3592F",
//                    }
//                }
//            } ],
            
            label: {
                normal: {
                    show: true,
                    textStyle: {
                        fontSize: 12
                    },
                }
            },
            
            force: {
                repulsion: 1000
            },
            edgeSymbolSize: [4, 50],
            
            edgeLabel: {
                normal: {
                    show: true,
                    textStyle: {
                        fontSize: 10
                    },
                    formatter: "{c}"
                }
            },
            data: [
//                {
//                name: '沙雕1',
//                draggable: true,
//                }, 
//                {
//                name: '沙雕2',
//                category: 1,
//                }, 
//                {
//                name: '沙雕3',
//                category: 1,
//                }, 
//                {
//                name: '沙雕4',
//                category: 1,
//                },
                ],
            
//            
            links:[
//                {
//                source: '沙雕1',
//                target: 1,
//                },
//                {
//                source: 2,
//                target: 1,
//                }
           ],
//                  
            lineStyle: {
                normal: {
                    opacity: 0.9,
                    width: 1,
                    curveness: 0
                }
            }
        }
    ]
};
        
        
        // 指定图表的配置项和数据
myChart.setOption(option);
        $.get('from_to.json').done(function (data) {
    // 填入数据
    data=JSON.parse(data);  
    /把string转成obietc就可以了
    myChart.setOption({
      series: 
        {
            links:data.links,
            data:data.data
        }
    });
});

        myChart.setOption(option);
</script>
</body>
</html>

json文件见上方。

「黑白」

关注

12
点赞
踩
61

收藏

觉得还不错? 一键收藏
4
评论
学习笔记：Echarts读取本地json文件形成图表

Echarts读取本地json文件形成图表初学 Echarts,在读取本地json文件的时候卡了挺久，记录一下怎么解决Echarts的读取问题。首先官方有教程，下载jquery使用get方法即可读取，但是就我个人经历来说，教程中的代码没办法直接使用，一共有两个坑需要注意。关于读入数据的格式问题首先下方代码是我的一个get方法使用实例。$.get('from_to.json').done(...
复制链接

扫一扫