tp3.2使用ECharts做一个降雨量报表

1、控制器准备数据，数据是个一维数组

2、模板文件中，为对象加载数据（从文档中挑选各种配置项）

<?php

namespace Home\Controller;

use Think\Controller;

class IndexController extends Controller
{
    public function index()
    {

        $echart = array(
            'title' => '某地区蒸发量和降水量',
            'subtext' => '纯属虚构',
            'legend' => json_encode(['降雨量', '增发量']),
            'a_data'=>json_encode([2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]),
            'b_data'=>json_encode([2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]),
        );
        $this->assign('echart', $echart); //然后直接传到前台去  不一定就是要ajax的 如果用ajax 就在那边闭包处理
        $this->display();
    }
}

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="height:400px"></div>
<!-- ECharts单文件引入 -->
<script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">


    var lengend = {$echart['legend']};      //最上面的图例
    var a_data = {$echart['a_data']};       //蒸发量
    var b_data = {$echart['b_data']};       //降水量
    // 路径配置
    require.config({
        paths: {
            echarts: 'http://echarts.baidu.com/build/dist'
        }
    });
    require(
        [
            'echarts',
            'echarts/chart/bar' // 使用柱状图就加载bar模块，按需加载
        ],
        function (ec) {
            // 基于准备好的dom，初始化echarts图表
            var myChart = ec.init(document.getElementById('main'));
            var option = {
                title: {
                    text: "{$echart['title']}",         //标题
                    subtext: "{$echart['subtext']}"     //父标题
                },
                tooltip: {
                    trigger: 'axis'                     //触发类型，坐标轴触发，主要在柱状图，折线图
                },
                legend: {                               //图例组件
                    data: (function () {
                        var list = new Array();
                        $.each(lengend, function (k, v) {   //遍历最上面的图例
                            list.push(v);
                        });
                        return list;
                    })()
                },
                toolbox: {                              //工具栏（右上角的）
                    show: true,
                    feature: {                          //各工具配置项
                        mark: {show: true},                             //
                        dataView: {show: true, readOnly: false},        //数据视图工具，可以展现当前图表所用的数据，编辑后可以动态更新
                        magicType: {show: true, type: ['line', 'bar']}, //动态类型切换
                        restore: {show: true},                          //配置项还原
                        saveAsImage: {show: true}                       //保存为图片
                    }
                },
                calculable: true,
                xAxis: [        //x轴
                    {
                        type: 'category',       // 类目轴
                        data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
                    }
                ],
                yAxis: [
                    {
                        type: 'value'           // 数值轴
                    }
                ],
                series: [                       //Y轴的数据
                    {
                        name: '蒸发量',
                        type: 'bar',            //类型
                        data: (function () {
                            var list = new Array();
                            $.each(a_data, function (k, v) {
                                list.push(v);
                            });
                            return list     //相当于list是data
                        })(),
                        markLine: {
                            data: [
                                {type: 'average', name: '平均值'}
                            ]
                        }
                    },
                    {
                        name: '降水量',
                        type: 'bar',
                        data: (function () {
                            var list = new Array();
                            $.each(b_data, function (k, v) {
                                list.push(v);
                            });
                            return list
                        })(),
                        markLine: {
                            data: [
                                {type: 'average', name: '平均值'}
                            ]
                        }
                    }
                ]
            };


            // 为echarts对象加载数据
            myChart.setOption(option);
        }
    );
</script>
</body>

tp3.2使用ECharts做一个降雨量报表

猜你喜欢