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

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

 

前提条件：

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

 下载地址：

1官方网站下载

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

 

代码：

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

line.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！