个人感觉 HigCharts 要好点,http://www.hcharts.cn/ 这是官网,使用的话结合演示:http://www.hcharts.cn/demo/index.php 就能很快上手。 使用方法会以百度图表Echarts为例,,大同小异而已.
这是 百度图表Echarts 的官网:http://echarts.baidu.com/
在使用过程中主要看看文档,然后看一下实例,就可以集成到项目里了,在官网里可以简单的看到文档。
在集成到项目的过程中注意路径的配置。如果使用的是xhtml 注意要加上//<![CDATA[ ........//]]>
避免出错。
还有就是在配置图表和交流数据的过程中使用的一般都是JSON格式,需要对JSON格式有种清晰的认识。
下面贴出静态的一个demo,数据都可以改为程序传输,看你使用的什么后台技术了。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
<title>debug-the-Echarts</title>
</head>
<body>
<div id="chart-unit" style="height: 400px;"></div>
<script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
<script type="text/javascript">
/*一开始不能使用最后确认是因为路径的问题!!!!!!!!!!使用cdn就没事了!!!!!!!*/
// 在xhtml中注意使用这个标签避免页面错误
//<![CDATA[
require.config({
paths: {
echarts: 'http://echarts.baidu.com/build/dist'
}
});
option = {
title : {
text: '',
subtext: ''
},
tooltip : {
trigger: 'axis'
},
toolbox: {
show : true,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
magicType : {show: true, type: ['line', 'bar']},
restore : {show: true},
saveAsImage : {show: true}
}
},
calculable : true,
//生成图表数据开始
legend: {
//
data:['***大队','****侦查大队','*****警察大队']
},
xAxis : [
{
type : 'category',
//'已立案','已破案','已移诉','已处罚','已调解','拘留','取保','监居','逮捕','警告','行政罚款','行政拘留'
data : ['已AAA','已BBB','已CCC','以DDD','已FFF','已GGG','QQQQ','WWWW','EEEE','TTTT']
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
name:'***大队',type:'bar', data:[425,0,466,0,69,0,79,99,9,25]},{
name:'****侦查大队',type:'bar', data:[32,0,27,0,35,0,35,40,0,7]},{
name:'*****警察大队',type:'bar', data:[6,0,6,0,9,0,1,1,0,0]}
]
//生成图表数据结束
};
require(
[
'echarts',
'echarts/chart/bar'
],
function(ec) {
var unitChart = ec.init(document.getElementById('chart-unit'));
// alert(sfdgasg);
unitChart.setOption(option);
}
);
//]]>
</script>
<!-- 为ECharts准备一个具备大小(宽高)的Dom -->
<div id="main" style="height:400px"></div>
ECharts单文件引入
<!-- <script src="http://echarts.baidu.com/build/dist/echarts.js"></script> -->
<script type="text/javascript">
// 路径配置
require.config({
paths: {
echarts: 'http://echarts.baidu.com/build/dist'
}
});
// 使用
require(
[
'echarts',
'echarts/chart/bar' // 使用柱状图就加载bar模块,按需加载
],
function (ec) {
// 基于准备好的dom,初始化echarts图表
var myChart = ec.init(document.getElementById('main'));
var option = {
tooltip: {
show: true
},
legend: {
data:['销量']
},
xAxis : [
{
type : 'category',
data : ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
"name":"销量",
"type":"bar",
"data":[5, 20, 40, 10, 10, 20]
}
]
};
// 为echarts对象加载数据
myChart.setOption(option);
}
);
</script>
<!-- 以上是柱状图,下面实验扇形图! -->
<div id="pie-chartExample" style="height: 400px;"></div>
<div id="pie-chartSelf" style="height: 400px;"></div>
扇形!!!
<script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
<script type="text/javascript">
option_pieExample = {
title : {
text: '南丁格尔玫瑰图',
subtext: '纯属虚构',
x:'center'
},
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
x : 'center',
y : 'bottom',
data:['rose1','rose2','rose3','rose4','rose5','rose6','rose7','rose8']
},
toolbox: {
show : true,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
magicType : {
show: true,
type: ['pie', 'funnel']
},
restore : {show: true},
saveAsImage : {show: true}
}
},
calculable : true,
series : [
{
name:'半径模式',
type:'pie',
radius : [20, 110],
center : ['25%', 200],
roseType : 'radius',
width: '40%', // for funnel
max: 40, // for funnel
itemStyle : {
normal : {
label : {
show : false
},
labelLine : {
show : false
}
},
emphasis : {
label : {
show : true
},
labelLine : {
show : true
}
}
},
data:[
{value:10, name:'rose1'},
{value:5, name:'rose2'},
{value:15, name:'rose3'},
{value:25, name:'rose4'},
{value:20, name:'rose5'},
{value:35, name:'rose6'},
{value:30, name:'rose7'},
{value:40, name:'rose8'}
]
},
{
name:'面积模式',
type:'pie',
radius : [30, 110],
center : ['75%', 200],
roseType : 'area',
x: '50%', // for funnel
max: 40, // for funnel
sort : 'ascending', // for funnel
data:[
{value:10, name:'rose1'},
{value:5, name:'rose2'},
{value:15, name:'rose3'},
{value:25, name:'rose4'},
{value:20, name:'rose5'},
{value:35, name:'rose6'},
{value:30, name:'rose7'},
{value:40, name:'rose8'}
]
}
]
};
var option_pieSelf = {
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"//配置百分比
},
toolbox: {//工具栏配置
show : true,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
magicType : {
show: true,
type: ['pie', 'funnel']
},
restore : {show: true},
saveAsImage : {show: true}
}
},
calculable : true,
legend: {
x : 'center',
y : 'bottom',
data:['A类型','B类型','C类型','D类型','E类型','F类型']
},
series : [
{
name:'面积模式',//
type:'pie',
radius : [30, 140],//半径范围
center : ['50%', 200],//中心原点的坐标可以使用px和百分比
roseType : 'area',//这里使用面积模式还有半径模式'radius',就是大小根据半径来显示还是面积来显示
x: '50%', // for funnel
max: 50, // for funnel
sort : 'ascending', // for funnel
data:[
{value:10, name:'A类型'},
{value:5, name:'B类型'},
{value:15, name:'C类型'},
{value:25, name:'D类型'},
{value:20, name:'E类型'},
{value:35, name:'F类型'}
]
}
]
};
// 为echarts对象加载数据
// 路径配置
require.config({
paths: {
echarts: 'http://echarts.baidu.com/build/dist'
}
});
// 使用
require(
[
'echarts',
'echarts/chart/pie'
],
function (ec) {
// 基于准备好的dom,初始化echarts图表
// alert("sgreagreag");
var myPieChartExample = ec.init(document.getElementById('pie-chartExample'));
var myPieChartSelf = ec.init(document.getElementById('pie-chartSelf'));
myPieChartExample.setOption(option_pieExample);
myPieChartSelf.setOption(option_pieSelf);
}
);
/* xAxis : [
{
type : 'category',
data : ['1月','2月',{
value:'3月',
textStyle: {
color:'red',
}
},'4月','5月','6月','7月','8月','9月','10月','11月','12月']
}
],*/
</script>
</body>
</html>