文章目录：
- 1、C# echarts怎么 从数据库里取数据显示出来！求一份源代码 否则根本写不出来 谢谢
- 2、Echarts Gallery的官方实例和个人的实例源代码如何下载？
- 3、echarts怎么用？
- 4、有人读过Echarts源码吗
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 Gallery的官方实例和个人的实例源代码如何下载？
1、打开echarts官网网站，如图。
2、点击下载功能，显示列表，如图。
3、点击主题下载，进入到主题下载页面，如图。
4、点击定制主题，进入到定制页面，如图。
5、这里可以使用默认的，也可以休息主题名称、系列数量的功能，如图。
6、点击下载主题，弹出主题下载窗口，如图。
7、点击下载就开始自动下了，如图。
echarts怎么用？
1、下载好开发包后就可以开始了，第一步引入开发包，和需要的主题文件（可定义自己的主体文件），并定义好页面布局。2.0以后上的版本，需要把开发包放到body下，否则ie低版本会出现属性未找到的错误，导致图标初始化失败。
2、第二步，普通初始化图表，通过调用开发包方法，有两种初始化方式，
1.var myChart = echarts.init(document.getElementById("echart"));
2.var myChart=require('echarts').init(document.getElementById("echart"));
一般建议使用第一种方法进行初始化操作。
3、第三步，设置option属性，来给图表设置数据,option是数组元素，tooltip：提示框，legend图例，calculable可设置是否拖拽，series设置数据（data类型也为数组类型），开始先随机初始化几条模拟数据，
4、到这一步，就完成了，图表初始化的步骤，效果如下图所示。然后大家可以改变下图标的样式，2.0版本留了设置主题的方法，可设置setThem()对图表样式进行修改。
5、看看主题怎么配置，设置色版，设置主题颜色，不一一介绍了，请大家请看下面代码：
6、通过上面主题的添加完成了对样式的修改，当然最后大家记嘚设置myChart.setTheme(theme);
有人读过Echarts源码吗
很高兴，最近我也使用了ECharts ECharts提供的用法中，require是作为模块化加载的入口，如果你使用类似于RequireJS、SeaJS这样的模块化加载JS库的话，那么，就可以使用require()初始化ECharts。 你贴出来的链接这篇文章
if(dsdata.ds!=null){ zrk=dsdata.ds.czrk+dsdata.ds.ldrk; czrk=dsdata.ds.czrk
zrk");% % String zdrk=request.getParameter("zdrk");% % String ffry=request.g
label: {show:false}, labelLine: {show:false} } }, data:[