echarts从数据库获取数据eclipse（echarts怎么获取动态数据）

2023-01-18 12:22:10分类：杂七乱八热度：151评论： 0

今天给各位分享echarts从数据库获取数据eclipse的知识，其中也会对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从数据库获取数据eclipse（echarts怎么获取动态数据）,echarts从数据库获取数据eclipse,信息,引导,java,第1张

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的信息别忘了在本站进行查找喔。

相关阅读：

1、液晶网人才招聘（液晶网人才招聘TF0G工艺师的简历）

2、装修合同模板范本（装修合同模版）

3、求职信息（求职信息是就业的决定性因素）

4、学校是什么时候出现的为什么（学校是啥时候出现的）

5、医生求职简历图片（医院求职简历表图片）

1、本网站名称：源码村资源网
2、本站永久网址：https://www.yuanmacun.com
3、本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长进行删除处理。
4、本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
5、本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
6、本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。
源码村资源网 » echarts从数据库获取数据eclipse（echarts怎么获取动态数据）
源码村长

源码村长

分享到：

相关推荐

您需要 登录账户 后才能发表评论

发表评论

欢迎 访客 发表评论