1. 显示多列柱状图 (每年年各分店每月的订单数据)

官网详细文档和实例:https://www.echartsjs.com/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20ECharts

①、tp5控制器中准备图表的数据

$HotelStore = new HotelStore();
        $hotel_store_list = $HotelStore->getHotelStoreList($this->hotel_id); //获取当前酒店的分店列表
 $year = date('Y');
        $res = [];
        foreach ($hotel_store_list as $k => $v) {
            $roomdata = [];  //每次循环前将其数值置空,不然会数据重复
            $e = [];
            //获取当前总店分店下的按每月分类的订房订单总数
//FROM_UNIXTIME() 数据库语句:将int时间戳字段转成date形式, group by 按每个月分组
            //$roomorder = Db::query("select FROM_UNIXTIME(create_time, '%m') as pubtime, count(*) as cnt from tplay_hotel_order where hotel_store_id= " . $v['id'] . " group by FROM_UNIXTIME(create_time, '%m')");  //sql原始语句方式
  $roomorder = Db::name('hotel_order')->field("FROM_UNIXTIME(create_time, '%m') as pubtime, count(*) as cnt")->where("FROM_UNIXTIME(create_time, '%Y')=$year")->where('hotel_store_id',$v['id'])->group("FROM_UNIXTIME(create_time, '%m')")->select(); //tp5语句方式

            foreach ($roomorder as $kk => $vv) {  //重构数据,将索引下标改为月份值,方便下面循环判断
                $e[intval($vv['pubtime'])] = $vv;  //因为 月份是 '04' 的格式,先转为整型
            }
            for ($i = 1; $i <= 12; $i++) {  //构造一个12个月的订单数据索引数组
                $index = intval($e[$i]['pubtime']);
                if ($index) {   //当月是否有订单合计数据,没有的话就为0
                    $roomdata[] = $e[$i]['cnt'];
                } else {
                    $roomdata[] = 0;
                }
            }
            $res[] = array(     //拼装成 echarts能识别的数据格式
                'name' => $v['name'],
                'type' => 'bar',
                'data' => $roomdata,
                'itemStyle' => array(   //开启数值显示
                    'normal' => array(
                        'label' => array(
                            'show' => true, //开启上方显示
                            'position' => 'top', //在上方显示
                        )
                    )
                )
            );
        }

$this->assign('res', json_encode($res)));   //然后渲染到view视图中

②、引入 ECharts,准备存放容器,初始化并生成图表

ECharts 3 开始不再强制使用 AMD 的方式按需引入,代码里也不再内置 AMD 加载器。因此引入方式简单了很多,只需要像普通的 JavaScript 库一样用 script 标签引入。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <!-- 引入 ECharts 文件 -->
    <script src="echarts.min.js"></script>
</head>
在绘图前我们需要为 ECharts 准备一个具备高宽的 DOM 容器。
<body>
    <!-- 为 ECharts 准备一个具备大小(宽高)的 DOM -->
    <div >当前选择年份:
<div>
                    <select name="year" >
                            <option value="{$year}" selected>{$year}年</option>
                           {foreach $yearlist as $v}
                            <option value="{$v}">{$v}年</option>
                            {/foreach}
                     </select>
                </div>
                <div class="layui-card-body" id="roomorder" style="height: 450px;"></div>
         </div>
然后就可以通过 echarts.init 方法初始化一个 echarts 实例并通过 setOption 方法生成一个简单的柱状图,下面是完整代码。
<script type="text/javascript">

    var data = '{$res}';      //获取 tp控制器 assgin 过来的 json数据, 一定用 ' ' 包起来,不然报错
    var res = JSON.parse(data);   //将json字符串转成数值对象,再放到  series 参数中
     showecharts(res) ;  //页面加载完调用一次
//定义一个函数方便使用
function showecharts(res){
  // 基于准备好的dom,初始化echarts实例
     var myChart = echarts.init(document.getElementById('roomorder'));
     var date=new Date;
              var beginmonth=1; //指定当前界面x轴显示的月份进度范围区间   0--100
                  var endmonth= ((date.getMonth())/12)*100;    //获取当前月份,设置显示的右边界
    var legenddata = [ ];
    var attr = '';
    for (var i in res){         //对应生成顶部显示每列柱状图对应名称,
        legenddata.push(res[i]['name']);
        attr += '{a'+ i +'}:{c'+ i +'}单<br/>';     //鼠标悬浮显示数据
    }
    // 指定图表的配置项和数据
    var option = {
        //color: ['#d0e17d', '#36a9ce', ],  //定制每列的颜色
        tooltip: {
            trigger: 'axis',  //坐标轴触发,主要在柱状图,折线图等会使用类目轴的图表中使用。
     formatter: attr,   //鼠标悬浮上去显示具体信息
            axisPointer: {   //鼠标悬浮到图上,可以出现标线和文本。
                type: 'shadow', //'line' 直线指示器,'shadow' 阴影指示器
                label: {    //坐标轴指示器的文本标签。
                    show: true
                }
            }
        },
        legend: {            //顶部显示每列柱状图对应名称,要和 series 中的 name相同
            data:legenddata
        },
        grid: {             //定制宽高等
            left: '0%',
            right: '0%',
            bottom: '10%',
            top:'10%',
            containLabel: true
        },
        xAxis: [        // 'category' 类目轴,适用于离散的类目数据,为该类型时必须通过 data 设置类目数据。
            {
                type: 'category',
                axisTick: {show: false},
                data: ['1月', '2月', '3月', '4月', '5月','6月','7月','8月','9月','10月','11月','12月']
            }
        ],
        yAxis: [     // 'value' 数值轴,适用于连续数据。
            {
                type: 'value',
  name: '单',   //显示y轴的单位
            }
        ],
dataZoom: [    //时间轴设置,第一个{ }数组是x轴的设置,第二个是Y轴的
            {
                show: true,
                start: beginmonth,
                end: endmonth
            },
        ],
        series: res  
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
}
</script>
</body>
</html>
 //res的最终形式要为如下显示:
                        [{
    "name": "测试店铺",
    "type": "bar",
    "data": [27, 34, 8, 2, 0, 0, 0, 0, 0, 0, 0, 0],
    "itemStyle": {    //开启数值显示
        "normal": {
            "label": {
                "show": true,     //开启上方显示
                "position": "top"   //在上方显示
            }
        }
    }
}, {
    "name": "233",
    "type": "bar",
    "data": [1, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0],
    "itemStyle": {
        "normal": {
            "label": {
                "show": true,
                "position": "top"
            }
        }
    }
}] 

③、使用change事件来ajax异步加载图表的话,需要重新初始化加载一下echarts


$('select[name=year]').change(function () {
        var val = $('select[name=year]').val();
        $.ajax({
            url: "{:url('ajaxGetRoomOrder')}",
            data: { year:val },
            type: 'post',
            dataType: 'json',
            //async: false,
            success: function (data) {
                if (data.code == 1) {
                    res = data.msg;
                    showecharts(res) ;

                }
            }
        });
    });
我 秦始皇 打钱