1、在我们开发程序中,经常会用到生成一些报表,比方说饼状图,条形图,折线图等。不多说了,直接上封装好的代码,如下Echarts.js所示

以下代码是封装在Echarts.js文件中

/**

* Created by Administrator on 2015/8/7.
*/
var charec;
// 路径配置
require.config({
paths: {
echarts: 'http://echarts.baidu.com/build/dist'
}
});
// 按需加载所需图表
require(
[
'echarts',
'echarts/chart/bar', //按需加载条形图
'echarts/chart/line', //按需加载折线图
'echarts/chart/funnel',
'echarts/chart/pie', //按需要加载饼图
'echarts/chart/gauge',
'echarts/chart/map',
], function (ec) {
charec = ec;
}
);


/**
* 创建饼图js
* data[0] 呈现饼图的dom元素id
* data[1] 统计图的主标题
* data[2] 图例
* data[3] 自定义名字
* data[4] 呈现的统计图数据
* @param data
* ["pieArea","活动2情况统计图",["活动1","活动2","活动3"],"活动详情",
* [{"value":"5","name":"活动1"},{"value":"3","name":"活动2"},{"value":"8","name":"活动3"}]]
*
*/
function createChart(data) {
var myChart = charec.init(document.getElementById(data[0]));
var option = {
title: {
text: data[1],
subtext: '',
x: 'center',
},
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b}:{c} ({d}%)"
},
legend: {
orient: 'vertical',
data: data[2]
},
toolbox: {
show: false,
feature: {
mark: false,
dataView: {show: true, readOnly: false},
magicType: ['line', 'bar', 'pie', 'gauge'],
restore: true
}
},
calculable: true,


series: [{
name: data[3],
type: 'pie',
radius: '50%',
center: ['50%', '50%'],
data: data[4],
itemStyle: {
normal: {label: {show: true, formatter: '{b}:{c}人 ({d}%)'}},
labelLine: {label: {show: true}}
}
}]
};
myChart.setOption(option);


}


/**
* 创建条形图或者折线图
* data[0] 呈现饼图的dom元素id
* data[1] 统计图的主标题
* data[2] 图例
* data[3] 自定义名字
* data[4] 呈现的统计图数据
* data[5] X轴数据
* data[6] 图表类型 bar line
* @param data
*/
// $pieData = array(
// "pieArea", //呈现饼图的dom元素id
// "某地区蒸发量和降水量", //标题
// array("蒸发量", "降水量"), //lend 图例
// "蒸发量或者降水量", //自定义名称
// array(2.6,5.9,6.8,3.1,1.2,8.9),
// array("1月", "2月", "3月","4月","5月","6月"),
// "line"
// );
function createBarChart(data) {
var myChart = charec.init(document.getElementById(data[0]));
var option = {
title: {
text: data[1],
subtext: '',
x: 'center',
},
tooltip: {
trigger: 'axis'
},
legend: {
data: data[2],
orient: 'vertical',
x: '150',
},
toolbox: {
show: false,
feature: {
mark: {show: true},
dataView: {show: true, readOnly: false},
magicType: {show: true, type: ['line', 'bar', 'pie', 'gauge']},
restore: {show: true},
saveAsImage: {show: true}
}
},
calculable: true,
xAxis: [
{
type: 'category',
data: data[5]
}
],
yAxis: [
{
type: 'value'
}
],
series: [
{
name: data[3],
type: data[6],
data: data[4]
}
]
};
myChart.setOption(option);
}

2、如何使用

在前台页面引用以下js文件

<script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
<script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
<script type="text/javascript" src="/Static/Js/Echarts.js"></script> -----这个文件就是上面封装的js代码

3、传送数据

前台js代码中,调用 createChart(data) 方法,并把data数据传递过去就行。

其中data的 json 数据格式如下所示,可以转换为一个数组传送过去

[
"pieArea",
"XX广州上海活动情况统计图",
[
"未参加活动",
"参与活动未回答问卷",
"参与活动并回答问卷"
],
"会员活动详情",
[
{
"value": "3",
"name": "未参加活动"
},
  {
"value": "5",
"name": "参与活动未回答问卷"
},
  {
"value": "10",
"name": "参与活动并回答问卷"
}
  ] 
] --------以下是数组格式
$data=array(
0=>array("name"=>"未参加活动","value"=>"3"),
1=>array("name"=>"参加活动未填问卷","value"=>"5")
)
$pieData = array(
"pieArea", //呈现饼图的dom元素id
"XX活动情况统计图", //标题
array("未参加活动", "参与活动未回答问卷", "参与活动并回答问卷"), //lend 图例
"会员活动详情", //自定义名称
$data //统计数据
);
把$pieData 数据传递过去就行。
 createChart(data);

4、哈哈哈,就这样,就完成了,十分简单的。

最新文章

  1. 关于“线程间操作无效: 从不是创建控件’textBox1‘的线程访问它”异常的解决方法
  2. .net学习笔记---HttpHandle与HttpModule
  3. pod》error:The dependency `` is not used in any concrete target
  4. Android—对话框
  5. skiplist 跳表(1)
  6. linux setsockopt
  7. rpm命令说明
  8. IIS8中添加WCF支持几种方法小结[图文]
  9. JavaSE(五)JAVA对象向上转型和向下转型
  10. App开发 对生命周期的处理
  11. Servlet--HttpServletRequest接口,HttpServletResponse接口
  12. Trie树/字典树题目(2017今日头条笔试题:异或)
  13. PA 项目创建任务
  14. .NET Core SDK在Windows系统安装后出现Failed to load the hostfxr.dll等问题的解决方法
  15. Hibernate **关于hibernate4.3版本之后org.hibernate.service.ServiceRegistryBuilder被弃用**
  16. 运行supervisorctl reload报错解决方法
  17. ubuntu16.04+anaconda的安装+解决conda不可用(配置路径)+卸载
  18. JavaScript函数使用技巧
  19. 回归Android之Android基础和小常识
  20. linux系统编程之文件与IO(四):目录访问相关系统调用

热门文章

  1. linux【第六篇】用户和用户管理及定时任务复习
  2. jsp引用JSTL核心标签库
  3. 基于FFMPEG SDK流媒体开发1---解码媒体文件流信息
  4. OutputStream和InputStream的区别 + 实现java序列化
  5. accept()函数用来告诉Qt,事件处理函数“接收”了这个事件,不要再传递;ignore()函数则告诉Qt,事件处理函数“忽略”了这个事件,需要继续传递(看一下QWidget::mousePressEvent的实现,最为典型。如果希望忽略事件,只要调用父类的响应函数即可)
  6. Splay基本操作
  7. c语言和c++栈的简单实现以及构造器的原理
  8. Linux 系统管理命令 - mpstat - CPU信息统计
  9. Swift4 协议
  10. UART、I2C、SPI三种协议对比