1：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <!-- 引入 ECharts 文件 -->
    <script src="echarts.min.js"></script>
</head>
</html>

绘制一个简单的图表

在绘图前我们需要为 ECharts 准备一个具备高宽的 DOM 容器。

<body>
    <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
    <div id="main" style="width: 600px;height:400px;"></div>
</body>

然后就可以通过 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>

数据处理：

Echarts 中数据需要的是JSON格式；

index控制器中（indexController.php）负责数据读取，并转成JSON格式：

下面我们新建一个方法：

<?php
namespace app\index\controller;

use think\Controller;

use app\index\model\User;

use think\Db;

class IndexController extends Controller
{
    public function index()
    {
    	
    	return $this->fetch();
        
    }

    public function data(){

    	$sql = new User;

    	$sqldata = Db::table('User')-> where('Id','>','0')->select();

    	for ($i=0; $i < count($sqldata) ; $i++) { 
    		
    		$sqldata1[$i]['name']=$sqldata[$i]['name'];
    		$sqldata1[$i]['age']=$sqldata[$i]['age'];
    	}

    	$sqldata_json=json_encode($sqldata1);


    	echo  $sqldata_json;
    }
}

?>

浏览器中输入http://localhost/test/public/index/index/data，
刷新浏览器：

前端index.html 页面接收数据：

这里我们需要用到下面这段代码。

		var arr1=[],arr2=[];
              function arrTest(){
                	$.ajax({
                        type:"post",
                        async:false,
                        url:"http://localhost/test/public/index/index/data",
                        data:{},
                        dataType:"json",
                        success:function(result){
                            if (result) {
                                for (var i = 0; i < result.length; i++) {
                                    arr1.push(result[i].name);
                                    arr2.push(result[i].age);
                                 }
                     		}
                    	}
               	 })
              return arr1,arr2;
              }
              
              arrTest();

将这段代码放到Echarts 控件代码中去，

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <title>ECharts</title>

    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <script src="../public/static/echarts.js"></script>
    <script src="../public/static/echarts.min.js"></script>
    <script src="../public/static/jquery-3.2.1.min.js"></script>
</head>
<body>

    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>

    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        myChart = echarts.init(document.getElementById('main'));

        var arr1=[],arr2=[];
              function arrTest(){
                $.ajax({
                  type:"post",
                  async:false,
                  url:"http://localhost/test/public/index/index/data",
                  data:{},
                  dataType:"json",
                  success:function(result){
                    if (result) {
                      for (var i = 0; i < result.length; i++) {
                          arr1.push(result[i].name);
                          arr2.push(result[i].age);
                      }
                    }
                  }
                })
                return arr1,arr2;
              }
              arrTest();
    

    
        // 指定图表的配置项和数据
        option = {
            title: {
                text: 'ECharts 入门示例'
            },
            tooltip: {},
            legend: {
                data:['年龄']
            },
            xAxis: {
                type:'category',
                data:arr1
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                    "name":"age",
                    "type":"bar",
                    "data":arr2
            }]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>
</html>

现在我买你刷新浏览器：

下面我们试验修改一下数据库中的数据，看看图表是否有变化。

OK！成功！

Echart报表