看了Echarts官網異步加載數據的Demo
var myChart = echarts.init(document.getElementById('main')); // 顯示標題，圖例和空的坐標軸 myChart.setOption({ title: { text: '異步數據加載示例' }, tooltip: {}, legend: { data:['銷量'] }, xAxis: { data: [] }, yAxis: {}, series: [{ name: '銷量', type: 'bar', data: [] }] }); // 異步加載數據 $.get('data.json').done(function (data) { // 填入數據 myChart.setOption({ xAxis: { data: data.categories }, series: [{ // 根據名字對應到相應的系列 name: '銷量', data: data.data }] }); });
編輯示例的代碼跟上面的代碼不太一樣，通過setTimeout模擬異步加載
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 }] }); });
看完demo和編輯示例，自己必須親手做一次，在本地data.json文本保存json數據，json數據我從編輯示例取
{ categories: [ "襯衫", "羊毛衫", "雪紡衫", "褲子", "高跟鞋", "襪子" ], data: [ 5, 20, 36, 10, 10, 20 ] }
然后vs2012 創建aspx文件，原原本本把上面的代碼拷貝過來
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="demo3_異步數據加載和更新.aspx.cs" Inherits="EchartsDemo.demo3_異步數據加載和更新" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="jquery-1.7.1.min.js"></script>
<!-- 引入 ECharts 文件 -->
<script src="echarts.js"></script>
</head>
<body>
<!-- 為 ECharts 准備一個具備大小（寬高）的 DOM -->
<div id="main" style="width: 600px; height: 400px;"></div>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('main'));
// 顯示標題，圖例和空的坐標軸
myChart.setOption({
title: {
text: '異步數據加載示例'
},
tooltip: {},
legend: {
data: ['銷量']
},
xAxis: {
data: []
},
yAxis: {},
series: [{
name: '銷量',
type: 'bar',
data: []
}]
});
//// 異步加載數據
//$.getJSON('data.json',function (data) {
// console.log(data);
// // 填入數據
// myChart.setOption({
// xAxis: {
// data: data.categories
// },
// series: [{
// // 根據名字對應到相應的系列
// name: '銷量',
// data: data.data
// }]
// });
//});
// 異步加載數據
$.get('data.json').done(function (data) {
// 填入數據
myChart.setOption({
xAxis: {
data: data.categories
},
series: [{
// 根據名字對應到相應的系列
name: '銷量',
data: data.data
}]
});
});
</script>
</body>
</html>
在使用VS2012進行調試時，發現JSON文件加載不了，http狀態提示：404
其實原因是vs內置的IIS Express默認沒有mime映射json擴展名文件，所以就不能直接訪問。
所以只需要IIS Express添加mime映射json擴展文件就可以。
步驟一：
打開cmd，切換到IIS Express文件夾目錄下，路徑C:\Program Files\IIS Express
步驟二：執行以下命令就可以了
appcmd set config /section:staticContent /+[fileExtension='.json',mimeType='text/plain']
如果不想設置IIS Express，可以在項目中的web.config中進行配置，configuration節中添加以下就可以：
<system.webServer>
<staticContent>
<mimeMap fileExtension=".json" mimeType="application/json"/>
</staticContent>
</system.webServer>
data.json加載成功，但Echart沒有效果
在極速360瀏覽器查看請求回來的json數據，preview居然顯示undefined，大概知道是json格式問題
重新修改后的數據
{ "categories": [ "襯衫", "羊毛衫", "雪紡衫", "褲子", "高跟鞋", "襪子" ], "data": [ 5, 20, 36, 10, 10, 20 ] }
好了，數據沒有問題了吧，還是沒有效果出來
想了很久不知道啥原因問題
只好嘗試把vs服務換成Visual Studio 開發服務器
然后調試，json數據是有了，但中文都亂碼
最后只能在IIS 環境部署，完美成功
至於為什么在vs顯示不了，我暫時找不到原因，找到原因在補充。
2017-4-23晚上21:46
睡了一覺醒來，突然想到，可能vs調試得到的是string類型，而iis得到的data數據不是string類型
通過typeof 判斷，驗證我想的是對的。最后修改了下，在iis和vs都正常顯示，奇怪奇怪，居然是這個原因。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="jquery-1.7.1.min.js"></script>
<!-- 引入 ECharts 文件 -->
<script src="echarts.js"></script>
</head>
<body>
<!-- 為 ECharts 准備一個具備大小（寬高）的 DOM -->
<div id="main" style="width: 600px; height: 400px;"></div>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('main'));
// 顯示標題，圖例和空的坐標軸
myChart.setOption({
title: {
text: '異步數據加載示例'
},
tooltip: {},
legend: {
data: ['銷量']
},
xAxis: {
data: []
},
yAxis: {},
series: [{
name: '銷量',
type: 'bar',
data: []
}]
});
//// 異步加載數據
//$.getJSON('data.json',function (data) {
// console.log(data);
// // 填入數據
// myChart.setOption({
// xAxis: {
// data: data.categories
// },
// series: [{
// // 根據名字對應到相應的系列
// name: '銷量',
// data: data.data
// }]
// });
//});
// 異步加載數據
$.get('data.json').done(function (data) {
if (typeof (data) == "string") {
data = JSON.parse(data);
}
// 填入數據
myChart.setOption({
xAxis: {
data: data.categories
},
series: [{
// 根據名字對應到相應的系列
name: '銷量',
data: data.data
}]
});
});
</script>
</body>
</html>