*【功能点】tp3.2使用ECharts做一个降雨量报表 && tp5的使用实例

最新推荐文章于 2024-04-15 09:36:45 发布

杨西瓜

最新推荐文章于 2024-04-15 09:36:45 发布

阅读量1.6k

点赞数

分类专栏：插件/类库文章标签： ECharts降雨量报表 tp5的wcharts使用实例

本文链接：https://blog.csdn.net/qq_33862644/article/details/80344761

版权

本文通过实例展示了如何在ThinkPHP 3.2中利用ECharts来创建一个降雨量报表，并提供了TP5使用ECharts的实践案例。控制器部分准备了一维数据，而在模板文件中，详细介绍了如何加载数据并配置ECharts的各种选项，以实现动态可视化效果。

摘要由CSDN通过智能技术生成

往下拉，下边还有个tp5的实例。

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图表