在各种各样的项目中,统计似乎是一个非常重要的功能,例如销量统计,订单统计,财务统计,以及客户是通过什么客户端,那种浏览器访问的统计等等,这些统计结果往往是一堆数字, 要更直观展示的话,可以用图像来表示.下面介绍的这个产品,是一个可高度个性化定制的数据可视化图表,它就是 ECharts.
Hello World
到ECharts官网echarts.baidu.com下载插件包,放到项目目录下,例如TP框架可以放在Public目录下.并在模板中引入 ECharts,然后在绘图前我们需要为 ECharts 准备一个具备高宽的 DOM 容器,以通过 echarts.init 方法初始化一个 echarts 实例并通过 setOption 方法生成一个简单的柱状图，下面是完整代码。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title> <!-- 引入 echarts.js -->
<script src="echarts.min.js"></script> </head> <body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
legend: {
data:['销量']
},
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
yAxis: {},
series: [
{ name: '销量', type: 'bar', data: [5, 20, 36, 10, 10, 20]}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>动态获取数据
通过上述入门实例,我们不难看出,绘制出的图标,都是根据你传给它的参数来完成的,一般来说,legend参数代表图表中的一个统计元素,series参数代表其name所对应的legend的数据量, 实际运用中,不可能把数据都写死,而是根据当前的数据情况而绘制出反应当前数据的图标,要把数据做活,就要通过Ajax实现动态数据加载.下面通过一个实例来演示动态数据加载.比如说 统计商城今日到目前为止已下单商品情况,效果如下图:
控制器
建立Data控制器,里面有个today_order方法
//今日订单数据分析
public function today_order() {
if(IS_AJAX){
//确定今日时间 开始时间是今天的00:00:00,结束时间是今天的23:59:59
$beginToday = mktime(0, 0, 0, date('m'), date('d'), date('Y'));
$endToday = mktime(0, 0, 0, date('m'), date('d') + 1, date('Y')) - 1;
//根据条件筛选订单
$where['isdel'] = 1;
$where['add_time'] = array('between',array($beginToday,$endToday));
$where['_string'] = '(pay_type = 1 AND pay_status = 2) OR (pay_type > 1 AND pay_status >= 1)';
$order_list = M('orders')->where($where)->field('id')->select();
if(!$order_list){
$this -> ajaxReturn(0);die;
}
//获取对应的商品和商品数量
foreach($order_list as $key => $val){
$order_id[] = $order_list[$key]['id'];
$order_ids = implode(',',$order_id);
}
$arr['order_id'] = array('IN',$order_ids);
$goods_list = M('order_goods')->where($arr)->field('goods_id,goods_num')->select();
//相同商品数量相加
$item = array();
foreach ($goods_list as $key => $val){
$goods_name = goods_name($val['goods_id']);
if(!isset($item[$goods_name])){
$item[$goods_name] = $val;
}else{
$item[$goods_name]['goods_num'] += $val['goods_num'];
}
}
// var_dump($item);die;
if($item) exit(json_encode($item));
}
$this -> display();
}
最终数据是$item,打印出来看看是什么形式的数组:
是一个键作为商品名,值包含这件商品目前销售数量的一个二维数组.有了它,我们就可以掌控这个柱状图了.但是这些数据传给前台JS,就要把数据转换为JSON.
模板
对应today_order的视图文件
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta charset="utf-8" />
<title>{$current['title']}-{$Think.CONFIG.title}</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<!-- 引入 ECharts 文件 -->
<script src="__PUBLIC__/Echarts/echarts.js"></script>
</head>
<body class="no-skin">
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="main" style="width: 100%;height:650px;"></div>
<script type="text/javascript">
$(function(){
var myChart = echarts.init(document.getElementById('main')); //绘制Echarts图标（此为空的框架）
myChart.setOption({
title: { text: '今日订单数据分析' },
legend: { data:[] },
xAxis: { data: [] },
yAxis: {},
series: []
});
//异步数组绘制框架
myChart.showLoading();
$.post("{:U('today_order')}",'',function(obj){
console.log(obj);
var myChart = echarts.init(document.getElementById('main'));
if(obj == 0){
myChart.hideLoading();
alert('今天还没有订单');
return false;
}else{
myChart.hideLoading();
var option={};
option.title={text:'今日订单数据分析'};
option.tooltip={trigger:'axis'}
option.xAxis=[{
type:'category',
name:'品种',
data:['今日订单']
}];
option.yAxis=[{
type:'value',
name:'下单数量'
}];
option.series=[];
option.legend={data:[]};
$.each( obj, function(key, val) {
option.legend.data.push(key);
option.series.push({
name:key,
type:'bar',
data:[val.goods_num]
});
});
yChart.setOption(option);
}
},'json');
})
</script>
</body>
</html>
模板的意思就是先把图标固定的东西绘制出来(因为还没有数据),没有柱状图,代码执行到Ajax的时候异步获取数据,将后台获取到的数据填充到ECharts代码中,从而改变柱状图的高低, 每种产品对应一个数据,后面遍历的时候,legend.data和series也是一对一的关系.至此,一个活生生的柱状图就做出来了.
这就是ECharts的基本使用,它的UI做的是相当棒,搭建在项目中显得更有逼格,快试试吧!
发表评论
沙发空缺中，还不快抢~