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>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
