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实时数据股票相关的资料