温馨提示
  • 欢迎您光临共享屋素材网,本站所有资源均来自网络或用户自主上传,本站所有素材仅交流学习用途,请勿商用。
  • 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做的是相当棒,搭建在项目中显得更有逼格,快试试吧!

    登录开启无限免费下载