数据可视化---echarts加载Json数据

最新推荐文章于 2024-08-17 16:42:17 发布

Hadoop_Liang

最新推荐文章于 2024-08-17 16:42:17 发布

阅读量6.7k

点赞数 5

分类专栏： echarts 文章标签：可视化 echarts 动态加载 json

本文链接：https://blog.csdn.net/qq_42881421/article/details/88895736

版权

echarts 专栏收录该内容

2 篇文章 1 订阅

订阅专栏

实现一个echarts可视化，并能实现从Json中异步加载数据

前提条件：

下载好echarts.min.js和jquery-3.3.1.min.js，并放在专门的工程目录中，例如: aaa目录下

下载地址：

1官方网站下载

2.点这里下载（提取码：hahj）

代码：

在aaa目录下新建三个如下代码文件

line.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="echarts.js"></script>
    <script src="dark.js"></script>
    <script src="jquery-3.3.1.min.js"></script>
    <script type="text/javascript" src="yibu.js"></script>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>

</body>
</html>

yibu.js

$(document).ready(function(){
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'),"dark");


// 初始 option
option = {
    title: {
        text: '异步数据加载示例'
    },
    tooltip: {trigger: 'axis'},
    legend: {
        data:['销量']
    },
    toolbox: {
        show : true,
        feature : {
            mark : {show: true},
            dataView : {show: true, readOnly: false},
            magicType : {show: true, type: ['line', 'bar']},
            restore : {show: true},
            saveAsImage : {show: true}
        }
    },
    calculable : true,


    xAxis: {
        data: []
    },
    yAxis: {},
    series: [{
        name: '销量',
        type: 'bar',
        data: []
    },
    ]
};

//获取数据
$.getJSON("yibu.json",function(data11){
// fetchData(function (data11) {
    myChart.setOption({
        xAxis: {
            data: data11.categories
        },
        series: [{
            // 根据名字对应到相应的系列
            name: '销量',
            data: data11.data
        }]
    });
});
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
});

yibu.json

{
    "categories": ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"],
    "data": [5, 20, 36, 10, 10, 20]
}

新建好所有文件之后，工程目录包含文件如下：

浏览器设置

为了能让谷歌浏览器能解析json数据，需要先进行如下设置

右键谷歌浏览器图标-->属性-->目标(T) 方框值中 exe后面输入空格，然后输入--allow-file-access-from-files

C:\Users\Lenovo\AppData\Local\Google\Chrome\Application\chrome.exe --allow-file-access-from-files

注意：路径C:\XXX\...\chrom.exe是chrome的安装文件路径，保持自己原有的不用修改。

注意：如果不设置浏览器，需要在服务器中访问。例如xampp或者tomcat服务器。

查看效果

谷歌浏览器访问yibu.html效果：

完成！ enjoy it！

Hadoop_Liang

关注

5
点赞
踩
47

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录