echarts實時數據股票_百度echarts如何實時顯示當前價格

❶ 實現Echarts中數據的動態獲取

1.客戶端通過ajax發送請求
先繪制一個最簡單的Echarts圖表：
（這里就直接貼上代碼了，直接用的是官網教程里非同步數據載入和更新里的代碼）
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>ECharts</title>


<script type="text/javascript" src="echarts.min.js"></script>

<script type="text/javascript" src="jquery-1.12.3.js"></script>
</head>

<body>

<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: []
}]
});

</script>

</body>
</html>
看到了吧，現在option中的xAxis和yAxis里的data都是空值。待會兒我們會用從伺服器取回的數據去」填滿「它。
下面貼上補充了ajax部分的完整前端代碼：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>ECharts</title>


<script type="text/javascript" src="echarts.min.js"></script>

<script type="text/javascript" src="jquery-1.12.3.js"></script>
</head>

<body>

<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: []
}]
});

myChart.showLoading(); //數據載入完之前先顯示一段簡單的loading動畫

var names=[]; //類別數組（實際用來盛放X軸坐標值）
var nums=[]; //銷量數組（實際用來盛放Y坐標值）

$.ajax({
type : "post",
async : true, //非同步請求（同步請求將會鎖住瀏覽器，用戶其他操作必須等待請求完成才可以執行）
url : "TestServlet", //請求發送到TestServlet處
data : {},
dataType : "json", //返回數據形式為json
success : function(result) {
//請求成功時執行該函數內容，result即為伺服器返回的json對象
if (result) {
for(var i=0;i<result.length;i++){
names.push(result[i].name); //挨個取出類別並填入類別數組
}
for(var i=0;i<result.length;i++){
nums.push(result[i].num); //挨個取出銷量並填入銷量數組
}
myChart.hideLoading(); //隱藏載入動畫
myChart.setOption({ //載入數據圖表
xAxis: {
data: names
},
series: [{
// 根據名字對應到相應的系列
name: '銷量',
data: nums
}]
});

}

},
error : function(errorMsg) {
//請求失敗時執行該函數
alert("圖表請求數據失敗!");
myChart.hideLoading();
}
})

</script>

</body>
</html>

2.伺服器端Servlet接收請求
客戶端的請求url是』TestServlet『，那我們得先在web.xml配置以下映射：
<servlet>
<servlet-name>TestServlet</servlet-name>
<servlet-class>test.TestServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>TestServlet</servlet-name>
<url-pattern>/TestServlet</url-pattern>
</servlet-mapping>

然後就來著手寫處理客戶端請求的TestServlet啦！
3.生成json數據並返回給客戶端
生成Json數據要用到額外的jar包，這里我使用的jackson，json-lib 2010年就沒有再更新了… （2016-5-3日更：發現Google出品的Gson也蠻好用的，重點是很小巧，只需引入一個jar就搞定，用法也很簡單）
簡單介紹一下jackson的用法：
①：先去http://mvnrepository.com/下載 jackson-core.jar，jackson-annotations.jar，jackson-databind.jar（都是2.x版本，jackson官網不知為何不提供服務了…這三個jar讓我一陣好找）
②：在項目的項目WEB-INF/lib下引入這三個jar
然後就可以在TestServlet里使用jackson提供的工具類了。（關於jackson的詳細用法，這里貼一下官網教程：http://wiki.fasterxml.com/JacksonInFiveMinutes）
TestServlet代碼如下：
package test;

import java.io.IOException;
import java.util.*;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.fasterxml.jackson.databind.ObjectMapper;

public class TestServlet extends HttpServlet {

@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
doPost(req,resp);
}

@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

List<Proct> list = new ArrayList<Proct>();

//這里把「類別名稱」和「銷量」作為兩個屬性封裝在一個Proct類里，每個Proct類的對象都可以看作是一個類別（X軸坐標值）與銷量（Y軸坐標值）的集合
list.add(new Proct("襯衣", 10));
list.add(new Proct("短袖", 20));
list.add(new Proct("大衣", 30));

ObjectMapper mapper = new ObjectMapper(); //提供java-json相互轉換功能的類

String json = mapper.writeValueAsString(list); //將list中的對象轉換為Json格式的數組

//System.out.println(json);

//將json數據返回給客戶端
response.setContentType("text/html; charset=utf-8");
response.getWriter().write(json);
}

TestServlet類中用到的自定義的Proct類代碼如下：

package test;

public class Proct {

private String name; //類別名稱
private int num; //銷量

public Proct(String name, int num) {
this.name = name;
this.num = num;
}

public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public int getNum() {
return num;
}
public void setNum(int num) {
this.num = num;
}

}

4.客戶端接收數據後顯示
客戶端接受伺服器數據並解析後，就可以正常顯示圖表數據了：

❷ 怎麼樣讓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);
}
});

}

❸ echarts如何動態獲取後台數據

一般是通過ajax加數據請求過來，然後進行echarts的圖表渲染

❹ PB調用echarts 怎麼實時resizecharts圖表顯示

就個數組保存myChart所有實例,然後每個都調用一下resize
var charts = [];
myChart = echarts.init(document.getElementById('main'));
myChart.setOption(option);
charts.push(myChart);

myChart = echarts.init(document.getElementById('main2'));
myChart.setOption(option);
charts.push(myChart);

window.onresize = function(){
for(var i = 0; i < charts.length; i++){
charts[i].resize();
}
};

❺ echarts 地圖怎麼實時更新點的數據

ECharts開源來自網路商業前端數據可視化團隊，基於html5 Canvas，是一個純Javascript圖表庫，提供直觀，生動，可交互，可個性化定製的數據可視化圖表。創新的拖拽重計算、數據視圖、值域漫遊等特性大大增強了用戶體驗，賦予了用戶對數據進行挖掘、整合的能力。

ECharts (Enterprise Charts 商業產品圖表庫)
提供商業產品常用圖表，底層基於ZRender（一個全新的輕量級canvas類庫），創建了坐標系，圖例，提示，工具箱等基礎組件，並在此上構建出折線圖（區域圖）、柱狀圖（條狀圖）、散點圖（氣泡圖）、餅圖（環形圖）、K線圖、地圖、力導向布局圖以及和弦圖，同時支持任意維度的堆積和多圖表混合展現。

❻ echarts怎麼做實時動態的折線圖

1、創建折線圖的數據區（包括年份和數據）2、僅選擇數據區創建折線圖（插入選項卡/圖表工具組/折線圖）3、得到的折線圖x坐標不滿足要求，在圖表區單擊滑鼠右鍵，選擇「選擇數據」，進入「選擇數據源」對話框4、單擊對話框右側「水平分類軸標簽」下的「編輯」按鈕5、選擇對應x坐標軸的年份區域6、單擊確定可見年份數據更改了圖表的x軸坐標系列。

❼ echarts怎麼做實時動態的折線圖

❽ 如何使用echarts 通過按鈕來查詢數據製作表

require.config({

paths: {

echarts: GLOBAL.WEBROOT+'/js-busi/track'

}

});

require(

[
'echarts',

'echarts/chart/bar'
],DrawEChart);
function DrawEChart(ec){
var myChart = ec.init(document.getElementById('picturePlace'));
myChart.showLoading({
text : "圖表數據正在努力載入..."
});
//定義圖表option
var option = {
……
};
//為echarts對象載入數據
myChart.setOption(option);
//myChart.hideLoading();
getChartData(myChart);//ajax後台交互
}

});

❾ 百度echarts如何實時顯示當前價格

Gallery鏈接網頁鏈接

❿ echarts和angularjs如何實時更新數據

實時數據是指向股市行情圖那樣實時數據流嗎？一般 HTTP 長連接要麼 websocket 要麼 SSE

導航:首頁 > 科創數據 > echarts實時數據股票

echarts實時數據股票

與echarts實時數據股票相關的資料