数据可视化

#数据可视化| 来源: 网络整理| 查看: 265

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

前提条件：

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

下载地址：

1官方网站下载

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

代码：

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

line.html

ECharts

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！

【本文地址】

公司简介

联系我们