在这个echarts的官方示例中，我能不能吧自己的数据保存成json格式的文本文件，放在服务器，然后在这个实例中读取我保存的数据读入表格
小米8高配版(五颜六色)
https://www.echartsjs.com/gallery/editor.html?c=doc-example/tutorial-async
小米8高配版(五颜六色)
function fetchData(cb) {
// 通过 setTimeout 模拟异步加载
setTimeout(function () {
cb({
categories: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"],
data: [5, 20, 36, 10, 10, 20]
});
}, 1000);
}
// 初始 option
option = {
title: {
text: '异步数据加载示例'
},
tooltip: {},
legend: {
data:['销量']
},
xAxis: {
data: []
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: []
}]
};
fetchData(function (data) {
myChart.setOption({
xAxis: {
data: data.categories
},
series: [{
// 根据名字对应到相应的系列
name: '销量',
data: data.data
}]
});
});
小米8高配版(五颜六色)
直接请求json文件路径就行了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="main" style="width: 600px;height:400px;"></div>
</body>
<script src="https://cdn.bootcss.com/echarts/4.2.1/echarts.min.js"></script>
<script>
let myChart = echarts.init(document.getElementById('main'));
function fetchData(cb) {
let xhr = new XMLHttpRequest()
xhr.open('get', '/index.json')
xhr.send(null)
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
let data = JSON.parse(xhr.responseText)
cb(data)
}
};
}
// 初始 option
option = {
title: {
text: '异步数据加载示例'
},
tooltip: {},
legend: {
data:['销量']
},
xAxis: {
data: []
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: []
}]
};
myChart.setOption(option);
fetchData(function (data) {
myChart.setOption({
xAxis: {
data: data.categories
},
series: [{
// 根据名字对应到相应的系列
name: '销量',
data: data.data
}]
});
});
</script>
</html>
json文件内容如下:
{
"categories": ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"],
"data": [5, 20, 36, 10, 10, 20]
}
<html><head>
<meta charset="utf-8">
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
<script src="/static/js/jq.js"></script>
<link rel="stylesheet" href="/static/layuiadmin/layui/css/layui.css" media="all">
<link rel="stylesheet" href="/static/layuiadmin/style/admin.css" media="all">
<script src="__JS__/echarts.js"></script>
</head>
<body layadmin-themealias="default" style="height: 100%">
<div class="layui-fluid">
<div class="layui-row layui-col-space15">
<!--<div class="layui-col-md12">-->
<!--<div class="layui-card-header layui-bg-cyan" align="center"><h2>统计图</h2></div>-->
<!--</div>-->
<div class="layui-col-md6">
<div class="layui-card">
<div class="layui-card-body">
<div style="width: 100%;min-height: 40%" id="payment_total"> </div>
</div>
</div>
</div>
<div class="layui-col-md6">
<div class="layui-card">
<div class="layui-card-body">
<div style="width: 100%;min-height: 40%" id="payment_cyc"> </div>
</div>
</div>
</div>
<div class="layui-col-md6">
<div class="layui-card">
<div class="layui-card-body">
<div style="width: 100%;min-height: 40%" id="payment_notify_fail_total"> </div>
</div>
</div>
</div>
<div class="layui-col-md6">
<div class="layui-card">
<div class="layui-card-body">
<div style="width: 100%;min-height: 40%" id="payment_notify_fail_cyc"> </div>
</div>
</div>
</div>
</div>
</div>
<script src="/static/js/layer/layer.js"></script>
<script src="/static/layuiadmin/layui/layui.js"></script>
<script>
function payment_total()
{
var loading=layer.load(2);
$.post("",{
type:"total"
},function (res) {
layer.close(loading);
var myChart = echarts.init(document.getElementById('payment_total'));
option = {
title : {
text: '支付流水K线近7天',
x:'center'
},
xAxis: {
type: 'category',
data: res.dates
},
yAxis: {
type: 'value'
},
series: [{
data: res.moneys,
type: 'line',
smooth: true
}]
};
myChart.setOption(option);
});
}
function payment_cyc()
{
var loading=layer.load(2);
$.post("",{
type:"chartTypeTotalCyc"
},function (res) {
layer.close(loading);
var myChart = echarts.init(document.getElementById('payment_cyc'));
option = {
title : {
text: '支付成功占比',
x:'center'
},
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient: 'vertical',
left: 'left',
data: ['支付宝','微信支付','QQ支付']
},
series : [
{
name: '支付来源',
type: 'pie',
radius : '55%',
center: ['50%', '60%'],
data:res.datas,
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
myChart.setOption(option);
})
}
/**
* 通知失败折线图
*/
function payment_notify_fail_total()
{
var loading=layer.load(2);
$.post("",{
type:"chartNotifyTotal"
},function (res) {
layer.close(loading);
var myChart = echarts.init(document.getElementById('payment_notify_fail_total'));
option = {
title : {
text: '通知失败折线图',
x:'center'
},
xAxis: {
type: 'category',
data: res.dates
},
yAxis: {
type: 'value'
},
series: [{
data: res.values,
type: 'line',
smooth: true
}]
};
myChart.setOption(option);
});
}
/**
* 失败原图
*/
function payment_notify_fail_cyc()
{
var loading=layer.load(2);
$.post("",{
type:"chartNotifyCyc"
},function (res) {
layer.close(loading);
var myChart = echarts.init(document.getElementById('payment_notify_fail_cyc'));
option = {
title : {
text: '通知失败占比',
x:'center'
},
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient: 'vertical',
left: 'left',
data: ['正常通知','5次以下','目前未成功']
},
series : [
{
name: '支付来源',
type: 'pie',
radius : '55%',
center: ['50%', '60%'],
data:res.datas,
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
myChart.setOption(option);
})
}
$(document).ready(function () {
payment_total();
payment_cyc();
payment_notify_fail_total();
payment_notify_fail_cyc();
});
</script>
<script>
</script>
</body>
</html>
用.js格式里面用JOSN格式的数据然后用JQ 的 ajax来请求你本地的数据文件 的路径就行了。
如https://api.isoyu.com/gy/data.js
我渣渣用法，官方请等待老虎解答
