echarts 怎么获取数据库中的数据_sql

//设置ajax访问后台填充饼图 function setChartPie(url,id){ var Chart=require('echarts').init(document.getElementById(id))Chart.showLoading({text: '正在努力的读取数据中...' })var label=[]var value=[]$.ajax({ url:url, dataT...

在后台的controller中用Map<String, double[]>geocoordMap=new HashMap<String, 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, 即可

<!--给你看看大概代码吧，用心想想其实没那么难，这代码我从他们官网上下来自己改改就用了。首先我做的这个是被当d出框用的所以设置这个大小，拿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>

<title>人员及案件统计</title>

<!--

-->

<style>

*{margin:0padding:0}

</style>

</head>

</div>

<% 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>

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/sjk/9607377.html

echarts 怎么获取数据库中的数据

发表评论

评论列表（0条）