ECharts的基本使用

在各种各样的项目中,统计似乎是一个非常重要的功能,例如销量统计,订单统计,财务统计,以及客户是通过什么客户端,那种浏览器访问的统计等等,这些统计结果往往是一堆数字, 要更直观展示的话,可以用图像来表示.下面介绍的这个产品,是一个可高度个性化定制的数据可视化图表,它就是 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做的是相当棒,搭建在项目中显得更有逼格,快试试吧!

发表评论

发表评论

沙发空缺中,还不快抢~