Echarts使用及動態載入圖表資料

Echarts簡介

echarts，縮寫來自Enterprise Charts，商業級資料圖表，一個純JavaScript的圖表庫，來自百度。。。我想應該夠簡潔了

使用Echarts

目前，就官網的文件顯示，使用echarts有兩種方式，echarts3之前的版本使用“模組化包引入”，echarts3還可以使用標籤引入。例如

模組化包引入：這裡的echarts.js從這裡下載，下載完後解壓，用到的檔案就是echarts-2.2.7\build\dist下的

[javascript] view plain copy

<body>
<div id="main" style="height:400px;"></div> // 首先定義一個待用的div，一定要指定寬度、高度，給他一個id，為什麼給個id，你懂得
...
<script src="./js/echarts.js"></script> // 這個地方很重要，關於echarts的初始化和載入一定要在<body></body>標籤中，而且要放在div定義的下面
<script type="text/javascript">
require.config({
paths: {
echarts: './js/dist/chart' // 這是各種圖的js根目錄，echarts-2.2.7\build\dist\chart目錄在工程中的路徑
}
});
require(
[
'echarts', // 這個“echarts”其實就是上面的paths中的echarts
'echarts/chart/line', // 按需載入所需圖表，表示我這個頁面中需要用到折線圖
'echarts/chart/bar' // 折線圖可動態轉換為柱狀圖，所以需要動態轉換的要記得把相關的js也一併載入
],
function (ec) {
var myChart = ec.init(document.getElementById('main')); // 初始化圖表，注意這裡不能用JQuery方式，否則會無法初始化
var option = {
... // 這裡就是圖表的定義資料了
}
myChart.setOption(option); // 最後載入圖表
}
);
</script>
</body>

標籤引入：這裡的echarts.js從這裡下載，推薦下載這個(如圖)，因為這個只有一個檔案

使用方式超簡單：

<html>
<head>
<meta charset="utf-8">
<title>title</title>
<script src="js/echarts.js"></script>
</head>
<body>
<div id="main" style="width: 600px;height:400px;"></div> // 一樣的定義一個待用的div，一定要指定寬度、高度，給個id
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('main')); // 直接開始初始化，還是要用原生javascript
var option = { <pre name="code" class="javascript"> // 圖表的定義資料
};
myChart.setOption(option); // 載入圖表
</script>
</body>
</html>

動態載入折線圖資料(series)，動態載入圖例(legend)，動態載入X軸(xAxis)

這個是開發經常遇到的，但是官方的示例都是死資料。。。怎樣動態獲取後臺資料呢？

首先，不管你使用哪一種方式使用echarts，資料定義(option)部分都是相同的。我以折線圖為例，首先定義option如下：呃，我順便說一下各個定義項吧

[javascript] view plain copy

option = {
title: {// 圖表標題，可以通過show:true/false控制顯示與否，還有subtext:'二級標題',link:'http://www.baidu.com'等
text: '例項'
},
tooltip : {// 這個是滑鼠浮動時的工具條，顯示滑鼠所在區域的資料，trigger這個地方每種圖有不同的設定，見官網咖，一兩句說不清楚
trigger: 'axis'
},
legend: {// 這個就是圖例，也就是每條折線或者項對應的示例，就是這個<a target=_blank href="https://img-blog.csdn.net/20160622094820180?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center">圖例</a>
data:[]
},
toolbox: {
feature: {
saveAsImage: {}// 工具，提供幾個按鈕，例如動態圖表轉換，資料檢視，儲存為圖片等
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',// 這幾個屬性可以控制圖表上下左右的空白尺寸，可以自己試試。
containLabel: true
},
xAxis : [
{
type : 'category',
boundaryGap : false,
data : []// X軸的定義
}
],
yAxis : [
{
type : 'value'// Y軸的定義
}
],
series : []// 這裡就是資料了
};

定義好option，下面就要獲取資料動態載入到option中了

[javascript] view plain copy

jQuery.ajax({
url:"url",
type:'get',
dataType:'json',
success:function(jsons){
var Item = function(){
return {
name:'',
type:'line',
itemStyle: {normal: {areaStyle: {type: 'default',opacity:isArea}}},
label: {normal: {show: isShowAllData,position: 'top'}},
markLine: {data: [{type: 'average', name: '平均值'}]},
data:[]
}
};// series中的每一項為一個item,所有的屬性均可以在此處定義
var legends = [];// 準備存放圖例資料
var Series = []; // 準備存放圖表資料
var json = jsons.data;// 後臺返回的json
for(var i=0;i < json.length;i++){
var it = new Item();
it.name = json[i].name;// 先將每一項填充資料
legends.push(json[i].name);// 將每一項的圖例名稱也放到圖例的陣列中
it.data = json[i].data;
Series.push(it);// 將item放在series中
}
option.xAxis[0].data = jsons.xcontent;// 這一步是設定X軸資料了，需要注意：option.xAxis.data = json.xcontent這樣不行
// 折線圖可設定上下兩個X軸，所以必須是option.xAxis[0].data = json.xcontent
option.legend.data = legends;// 設定圖例
option.series = Series; // 設定圖表
myChart.setOption(option);// 重新載入圖表
},
error:function(){
alert("資料載入失敗！請檢查資料鏈接是否正確");
}
});

以上就可完成圖表資料的動態載入，現在整個頁面應該是這樣的

[javascript] view plain copy

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>折線圖</title>
<script src="${pageContext.request.contextPath}/js/jquery.min.js"></script>
<script src="${pageContext.request.contextPath}/js/echarts.js"></script>
</head>
<body >
<div align="center">
<div id="main" style="width: 1000px;height:700px"></div>
</div>
<script src="${pageContext.request.contextPath}/source/echarts/myTheme.js"></script>
<script type="text/javascript">
// 另外說一下帶主題載入，就是這樣的，注意“e_macarons”必須是myTheme.js(上面引入的自定義主題js檔案,echarts中也附帶了不少主題js檔案)中函式的名字
var myChart = echarts.init(document.getElementById('main'),e_macarons);
option = {
title: { ··· },
tooltip : { ··· },
legend: { ··· },
toolbox: { ··· },
grid: { ··· },
xAxis : [ ··· ],
dataZoom: [ ··· ],
yAxis : [ ··· ],
series:[]
};
//載入資料
jQuery.ajax({
url:"url",
type:'get',
dataType:'json',
success:function(jsons){
var Item = function(){
return {
name:'',
type:'line',
itemStyle: {normal: {areaStyle: {type: 'default',opacity:isArea}}},
label: {normal: {show: isShowAllData,position: 'top'}},
markLine: {data: [{type: 'average', name: '平均值'}]},
data:[]
}
};
var legends = [];
var Series = [];
var json = jsons.data;
for(var i=0;i < json.length;i++){
var it = new Item();
it.name = json[i].name;
legends.push(json[i].name);
it.data = json[i].data;
Series.push(it);
}
option.xAxis[0].data = jsons.xcontent;
相關推薦

Echarts使用及動態載入圖表資料

Echarts簡介      echarts，縮寫來自Enterprise Charts，商業級資料圖表，一個純JavaScript的圖表庫，來自百度。。。我想應該夠簡潔了使用Echarts      目前，就官網的文件顯示，使用echarts有兩種方式，echarts3之前

Echarts使用及動態載入圖表資料折線圖X軸資料動態載入

Echarts簡介       echarts，縮寫來自Enterprise Charts，商業級資料圖表，一個純Javascript的圖表庫，來自百度。。。我想應該夠簡潔了使用Echarts       目前，就官網的文件顯示，使用echarts有兩種方式，echart

vue專案中使用Echarts 動態更改圖表資料， Vue 折線圖、柱狀圖等圖表動態重新整理，

問題：在vue元件中，用echarts外掛動態獲取、修改圖表資料解決：已解決！第一步：開啟cmd命令視窗安裝echarts依賴安裝：npm install echarts -S 第二步：在main.js中全域性引入 //引入echarts的圖表外掛

asp.net頁面通過Javascript使用CanvasJS.Chart畫曲線，曲線實現動態載入後臺資料（通過ajax）

頁面程式碼： <html> <head> <script src="jQuery.js" type="text/javascript"></script> <script src="https://canvasjs.com/assets/

d3滑鼠拖拽、放大縮小後動態載入頁面資料demo

d3滑鼠拖拽、放大縮小後動態載入頁面資料demo index.html <!DOCTYPE html> <html> <head>     <meta charset="UTF-8">     <style

HTML之動態載入表格資料

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head>

unity Editor自動生成材質及動態載入資源

最近這兩天在做一個專案，然後裡面有六十多個素材，還要全部生成材質球，差點人都廢了，然後去手冊上著了一下可以自動生成材質球的程式碼。然後自動生成材質球的過程中我還想要給材質球賦予一個預設的漫反射貼圖，貼圖是從網上下載來的，踩了數不清的坑之後終於搞定了。

Extjs 動態載入ComboBox資料

{ xtype : 'combo', emptyText : '請選擇年份^',//下拉框初始顯示欄位 fieldLabel : '年份選擇',

bootstrap-select下拉搜尋外掛動態載入自己資料的二級聯動

bootstrap-select是boot的下拉搜尋外掛，使用的時候有時我們需要動態從後臺或者直接載入動態資料。下面是根據一級下拉選單，動態載入二級聯動方式。首先引入js與css檔案（一個css兩個js）<link rel="stylesheet" href="cs

Android外掛化資源的使用及動態載入附demo

上一篇我們已經完成了一個真正可執行的外掛化demo，而且demo中也解決了外掛中不可以使用資源的問題，但是由於篇幅的問題我們並沒有對原理講解，所以這一篇是對上一篇的一個收尾，如果沒有看過上一篇建議先看Android外掛化完美實現程式碼資源載入及原理講解附可執行

highcharts動態載入json資料

首先建立一個container<body> <script src="js/highcharts.js"></script> <script src="js/exporting.js"></script>

freemark動態載入列表資料

1.ftl頁面中 <table class="table table-striped table-hover table-bordered" name="record" id="editable-sample"> </table> fun

JSTree--JSON--AJAX動態載入JSON資料

專案中往往結點往往需要動態從資料庫中載入，JSON資料比xml資料更高效。例子1：從json檔案載入資料 $(function() {  $("#demo1").jstree({   "json_data" : {    "ajax" : {     "url" : "_j

使用AsyncTaskLoader動態載入SQLite資料

Andorid API Guides中有一章節ListView講解了如何使用CursorLoader動態載入資料。但CursorLoader只支援Content Provider，實際上在很多小應用中都用不到Content Provider。我嘗試繼承CursorLoade

使用Echarts圖表動態載入餅圖資料 pie

//JS成功後的程式碼functionbind(result){// 基於準備好的dom，初始化echarts圖表var TypeSalesChart = echarts.init(document.getElementById('main')); var option = { too

ECharts動態載入JavaWeb後臺資料，圖表展現

jsp程式碼：（根據官方demo及自己需求，適當修改原始引數，需動態新增的原始測試資料可以不刪，可以覆蓋） <%@ page language="java" contentType="text/html; charset=UTF-8" pageEn

Echarts的用法及動態資料的載入

開啟官網--》點選下載 echarts.js http://www.echartsjs.com/download.html <!DOCTYPE html> <html> <head> <meta charset="UTF-

【mpvue】實現echarts圖表動態載入資料

功能描述使用mpvue框架開發微信小程式。目的效果為小程式中顯示一個折線圖，當點選切換按鈕時，切換圖表。實現步驟 1.查詢mpvue官方文件關於echarts的實現方式------靜態載入圖表，只加載一次 2.實現動態載入圖表（能夠根據需求多次繪製圖表）思

Echarts動態載入折線圖X Y軸資料圖表資料

   前幾天，收到商家的反饋，希望可以有一個直觀的圖表，展示一個時間段裡的銷售額，客數，排班人數，並把銷售高峰期以及時間段反應出來。經同事的介紹，選擇了百度的 echarts，縮寫來自Enterprise Charts，一個純JavaScript的圖表庫。上官網查，官方的

ECharts通過Ajax動態載入資料到圖表

參考官網：http://echarts.baidu.com/echarts2/doc/doc.html#引入ECharts2 要展示的圖表像這樣：現在開始前後端程式碼展示。by the way，使用的開發框架為nutz，重點還是echarts資料。不要本末倒置。

Echarts使用及動態載入圖表資料

Echarts簡介

使用Echarts

模組化包引入：這裡的echarts.js從這裡下載，下載完後解壓，用到的檔案就是echarts-2.2.7\build\dist下的

標籤引入：這裡的echarts.js從這裡下載，推薦下載這個(如圖)，因為這個只有一個檔案

動態載入折線圖資料(series)，動態載入圖例(legend)，動態載入X軸(xAxis)

相關推薦