1. echarts 股票分時圖怎麼看
force1.html還有就是多看一下,它的API。
2. echarts 怎麼非同步添加數據
<script src="~/Scripts/NewEcharts/echarts.js"></script>
<script type="text/javascript">
var myChart;
$(function () {
load();
});
function load() {
require.config({
paths: {
//echarts: '../Scripts/Echartsjs'
echarts: '../Scripts/NewEcharts'
}
});
require(
[
'echarts',
'echarts/chart/bar'
//'echarts/chart/line'
//'echarts/chart/map'
],
DrawEchart
);
}
function DrawEchart(ec) {
//--- 折柱 ---
myChart = ec.init(document.getElementById('EchartsDiv'));
//圖表顯示提示信息
myChart.showLoading({
text: "圖表數據正在努力載入..."
});
//定義圖表
var option = {
tooltip: {
trigger: 'axis'
},
//color: '#66B3FF',
animation: false,
addDataAnimation: false,
calculable: true,
xAxis: [
{
type: 'value',
boundaryGap: [0, 0.01]
}
],
yAxis: [
{
splitLine: {
show: false
},//分隔線
//splitArea: { show: false },//分隔區域
type: 'category',
// data: ['巴西', '印尼', '美國', '印度', '中國', '世界人口(萬)']
data:[]
}
],
series: [
{
name: '資源使用情況',
color: '#66B3FF ',
type: 'bar',
// data: [18203, 23489, 29034, 104970, 131744, 630230]
data:[]
}
]
};
//通過Ajax獲取數據
$.ajax({
type: "post",
async: false, //同步執行
url: "/Report/GetVMUsedInfo",
dataType: "json", //返回數據形式為json
data: {rnd:Math.random()},
success: function(result) {
if (result) {
//將返回的category和series對象賦值給options對象內的category和series
//因為xAxis是一個數組 這里需要是xAxis[i]的形式
option.yAxis[0].data = result.yAxis;
option.series[0].data = result.series;
myChart.hideLoading();
myChart.setOption(option);
}
},
error: function(errorMsg) {
alert("圖表請求數據失敗啦!");
}
});
//myChart.hideLoading();
//myChart.setOption(option);
}
</script>
返回用的是 json數據;
後台使用的Asp.net MVC,使用了匿名類(主要是為了方便),
var newObj = new
{
yAxis =result.Data.DanweiList,
series= result.Data.ApplyVMEventList
};
return Json(newObj, JsonRequestBehavior.AllowGet);
3. 怎麼在echarts·example操作介紹
1、 在echarts官網下載包,解壓後,將文件Echarts\echarts-2.2.7\echarts-2.2.7\doc\example\www\js\echarts.js文件拷貝,放到eclipse中。
2、 創建jsp頁面即可
注意:1)紅色表示是框架,換不同的樣式也不用動的
2)option是換樣式的,如柱狀圖等等,具體代碼參考網路官網
3)本例中的x值是控制上圖中左側文字與左邊的距離大小
4)需要在body中給其一個容器。
<!-- 為ECharts准備一個具備大小(寬高)的Dom -->
<div id="main" style="height:600px;"></div>
<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<%@ page language="java" import="java.util.*,java.lang.*" pageEncoding="UTF-8"%>
<html>
<head>
<title>日誌管理</title>
<meta name="decorator" content="default"/>
<meta charset="utf-8">
<!-- ECharts單文件引入 -->
<!-- <script src="http://echarts..com/build/dist/echarts.js"></script> -->
<script src="${ctxStatic }/js/echarts.js"></script>
<script type="text/javascript">
// 路徑配置
require.config({
paths: {
// echarts: 'http://echarts..com/build/dist'
echarts: '${ctxStatic }/js/build/dist'
}
});
// 使用
require(
[
'echarts',
'echarts/chart/pie' // 使用柱狀圖就載入bar模塊,按需載入
],
function (ec) {
// 基於准備好的dom,初始化echarts圖表
var myChart = ec.init(document.getElementById('main'));
option = {
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b}: {c} ({d}%)"
},
legend: {
orient: 'vertical',
x: '40px',
data:['指令發布','案件討論','每日警情','每周警情','信息共享','日常互助','考核通報','前科重點人員','高危人員','刑嫌人員','在逃相對關系人','在逃人員','DNA比中分析','銀聯司法','電信詐騙串並','視頻串並','協同辦案','以案查物','以物查案(手機分析)','以物查案(電腦分析)','以物查案(貴重物品分析)','以物查案(車輛分析)']
},
series: [
{
name:'信息來源',
type:'pie',
selectedMode: 'single',
radius: [0, '25%'],
label: {
normal: {
position: 'inner'
}
},
labelLine: {
normal: {
show: false
}
},
data:[
//{value:${xtdl}, name:'系統登錄', selected:true},
{value:${zl+tl+mr+mz}, name:'合成作戰'},
{value:${xx+khtb+rchz}, name:'互助專欄'},
{value:${qkzd+gwry+xxry+ztxd+ztry+dnabz}, name:'人員分析'},
{value:${jass+dxzp+vod+xtba}, name:'串並案分析'},
{value:${yacw+sjfx+dnfx+gzwp+clfx}, name:'物品分析'}
]
},
{
name:'信息來源',
type:'pie',
radius: ['30%', '55%'],
data:[
{value:${zl}, name:'指令發布'},
{value:${tl}, name:'案件討論'},
{value:${mr}, name:'每日警情'},
{value:${mz}, name:'每周警情'},
{value:${xx}, name:'信息共享'},
{value:${rchz}, name:'日常互助'},
{value:${khtb}, name:'考核通報'},
{value:${qkzd}, name:'前科重點人員'},
{value:${gwry}, name:'高危人員'},
{value:${xxry}, name:'刑嫌人員'},
{value:${ztxd}, name:'在逃相對關系人'},
{value:${ztry}, name:'在逃人員'},
// {value:${xtdl}, name:'系統登錄'},
{value:${dnabz}, name:'DNA比中分析'},
{value:${jass}, name:'銀聯司法'},
{value:${dxzp}, name:'電信詐騙串並'},
{value:${vod}, name:'視頻串並'},
{value:${xtba}, name:'協同辦案'},
{value:${yacw}, name:'以案查物'},
{value:${sjfx}, name:'以物查案(手機分析)'},
{value:${dnfx}, name:'以物查案(電腦分析)'},
{value:${gzwp}, name:'以物查案(貴重物品分析)'},
{value:${clfx}, name:'以物查案(車輛分析)'}
]
}
]
};
// 為echarts對象載入數據
myChart.setOption(option);
}
);
</script>
</head>
<body>
<ul class="nav nav-tabs">
<li ><a href="${ctx}/sys/log/list">日誌列表</a></li>
<li class="active"><a href="${ctx}/sys/log/view"><b>日誌視圖</b></a></li>
</ul>
<form:form id="searchForm" modelAttribute="bean" action="${ctx}/sys/log/view" method="post" class="breadcrumb form-search">
<b>重點模塊訪問數據統計 [系統總登錄次數:<span style="color:green;">${xtdl}</span>]</b>
</form:form>
<!-- 為ECharts准備一個具備大小(寬高)的Dom -->
<div id="main" style="height:600px;"></div>
</body>
</html>
4. 如何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:[]}]};
5. 類似echarts還有哪些圖表
類似echarts小程序的圖表組件列舉:
1、fusionCharts
(5)echarts股票信息擴展閱讀
製作圖表時要注意:
1、要有自身的表達特性,尤其對時間、空間等概念的表達和一些抽象思維的表達具有文字和言辭無法取代的傳達效果。圖表要具有表達的准確性,對所示事物的內容、性質或數量等處的表達應該准確無誤。
2、要有信息表達的可讀性,在圖表認識中應該通俗易懂,尤其是用於大眾傳達的圖表。
3、製作圖表要有藝術性,圖表是通過視覺的傳遞來完成,必須考慮到人們的欣賞習慣和審美情趣,這也是區別於文字表達的藝術特性。
6. echarts是做什麼的
1、 Echarts,一個純 Javascript 的圖表庫,可以流暢的運行在 PC 和移動設備上,兼容當前絕大部分瀏覽器(IE8/9/10/11),Chrome,Firefox,Safari等。
2、底層依賴輕量級Canva+庫ZRender,提供直觀,生動,可交互,可高度個性化定製的數據可視化圖表。
3、ECharts 3 中更是加入了更多豐富的交互功能以及更多的可視化效果,並且對移動端做了深度的優化。
(6)echarts股票信息擴展閱讀
echarts的優點:
1、國人開發,文檔全,便於開發和閱讀文檔。
2、圖表豐富,可以適用各種各樣的功能。
echarts的缺點:
1、移動端使用略卡,畢竟是PC端的東西,移植到移動端肯定多多少少有些問題吧,或許跟自己水平也有一定的關系。
2、echarts不失為一款比較適合我們這種碼農使用的框架。
3、echarts就不貼代碼了。畢竟文檔很全。
7. Echarts連接mysql數據的實例
varmyChart;
//創建ECharts圖表方法
functionDrawEChart(ec){
//---折柱---
myChart=ec.init(document.getElementById('main'));
//圖表顯示提示信息
myChart.showLoading({
text:"圖表數據正在努力載入..."
});
//定義圖表options
varoptions={
title:{
text:"通過Ajax獲取數據呈現圖標示例",
subtext:"www.stepday.com",
sublink:"http://www.stepday.com/myblog/?Echarts"
},
tooltip:{
trigger:'axis'
},
legend:{
data:[]
},
toolbox:{
show:true,
feature:{
mark:false
}
},
calculable:true,
xAxis:[
{
type:'category',
data:[]
}
],
yAxis:[
{
type:'value',
splitArea:{show:true}
}
],
series:[]
};
//通過Ajax獲取數據
$.ajax({
type:"post",
async:false,//同步執行
url:"/Ajax/GetChartData.aspx?type=getData&count=12",
dataType:"json",//返回數據形式為json
success:function(result){
if(result){
//將返回的category和series對象賦值給options對象內的category和series
//因為xAxis是一個數組這里需要是xAxis[i]的形式
options.xAxis[0].data=result.category;
options.series=result.series;
options.legend.data=result.legend;
myChart.hideLoading();
myChart.setOption(options);
}
},
error:function(errorMsg){
alert("不好意思,大爺,圖表請求數據失敗啦!");
}
});
}
參考:http://www.stepday.com/topic/?906
8. Echarts,柱狀圖點擊事件。
varchart=echarts.init(dom);
chart.on('click',function(params){
console.log('你點擊的是:'+params.seriesName);
//dosomething
});
可以使用點擊事件完成你的需求。
9. 怎麼查看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
10. 類似echarts 的報表工具有哪些
1、fusionCharts:FusionCharts是InfoSoft Global公司的一個產品,InfoSoft Global 公司是lash圖形方案提供商。
FusionCharts free 是一個跨平台,跨瀏覽器的flash圖表組件解決方案,能夠ASP.NET, ASP, PHP, JSP, ColdFusion, Ruby on Rails, HTML頁面以及PPT調用。
2、highcharts:Highcharts 是一個用純JavaScript編寫的一個圖表庫, web應用程序添加有交互性的圖表。
3、ActiveReports是一款NET 平台的報表控制項,工作於HTML5 / WinForm / ASP.NET / ASP.NET MVC / WPF 等平台下報表設計和報表開發工作需求。
(10)echarts股票信息擴展閱讀:
綜合幾年的客戶反饋情況,我們認為最重要的有如下幾點:
1、報表設計工具要靈活方便,能勝任任意復雜的報表形式
2、系統應能處理不同結構的報表
3、絕對應採用B/S架構的報表平台
報表採集需要有基層和中級層級參與,如果採用單機版軟體,則有很多問題。
1)需要層層下發報表格式和報表軟體,降低任務部署效率。
2)如果運行中報表格式更新了,又要層層下發。萬一某些下級沒有更新,那就只有一個字「悲慘」。
3)下級要安裝報表軟體,嚴重增加總部的服務壓力。
4、系統應提高強大的報表運算和審核校對能力
5、系統應能自動管理資料庫
6、一定要考慮到上線後的報表指標體系還是要變的
7、系統的分析功能一定要強大
8、一定要支持二次開發,來滿足某些極個性化的需求
9、 用戶自定義報表製作,能夠滿足終端用戶在使用過程中的編輯需求。