ECharts是百度的一个用于数据可视化图表展示的一个开源工具。
ECharts官网：ECharts
一、异步请求官网实例1
1、引入jQuery.js、echarts.js（多种方式）
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/echarts/4.2.0-rc.2/echarts.js"></script>
2、绘制图表
①为ECharts准备一个具备大小（宽高）的Dom
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width:600px;height:400px"></div>
②基于准备好的dom，初始化echarts实例
③异步请求数据
方法A：
<script>
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 异步请求数据
$.get('http://localhost:9010/data1.json').done(function (data) {
myChart.setOption({
title: {
text: '异步加载数据demo'
},
tooltip:{},
legend:{
data:['销量']
},
xAxis:{
data:["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
yAxis:{},
series:[{
name:'销量',
type:'bar',
data:[5, 20, 36, 10, 10, 20]
}]
});
})
</script>
方法B：
先设置完其它的样式，显示一个空的直角坐标轴，然后获取数据后填入数据。
data1.json文件格式如下：
{
"name": [
"衬衫",
"羊毛衫",
"雪纺衫",
"裤子",
"高跟鞋",
"袜子"
],
"value": [
5,
20,
36,
10,
10,
20
]
}
script：
<script>
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
//设置一个空的直角坐标轴，然后获取数据填入数据
myChart.setOption({
title: {
text: '异步加载数据demo'
},
tooltip: {},
legend: {
data: ['']
},
xAxis: {
data: []
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: []
}]
})
// 异步请求数据
$.get('http://localhost:9010/data1.json').done(function (resule) {
myChart.setOption({
xAxis: {
// 根据data1.json获取需要的值
data: resule.name
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
// 根据data1.json获取需要的值
data: resule.value
}]
});
})
</script>
两种方法的显示结果都如下：
异步请求数据实例1
二、异步请求数据实例2
data2.json的数据格式和data1.json不一样，要注意将数据转换成数组。
data.json文件：
{
"success": true,
"code": 100000,
"recordsTotal": 5,
"data": [
{
"beginTime": 1531756800000,
"endTime": 1532188800000,
"intervalDays": "0",
"durationDays": "5",
"time":"一月"
},
{
"beginTime": 1535385600000,
"endTime": 1535731200000,
"intervalDays": "38",
"durationDays": "4",
"time":"二月"
},
{
"beginTime": 1539100800000,
"endTime": 1539446400000,
"intervalDays": "40",
"durationDays": "4",
"time":"三月"
},
{
"beginTime": 1541692800000,
"endTime": 1542124800000,
"intervalDays": "27",
"durationDays": "5",
"time":"四月"
},
{
"beginTime": 1545235200000,
"endTime": 1545580800000,
"intervalDays": "37",
"durationDays": "4",
"time":"五月"
}
]
}
script:
// 一、将data2.json中data的月份转化成数组(将月份提取出来并放到一个新数组里)
function convertMonthToArray(resule) {
var data = resule.data;
var arr = [];
for (var i = 0; i < data.length; i++) {
// 1、获取data中的time属性
console.log(data[i].time);
// 2、将time属性放到一个新的数组里
arr.push(data[i].time);
}
console.log(arr);
// 3、返回arr数组
return arr;
}
//二、将data2.json中间隔时间装换成数组
function convertIntervalDaysToArray(resule) {
var data = resule.data;
var arr = [];
for (var i = 0; i < data.length; i++) {
arr.push(data[i].intervalDays);
}
return arr;
}
// 三、异步请求数据
$.get('http://localhost:9010/data2.json').done(function (resule) {
// 获的X，函数方法要传参，不然无意义
var xAxisMonth = convertMonthToArray(resule);
// 获的Y
var yAxisIntervalDays = convertIntervalDaysToArray(resule);
myChart.setOption({
xAxis: {
// 根据data2.json获取需要的值
data: xAxisMonth
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
// 根据data2.json获取需要的值
data: yAxisIntervalDays
}]
});
})
显示结果：
异步请求数据实例2
注意：
- $.get('url')，url不能跨域
- 打开地址要使用本地服务器打开，如下（学习搭建本地服务器可以参考：使用python3创建本地局域网）：
正确浏览方式.png
错误浏览方式
学习笔记整理，如有错，望指出，共同进步
