1. 怎麼樣讓ECharts從後台獲取數據並展示
//使用Ajax請求你的servlet或者controller或者action然後獲取數據
$.get('Query_RealTimeServlet').done(functionjzdata(result){
//有可能出現沒轉換成功的json數據再轉換一次
varjson=JSON.parse(result);
//用數組存儲數據我這邊有三個
//xdata是X軸的數據
//ldatardata是表中的兩條折線
varxdata=newArray();
varldata=newArray();
varrdata=newArray();
//循環存入數組
for(vari=0;i<json.length;i++){
vartimestr=json[i].updatetime;
xdata.push(timestr.substr(11));
ldata.push(json[i].left_torque);
rdata.push(json[i].right_torque);
}
//將數組中的數據存放
torque_chart.setOption({
xAxis:{
data:xdata
},
series:[
{
name:'左輪',
data:ldata
},
{
name:'右輪',
data:rdata
}
]
});
});
//這一塊只是Ajax的請求存放數據前邊你還得自己設置你的圖表樣式比如下邊的
//js是我存放JavaScript的文件夾名稱你用你自己的
<scripttype="text/javascript"src="js/jquery-3.2.1.min.js"></script>
<scriptsrc="js/echarts.js"></script>
<scriptsrc="js/esl.js"></script>
//初始化XXXecharts圖
varXXX=echarts.init(document.getElementById("你要放置echarts圖的DIV的ID這個DIV必須有寬高"));
//XXX圖的配置項
XXX.setOption({
//設置標題
title:{
text:'自己起個標題',
textStyle:{
color:'#FFFFFF',
fontSize:20,
}
},
//設置圖例組件
legend:{
left:'40%',
top:'10%',
data:['L','R']
},
//設置X軸
xAxis:{
name:'time',
nameTextStyle:{
color:'#FFFFFF'
},
type:'category',
//名字與坐標軸的距離
nameGap:'5',
//ajax獲取時間
data:[]
},
//設置Y軸
yAxis:{
name:'a',
nameTextStyle:{
color:'#FFFFFF'
},
splitLine:{
show:false,
}
},
//設置圖表類型
series:[
//第一條線L
{
type:'line',
name:'L',
itemStyle:{
normal:{
color:'#1F77D1',
}
},
lineStyle:{
normal:{
color:'#1F77D1',
}
},
data:[]
},
//第二條線R
{
type:'line',
name:'R',
itemStyle:{
normal:{
color:'#D35321',
}
},
lineStyle:{
normal:{
color:'#D35321',
}
},
data:[]
}
]
});
//補充Ajax是在設置完圖表之後的之後的之後的
設置定時請求每隔1000(1秒)請求一次視你的數據上傳頻率為准
setInterval(functionxxx(),1000);
2. echarts獲取資料庫中的數據展示出來 這個怎麼實現！
你首先得有個後台程序啊，java或者php，C#也是可以（sqlserver），調取資料庫數據返回到前端，然後前端處理，echarts使用唄。
3. 怎麼樣讓ECharts從後台獲取數據並展示
這並不難，先將你想要傳的數據在後台封裝好，然後通過ajax請求將數據傳到前台，我不知道你想要傳什麼數據，比如想要在series中的data里傳值，可以用option.series[n].data.push(數組元素);這樣通過echarts.setOption(option);就可以將圖形展示出來了，還有不懂的可以問我
4. 數據可視化是什麼啊怎麼做
何為數據可視化?
這里主要是指工作場景中的數據可視化(海報類、信息圖不在范圍內)。
數據可視化就是承接數據分析之後的數據展示，包括圖表設計、動效組合，形成二維圖表，三維視圖、聯動鑽取，搭配成大屏……
數據可視化的功能主要體現在兩個方面：一是數據展示;二是業務分析。數據展示很好理解，就是將已知的數據或數據分析結果通過可視化圖表的方式進行展示，形成報表、看板、dashboard、甚至配合現在流行的大屏展示技術，數據展示的方式也越來越為人所接受和歡迎。業務分析就是在看到圖表、dashboard、大屏之後，將所分析的度量和數據有效地轉化為有商業價值的見解，使其能夠為基於事實所做的決策提供支持。
數據可視化的工具
對於數據可視化，有諸多工具，如：
1、圖表類插件：ECharts、Highcharts、D3js等功能都十分強大。
2、數據報表類：Excel、金蝶、FineReport等，對於日常的報表製作，易學實用。
3、可視化BI類：比如cognos、tableau等，更直接地針對業務分析。
以上，前兩者是純粹的可視化圖標，後兩者涵蓋從數據採集、分析、管理、挖掘、可視化在內的一系列復雜數據處理。
如何實現可靠的數據可視化?
數據可視化最終還要回歸到「閱讀者」，通過傳遞有指向性的數據，找出問題所在，制定正確決策。所以數據的價值不在於被看到，而在於看到之後所引起的思考和行動。
這里，企業內數據還不同於普通的應用數據，它們大多不是通過演算法程序直接產生價值應用於用戶，而是通過合理的展示和分析，再經應用者或管理者思考和判斷，最後採取行動，從而發揮價值。
1、誰是可視化的受益者
無論你在做一份傳統的報表，匯報的PPT還是其他，首先需要搞清楚這是給誰看的，他需要了解哪些事項，關注那些指標，在決策過程中會如何利用你展示的信息和數據，一句話概括就是搞清楚數據分析工作的目標，這一張報表是用來做什麼的。後續的數據分析工作和分析報告里所要呈現的全部內容，之後都是要緊緊圍繞著這個目標主題而服務的。
2、梳理指標體系
數據可視化是要講繁雜的各條數據，梳理成指標，圍繞每個業務財務、銷售、供應鏈、生產等形成指標體系，最後通過可視化的方式展現，比如回款率、收益效率….
可以說，數據分析工作是否成功，大體就在指標的梳理。這個工作需要數據中心的人員或者BI組的人員深入業務一線去調研需求，拉來數據，建好數倉….
【指標體系分享】
如何針對業務場景做數據分析-零售業管理指標
數據化管理的指標體系大全(一)，店鋪與銷售
數據化管理的指標體系大全(二)，商品、電商、戰略決策
分析生產和庫存，靠這一套指標就夠了!
將數據可視化與業務方案結合起來
5. 怎麼查看echartspanel的使用步驟
創新的拖拽重計算、數據視圖、值域漫遊等特性大大增強了用戶體驗，賦予了用戶對數據進行挖掘、整合的能力。
支持折線圖（區域圖）、柱狀圖（條狀圖）、散點圖（氣泡圖）、K線圖、餅圖（環形圖）、雷達圖（填充雷達
圖）、和弦圖、力導向布局圖、地圖、儀表盤、漏斗圖、事件河流圖等12類圖表，同時提供標題，詳情氣泡、圖例、值域、數據區域、時間軸、工具箱等7個可交
互組件，支持多圖表、組件的聯動和混搭展現。
chart是指一個完整的圖表，如折線圖，餅圖等「基本」圖表類型或由基本圖表組合而成的「混搭」圖表，可能包括坐標軸、圖例等
axis直角坐標系中的一個坐標軸，坐標軸可分為類目型、數值型或時間型
xAxis直角坐標系中的橫軸，通常並默認為類目型
yAxis直角坐標系中的縱軸，通常並默認為數值型
grid直角坐標系中除坐標軸外的繪圖網格，用於定義直角系整體布局
legend圖例，表述數據和圖形的關聯
dataRange值域選擇，常用於展現地域數據時選擇值域范圍
dataZoom數據區域縮放，常用於展現大量數據時選擇可視范圍
roamController縮放漫遊組件，搭配地圖使用
toolbox輔助工具箱，輔助功能，如添加標線，框選縮放等
tooltip氣泡提示框，常用於展現更詳細的數據
timeline時間軸，常用於展現同一系列數據在時間維度上的多份數據
series數據系列，一個圖表可能包含多個系列，每一個系列可能包含多個數據
圖表名詞
名詞
描述
line折線圖，堆積折線圖，區域圖，堆積區域圖。
bar柱形圖（縱向），堆積柱形圖，條形圖（橫向），堆積條形圖。
scatter散點圖，氣泡圖。散點圖至少需要橫縱兩個數據，更高維度數據加入時可以映射為顏色或大小，當映射到大小時則為氣泡圖
kK線圖，蠟燭圖。常用於展現股票交易數據。
pie餅圖，圓環圖。餅圖支持兩種（半徑、面積）南丁格爾玫瑰圖模式。
radar雷達圖，填充雷達圖。高維度數據展現的常用圖表。
chord和弦圖。常用於展現關系數據，外層為圓環圖，可體現數據佔比關系，內層為各個扇形間相互連接的弦，可體現關系數據
force力導布局圖。常用於展現復雜關系網路聚類布局。
map地圖。內置世界地圖、中國及中國34個省市自治區地圖數據、可通過標准GeoJson擴展地圖類型。支持svg擴展類地圖應用，如室內地圖、運動場、物件構造等。
heatmap熱力圖。用於展現密度分布信息，支持與地圖、網路地圖插件聯合使用。
gauge儀表盤。用於展現關鍵指標數據，常見於BI類系統。
funnel漏斗圖。用於展現數據經過篩選、過濾等流程處理後發生的數據變化，常見於BI類系統。
evnetRiver事件河流圖。常用於展示具有時間屬性的多個事件，以及事件隨時間的演化。
treemap矩形式樹狀結構圖，簡稱：矩形樹圖。用於展示樹形數據結構，優勢是能最大限度展示節點的尺寸特徵。
venn韋恩圖。用於展示集合以及它們的交集。
tree樹圖。用於展示樹形數據結構各節點的層級關系
wordCloud詞雲。詞雲是關鍵詞的視覺化描述，用於匯總用戶生成的標簽或一個網站的文字內容
圖表類型
圖表庫標准包含單圖表類型的標准圖表以及多圖表類型混合的混搭圖表：
單圖表類型：line
折線圖
堆積折線圖
區域圖
堆積區域圖
單圖表類型：bar
柱形圖
堆積柱形圖
條形圖
堆積條形圖
單圖表類型：scatter
散點圖
氣泡圖
單圖表類型：k
K線圖
單圖表類型：pie
餅圖
圓環圖
南丁格爾玫瑰圖
單圖表類型：radar
雷達圖
填充雷達圖
單圖表類型：chord
和弦圖
單圖表類型：force
力導向布局圖。
單圖表類型：map
中國地圖
全國34個省市自治區
世界地圖
子區域模式
標准GeoJson擴展
SVG擴展
單圖表類型：heatmap
6. 如何echarts的legend中，滑鼠移過去後會出現數據展示的明細提示
可以的。dataRangeStyle=[//0{min:0,max:2000,formatter:function(v,v2){if(v21000){return'高於'+v}else{return'中'}}},//1{orient:'horizontal',//'vertical'min:0,max:2000,formatter:'{value}到{value2}'},//2{text:['高','低'],//文本，默認為數值文本min:0,max:2000},//3{orient:'horizontal',//'vertical'text:['高','低'],//文本，默認為數值文本min:0,max:2000},//4{splitNumber:0,min:0,max:2000},//5{orient:'horizontal',//'vertical'splitNumber:0,min:0,max:2000},//6{splitNumber:0,text:['高','低'],//文本，默認為數值文本min:0,max:2000},//7{orient:'horizontal',//'vertical'splitNumber:0,text:['高','低'],//文本，默認為數值文本min:0,max:2000},//8{calculable:true,min:0,max:2000,formatter:function(v){if(v>1500){returnv+'(高)'}elseif(v<500){returnv+'(低)'}else{returnv+'(中)'};}},//9{orient:'horizontal',//'vertical'calculable:true,min:0,max:2000},//10{color:['red','yellow'],//顏色text:['高','低'],//文本，默認為數值文本calculable:true,min:0,max:2000},//11{orient:'horizontal',//'vertical'color:['red','yellow'],//顏色text:['高','低'],//文本，默認為數值文本calculable:true,min:0,max:2000}]varcur=curIndex++%dataRangeStyle.length;option={title:{text:'當前樣式序號:'+cur,subtext:'NO.'+cur},dataRange:dataRangeStyle[cur],series:[{name:'',type:'map',data:[]}]};
7. echarts 怎麼展現數據表格
ECharts，縮寫來自Enterprise Charts，商業級數據圖表，一個純Javascript的圖表庫，可以流暢的運行在PC和移動設備上，兼容當前絕大部分瀏覽器（IE6/7/8/9 /10/11，chrome，firefox，Safari等），底層依賴輕量級的Canvas類庫ZRender，提供直觀，生動，可交互，可高度個性 化定製的數據可視化圖表。創新的拖拽重計算、數據視圖、值域漫遊等特性大大增強了用戶體驗，賦予了用戶對數據進行挖掘、整合的能力。
支持折線圖（區域圖）、柱狀圖（條狀圖）、散點圖（氣泡圖）、K線圖、餅圖（環形圖）、雷達圖（填充雷達圖）、和弦圖、力導向布局圖、地圖、儀表 盤、漏斗圖、事件河流圖等12類圖表，同時提供標題，詳情氣泡、圖例、值域、數據區域、時間軸、工具箱等7個可交互組件，支持多圖表、組件的聯動和混搭展 現。
模塊化單文件引入(推薦)
1
新建一個echarts.html文件，為ECharts准備一個具備大小(寬高)的Dom，
2
新建<script>標簽引入模塊化單文件echarts.js，
3
新建<script>標簽中為模塊載入器配置echarts和所需圖表的路徑(相對路徑為從當前頁面鏈接到echarts.js)，
4
<script>標簽內動態載入echarts和所需圖表，回調函數中可以初始化圖表並驅動圖表的生成，
5
瀏覽器中打開ecarts.html，就可以看到以下效果，：
END
標簽式單文件引入
新建一個echarts.html文件，為ECharts准備一個具備大小(寬高)的Dom，
新建<script>標簽引入echart-all.js，
新建<script>，使用全局變數echarts初始化圖表並驅動圖表的生成，
瀏覽器中打開echarts.html，可以看到如下效果，
8. echarts數據展現出來怎麼實現在頁面輸入，搜索的功能
echarts也是靠傳入參數後才能渲染出來效果圖的，你可以將頁面輸入搜索的字元串拿去在傳入echarts的參數中搜索，然後將搜索後的結果重新傳入echarts重新渲染也是可以的。
9. 如何用echarts做地圖的數據展現
ECharts開源來自網路商業前端數據可視化團隊，基於html5 Canvas，是一個純Javascript圖表庫，提供直觀，生動，可交互，可個性化定製的數據可視化圖表。創新的拖拽重計算、數據視圖、值域漫遊等特性大大增強了用戶體驗，賦予了用戶對數據進行挖掘、整合的能力。
ECharts (Enterprise Charts 商業產品圖表庫)
提供商業產品常用圖表，底層基於ZRender（一個全新的輕量級canvas類庫），創建了坐標系，圖例，提示，工具箱等基礎組件，並在此上構建出折線圖（區域圖）、柱狀圖（條狀圖）、散點圖（氣泡圖）、餅圖（環形圖）、K線圖、地圖、力導向布局圖以及和弦圖，同時支持任意維度的堆積和多圖表混合展現。
10. 怎麼樣讓ECharts從後台獲取數據並展示
//設置ajax訪問後台填充餅圖
function setChartPie(url,id){
var Chart=require('echarts').init(document.getElementById(id));
Chart.showLoading({text: '正在努力的讀取數據中...' });
var label=[];
var value=[];
$.ajax({
url:url,
dataType:"json",
success:function(data){
$.each(data,function(i,p){
label[i]=p['label'];
value[i]={'name':p['label'],'value':p['value']};
});
Chart.hideLoading();
optionPie.legend.data=label;
optionPie.series[0]['data']=value;
optionPie.series[0]['radius']=[0,100];
Chart.setOption(optionPie);
}
});
}