今天给各位分享echarts从数据库获取数据eclipse的知识，其中也会对echarts怎么获取动态数据进行解释，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！
本文目录一览：
- 1、实现Echarts中数据的动态获取
- 2、echarts商业产品图表库 3.2.3怎么导入eclipse
- 3、echarts地图怎么从数据库中读取数据
- 4、C# echarts怎么 从数据库里取数据显示出来！求一份源代码 否则根本写不出来 谢谢
实现Echarts中数据的动态获取
1.客户端通过ajax发送请求
先绘制一个最简单的Echarts图表：
（这里就直接贴上代码了，直接用的是官网教程里异步数据加载和更新里的代码）
!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" ""
html lang="zh-CN"
head
meta http-equiv="Content-Type" content="text/html; charset=UTF-8"
titleECharts/title
!-- 引入 echarts.js --
script type="text/javascript" src="echarts.min.js"/script
!-- 引入jquery.js --
script type="text/javascript" src="jquery-1.12.3.js"/script
/head
body
!-- 为ECharts准备一个具备大小（宽高）的Dom --
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" ""
html lang="zh-CN"
head
meta http-equiv="Content-Type" content="text/html; charset=UTF-8"
titleECharts/title
!-- 引入 echarts.js --
script type="text/javascript" src="echarts.min.js"/script
!-- 引入jquery.js --
script type="text/javascript" src="jquery-1.12.3.js"/script
/head
body
!-- 为ECharts准备一个具备大小（宽高）的Dom --
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;iresult.length;i++){
names.push(result[i].name); //挨个取出类别并填入类别数组
}
for(var i=0;iresult.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-nameTestServlet/servlet-name
servlet-classtest.TestServlet/servlet-class
/servlet
servlet-mapping
servlet-nameTestServlet/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的用法：
①：先去下载 jackson-core.jar，jackson-annotations.jar，jackson-databind.jar（都是2.x版本，jackson官网不知为何不提供服务了…这三个jar让我一阵好找）
②：在项目的项目WEB-INF/lib下引入这三个jar
然后就可以在TestServlet里使用jackson提供的工具类了。（关于jackson的详细用法，这里贴一下官网教程：）
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 {
ListProduct list = new ArrayListProduct();
//这里把“类别名称”和“销量”作为两个属性封装在一个Product类里，每个Product类的对象都可以看作是一个类别（X轴坐标值）与销量（Y轴坐标值）的集合
list.add(new Product("衬衣", 10));
list.add(new Product("短袖", 20));
list.add(new Product("大衣", 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类中用到的自定义的Product类代码如下：
package test;
public class Product {
private String name; //类别名称
private int num; //销量
public Product(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商业产品图表库 3.2.3怎么导入eclipse
方法/步骤1
1、 设置引导方式
在BIOS设置通过光盘引导。
2
2、启动安装程序
在屏幕出现press any key to boot时按下任意键，系统进入引导界面。
3
3、进入欢迎界面
安装程序启动，选择您要安装的语言类型，同时选择适合自己的时间和货币显示种类及键盘和输入方式，点击Next。
4
5、开始安装
echarts地图怎么从数据库中读取数据
//设置ajax访问后台填充饼图 function setChartPie(url,id){ var Chart=require('echarts').init(document.getElementById(id)); Chart.showLoading({text: '正在努力的读取数据中...' }); var label=[]; var value=[]; $.ajax({ url:url, dataT...
C# echarts怎么 从数据库里取数据显示出来！求一份源代码 否则根本写不出来 谢谢
!--给你看看大概代码吧，用心想想其实没那么难，这代码我从他们官网上下来自己改改就用了。首先我做的这个是被当弹出框用的 所以设置这个大小，拿zrk来举例，zrk是从另外一个js里传递过来的 ajax post当success时 将zrk地址栏传递 其实只要写个简单的ajax便可以把你的数据绑定了，别想复杂了
$.ajax({
type : "post",
url : "GetJzwxxCount.action?t="+Math.random(),//你post的地址
data:{//你需要传递的参数
address:$("input[name=address]").val(),
name:$("input[name=jzwmc]").val()
},
dataType : "json",// 设置需要返回的数据类型
success : function(data) {
//这里是我传递到下面jsp的地址根据你自己的需要去写
},
beforeSend:function(){
GetLoading();
},
error : function() {
ClearLoading();
createDataGrid();
}// 这里不要加","
});
--
%@ page language="java" import="java.util.*" pageEncoding="utf-8"%
%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%
!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
html
head
base href="%=basePath%"
title人员及案件统计/title
meta http-equiv="pragma" content="no-cache"
meta http-equiv="cache-control" content="no-cache"
meta http-equiv="expires" content="0"
meta http-equiv="keywords" content="keyword1,keyword2,keyword3"
meta http-equiv="description" content="This is my page"
!--
link rel="stylesheet" type="text/css" href="styles.css"
--
style
*{margin:0;padding:0;}
/style
script type="text/javascript" src="content/js/jquery-1.4.4.min.js"/script
/head
body style="overflow:scroll;overflow-x:hidden; overflow-y:hidden; "
!--Step:1 Prepare a dom for ECharts which (must) has size (width hight)--
!--Step:1 为ECharts准备一个具备大小（宽高）的Dom--
div style="margin:0; padding:0;"
div id="main" style="height:240px;width:220px; float:left;"/div
div id="main1" style="height:240px;width:220px; float:left;"/div
!-- div id="main2" style="height:350px; width:260px; float:left;"/div --
/div
!--Step:2 Import echarts.js--
!--Step:2 引入echarts.js--
script src="content/count/js/echarts.js"/script
script type="text/javascript"
% String zrk=request.getParameter("zrk");%
% String ldrk=request.getParameter("ldrk");%
% String czrk=request.getParameter("czrk");%
% String zdrk=request.getParameter("zdrk");%
% String ffry=request.getParameter("ffry");%
% String wfaj=request.getParameter("wfaj");%
% if(zrk.equals("")){
zrk = "0";
}
if(ldrk.equals("")){
ldrk = "0";
}
if(czrk.equals("")){
czrk = "0";
}
if(zdrk.equals("")){
zdrk = "0";
}
if(ffry.equals("")){
ffry = "0";
}
if(wfaj.equals("")){
wfaj = "0";
}
%
var zrk = '%=zrk%';
var czrk = '%=czrk%';
var ldrk = '%=ldrk%';
var zdrk = '%=zdrk%';
var ffry = '%=ffry%';
var wfaj = '%=wfaj%';
// Step:3 conifg ECharts's path, link to echarts.js from current page.
// Step:3 为模块加载器配置echarts的路径，从当前页面链接到echarts.js，定义所需图表路径
require.config({
paths: {
echarts: 'content/count/js'
}
});
// Step:4 require echarts and use it in the callback.
// Step:4 动态加载echarts然后在回调函数中开始使用，注意保持按需加载结构定义图表路径
require(
[
'echarts',
'echarts/chart/pie'
],
function (ec) {
//--- 折柱 ---
var myChart = ec.init(document.getElementById('main'));
var dataStyle = {
normal: {
label: {show:false},
labelLine: {show:false}
}
};
var placeHolderStyle = {
normal : {
color: 'rgba(0,0,0,0)',
label: {show:false},
labelLine: {show:false}
},
emphasis : {
color: 'rgba(0,0,0,0)'
}
};
/* $.ajax({
type : "post",
url : "GetDataInfo.action?t="+Math.random(),//
data:{//设置数据源
sqbm:"",
type:""
},
dataType : "json",// 设置需要返回的数据类型
success : function(data) {
var dsdata = eval("("+data+")");
if(dsdata.ds!=null){
zrk=dsdata.ds.czrk+dsdata.ds.ldrk;
czrk=dsdata.ds.czrk;
ldrk=dsdata.ds.ldrk;
zdrk=dsdata.ds.zdrk;
} */
myChart.setOption({
title: {
text: ' 人口统计',
subtext: ' 人口总数：'+zrk,
x: '54',
y: '80',
itemGap: 20,
textStyle : {
color : 'rgba(30,144,255,0.8)',
fontFamily : '微软雅黑',
fontSize : 20,
fontWeight : 'bolder'
}
},
tooltip : {
show: true
},
legend: {
orient : 'vertical',
x : 108,
y : 0,
itemGap:6,
data:['总人口:'+zrk,'常住人口:'+czrk,'流动人口:'+ldrk,'重点人口:'+zdrk]
},
series : [
{
name:'总人口统计',
type:'pie',
clockWise:false,
radius : [80,90],
center:['48%',100],
itemStyle : {
normal: {
color:'#71d7fc',
label: {show:false},
labelLine: {show:false}
}
},
data:[
{
value:zrk,
name:'总人口:'+zrk
},
{
value:zrk*0.2,
name:'总人口',
itemStyle : placeHolderStyle
}
]
},
{
name:'常住人口统计',
type:'pie',
clockWise:false,
radius : [70, 80],
center:['48%',100],
itemStyle : {
normal: {
color:'#71fce7',
label: {show:false},
labelLine: {show:false}
}
},
data:[
{
value:czrk,
name:'常住人口:'+czrk
},
{
value:zrk-czrk,
name:'常住人口',
itemStyle : placeHolderStyle
}
]
},
{
name:'流动人口统计',
type:'pie',
clockWise:false,
radius : [60, 70],
center:['48%',100],
itemStyle : {
normal: {
color:'#fcd071',
label: {show:false},
labelLine: {show:false}
}
},
data:[
{
value:ldrk,
name:'流动人口:'+ldrk
},
{
value:zrk-czrk,
name:'流动人口',
itemStyle : placeHolderStyle
}
]
},{
name:'重点人口统计',
type:'pie',
clockWise:false,
radius : [50, 60],
center:['48%',100],
itemStyle : dataStyle,
data:[
{
value:zdrk,
name:'重点人口:'+zdrk
},
{
value:zrk-zdrk,
name:'重点人口',
itemStyle : placeHolderStyle
}
]
}
]
});
/* },
error : function() {
//isAjax=false;
}// 这里不要加","
}); */
//--- 折柱 ---
var myChart1 = ec.init(document.getElementById('main1'));
var dataStyle1 = {
normal: {
label: {show:false},
labelLine: {show:false}
}
};
var placeHolderStyle1 = {
normal : {
color: 'rgba(0,0,0,0)',
label: {show:false},
labelLine: {show:false}
},
emphasis : {
color: 'rgba(0,0,0,0)'
}
};
myChart1.setOption({
title: {
text: ' 案件统计',
subtext:' 涉案人员：'+ffry+'\r\n\n 违法案件：'+wfaj,
x: '45',
y: '110',
itemGap: 13,
textStyle : {
color : 'rgba(30,144,255,0.8)',
fontFamily : '微软雅黑',
fontSize : 20,
fontWeight : 'bolder'
}
},
tooltip : {
show: true
},
legend: {
orient : 'vertical',
x : 115,
y : 60,
itemGap:5,
data:['涉案人员:'+ffry,'违法案件:'+wfaj]
},
series : [
{
name:'涉案人员统计',
type:'pie',
clockWise:false,
radius : [70, 80],
center:['45%',150],
itemStyle : {
normal: {
color:'#58da6a',
label: {show:false},
labelLine: {show:false}
}
},
data:[
{
value:ffry,
name:'涉案人员:'+ffry
},
{
value:ffry*0.2,
name:'涉案人员',
itemStyle : placeHolderStyle1
}
]
},
{
name:'违法案件统计',
type:'pie',
clockWise:false,
radius : [60, 70],
center:['45%',150],
itemStyle : {
normal: {
color:'#36ADD8',
label: {show:false},
labelLine: {show:false}
}
},
data:[
{
value:wfaj,
name:'违法案件:'+wfaj
},
{
value:wfaj*0.2,
name:'违法案件',
itemStyle : placeHolderStyle1
}
]
}
]
});
}
);
/script
/body
/html
echarts从数据库获取数据eclipse的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于echarts怎么获取动态数据、echarts从数据库获取数据eclipse的信息别忘了在本站进行查找喔。
温馨提示
2. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！
3. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请后台提交工单处理！
6. 本站资源售价只是赞助，收取费用仅维持本站的日常运营所需！
7. 如遇到加密压缩包，请使用WINRAR解压,如遇到无法解压的请后台提交工单！
【免责声明】：
本站所发布的一切资源仅限用于学习和研究目的；不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负。本站信息来自网络，版权争议与本站无关。您必须在下载后的24个小时之内，从您的电脑中彻底删除上述内容。如果您喜欢该程序，请支持正版软件，购买注册，得到更好的正版服务。
【关于转载】：
本站尊重互联网版权体系，本站部分图片、文章大部分转载于互联网、所有内容不代表本站观点、不对文章中的任何观点负责、转载的目的只用于给网民提供信息阅读，无任何商业用途，所有内容版权归原作者所有
如本站（文章、内容、图片、视频）任何资料有侵权，先说声抱歉；麻烦您请联系请后台提交工单，我们会立即删除、维护您的权益。非常感谢您的理解。
【附】:
二○○二年一月一日《计算机软件保护条例》第十七条规定：为了学习和研究软件内含的设计思想和原理，通过安装、显示、传输或者存储软件等方式使用软件的，可以不经软件著作权人许可，不向其支付报酬！鉴于此，也希望大家按此说明研究软件！
注：本站资源来自网络转载，版权归原作者和公司所有，如果有侵犯到您的权益，请第一时间联系我们处理！
-----------------------------------------------------------------------------------------------------------
【版权声明】：
一、本站致力于为源码爱好者提供国内外软件开发技术和软件共享，着力为用户提供优资资源。
二、本站提供的源码下载文件为网络共享资源，请于下载后的24小时内删除。如需体验更多乐趣，还请支持正版。
三、如有内容侵犯您的版权或其他利益的，请编辑邮件并加以说明发送到站长邮箱。站长会进行审查之后，情况属实的会在三个工作日内为您删除。
-----------------------------------------------------------------------------------------------------------
源码村资源网 » echarts从数据库获取数据eclipse（echarts怎么获取动态数据）
