echarts动态获取数据库数据（动态获取数据,写到echart）

今天给各位分享echarts动态获取数据库数据的知识，其中也会对动态获取数据,写到echart进行解释，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！

本文目录一览：

• 1、C#中Echarts如何获取oracle中的数据然后可视化，将数据库数据转json格式，用ajax获取数据给js可视化吗
• 2、echarts geocoord如何Ajax动态获取数据库数据问题
• 3、echarts的树图，怎么动态从后台获取数据
• 4、Echarts通过Ajax动态获取后端数据（饼状图，柱状图）

C#中Echarts如何获取oracle中的数据然后可视化，将数据库数据转json格式，用ajax获取数据给js可视化吗

接收MySQL数据

点击JavaScript,进入配置页面，在1处填入dip名字，2处的地址为宿主机地址，默认为dip系统部署机器地址, 点击下一步，填写脚本配置网页链接

dip名称：使用英文且见名知义(最好使用驼峰命名法)。

dip的宿主机：运行该dip的服务器ip地址，也是我们的数据处理服务器。

进入如下界面，在黑窗口的run函数中编写JavaScript脚本，将获取到的数据转换成产品需要的数据结构，最后输出。

首先编写脚本获取数据，获取数据有2种方式，第一种是主动获取，第二种是被动接收，根据实际情况选择对应的获取数据方式。而每一种方式又有多种类型。

对接MySQL我们选择主动获取方式，点击输入-主动获取，选择第一项MySQL ,相应的接入MySQL的代码会自动填写在function run() 里面 ，in 为接入语句，executes为数据处理逻辑，outs处填写数据输出语句。

如下图，在1处添加接入MySQL数据源url，username，password，在2处添加查询简单的查询sql语句，查询自己需要的数据。

function run() {

var MysqlJdbcAdapter = Java.type("com.uinnova.di.dicom.jdbc.MysqlJdbcAdapter");

while (true) {

try {

var adapter = new MysqlJdbcAdapter("jdbc:mysql://127.0.0.1:3306/database?useUnicode=truecharacterEncoding=UTF-8", "root", "root");

var data = adapter.getDataByTable("select * from ...");

heartBeat.addInCount(data.size());

//executes...

//outs...

sleep(60000);

} catch (error) {

logger.error("脚本执行错误：",error);

}

}}

接收ActiveMq数据

点击JavaScript,进入配置页面，在1处填入dip名字，2处的地址为宿主机地址，默认为dip系统部署机器地址, 点击下一步，填写脚本配置。

dip名称：使用英文且见名知义(最好使用驼峰命名法)。

dip的宿主机：运行该dip的服务器ip地址，也是我们的数据处理服务器。

echarts geocoord如何Ajax动态获取数据库数据问题

在后台的controller中用MapString, double[] geocoordMap=new HashMapString, double[]();来存储地理经纬度数据，例如：

String key="上海";

double[] value=new double[]{121.550544,31.227384};

geocoordMap.put(key, value);

需要标记多少个点，就put几个(key,value)到geocoordMap里面，然后将geocoordMap以json格式传到前台，var geoCoordData=data取值；直接在option里面写： geoCoord: geoCoordData, 即可

echarts的树图，怎么动态从后台获取数据

获取数据后效果

点击饼图获取到数据的效果：

html代码：

放2个div，取个id就行。引用写好的js。

div

div class="case_type"

div class="pie_chart_name"测试类型/div

div id="div_pieCategory" style="height:210px;

width: 300px; float: left;" class="pie_chart_img"

/div

/div

div class="case_date"

div id="div_bar" style="height:210px; width: 300px; float: left;"

/div

/div

/div

input id="hid_category" type="hidden" value="" /

input id="hid_state" type="hidden" value="" /

input id="hid_date" type="hidden" value="" /

/form

script src="js/jquery-1.9.1.js"/script

script src="js/esl.js"/script

script src="BusinessJs/echarts.js"/script

echarts代码：

1、在BusinessJs/echarts.js中引用echarts及zrender：

require.config({

packages: [

{

name: 'echarts',

location: './echarts/src',

main: 'echarts'

},

{

name: 'zrender',

location: './zrender/src',// zrender与echarts在同一级目录

main: 'zrender'

}

]

});

require(

[

'echarts',

'echarts/chart/bar',

'echarts/chart/pie'

],

function (ec) {

var myChart_Category = ec.init(document.getElementById('div_pieCategory'));

var myChart_Bar = ec.init(document.getElementById('div_bar'));

SetTestStatisticsByCategory(ec, myChart_Category);

SetTestStatisticsByBeginTime(ec, myChart_Bar);

//设置点击事件

var ecConfig = require('echarts/config');

myChart_Category.on(ecConfig.EVENT.PIE_SELECTED, function (param) {

var selected = param.selected;

//debugger;

var serie

serie = optionpie_category.series[0];

if (jQuery.inArray(true, selected[0]) -1) {

for (var i = 0; i serie.data.length; i++) {

if (selected[0][i]) {

$("#hid_category").val(serie.data[i].name);

GetTestList(serie.data[i].name);

}

}

}

else {

$("#hid_category").val("");

}

})

myChart_Bar.on(ecConfig.EVENT.CLICK, function (param) {

var selected = param;

var xAxis;

xAxis = optionpie_bar.xAxis[selected.seriesIndex];

for (var i = 0; i xAxis.data.length; i++) {

if (i == selected.dataIndex) {

if ($("#hid_date").val() != xAxis.data[i]) {

$("#hid_date").val(xAxis.data[i]);

} else {

$("#hid_date").val("");

}

GetTestList(xAxis.data[i]);

}

}

})

}

)

2、使用jquery ajax获取数据并绑定：

//获取测试类型统计数据

function GetTestStatisticsByCategory() {

$.ajax({

type: "post",

dataType: "text", traditional: true,

data: { oper: "bycategory" },

url: AjaxUrl,

async: false,//表示同步执行

success: function (data, textStatus) {

if (data != null) {

if (data) {

datapie_category = eval('(' + data + ')');

}

else {

alert("获取测试类型统计数据失败！");

}

}

},

complete: function (XMLHttpRequest, textStatus) { },

error: function (e) {

alert("获取测试类型统计数据失败，请刷新页面重新加载！");

}

});

}

3、ashx后台代码：

组织好字符串返回就行。完全按照这个格式来。

public class test : IHttpHandler

{

public void ProcessRequest(HttpContext context)

{

context.Response.ContentType = "text/plain";

string Test = CustomResponse.GetResponse("lc");

string categroy = CustomResponse.GetResponse("cl");

string oper = CustomResponse.GetResponse("oper");

string condition = CustomResponse.GetResponse("cd");

string id = CustomResponse.GetResponse("id");

switch (oper)

{

case "bycategory":

GetTestStatisticsByCategory(context);//按照测试类型统计

break;

case "bystate":

GetTestStatisticsByState(context);//按照测试状态统计

break;

case "bybegintime":

GetTestStatisticsByBeginTime(context);//按照月份统计数据

break;

default:

break;

}

}

/// summary

/// 按照测试类型统计

/// /summary

/// param name="context"/param

private void GetTestStatisticsByCategory(HttpContext context)

{

string returnvalue = "[{ value:33,name:'其他'},

{ value:52,name:'测试类型1'},{ value:36,name:'测试类型12'},

{ value:31,name:'测试类型222121'}]";

context.htm = htm(returnvalue);

context.Response.End();

}

/// summary

/// 按照测试状态统计

/// /summary

/// param name="context"/param

private void GetTestStatisticsByState(HttpContext context)

{

string returnvalue = "";

context.htm = htm(returnvalue);

context.Response.End();

}

/// summary

/// 按照月份统计

/// /summary

/// param name="context"/param

private void GetTestStatisticsByBeginTime(HttpContext context)

{

string returnvalue = "['2014-1','2014-2','2014-3','2013-4',

'2014-4','2013-5'];[2,10,25,1,8,1]";

context.htm = htm(returnvalue);

context.Response.End();

}

public bool IsReusable

{

get

{

return false;

}

}

}

回答不容易,希望能帮到您,满意请帮忙采纳一下，谢谢 !

Echarts通过Ajax动态获取后端数据（饼状图，柱状图）

定义一个数组为names，在 legend中通过 data: names传入图例名称；

创建一个数组mydata[]，用for循环把后台传来的List整个放进去(注意格式为“{value:xxx, name:xxx}”），在option里的series中通过“data: mydata”传入即可；

echarts动态获取数据库数据的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于动态获取数据,写到echart、echarts动态获取数据库数据的信息别忘了在本站进行查找喔。