1.下载echarts 得到文件：echarts.js 文件 复制到项目中
2.创建前端页面，将下方代码复制到html文件中：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>myProject</title> <!-- 引入 lib/echarts.custom.min.js --> <script src="__COMMON__/Echarts/echarts.js"></script> <script type="text/javascript" src="__ADMIN__/js/jquery-1.10.1.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 $myChart = echarts.init($('#main')); // 指定图表的配置项和数据 var option = { title: { text: 'ECharts 统计各部门成员数量' }, tooltip: { // trigger: 'axis', // axisPointer: { // type: 'cross' // } }, legend: { data:['人数'] }, xAxis: { // data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"] data: {$name_json} }, yAxis: {}, series: [{ name: '人数', type: 'bar', //data: [5, 20, 36, 10, 10, 20] data: {$num_json} }] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); </script> </body> </html>
3.在后台控制器中编写echarts方法
思路：获取数据 -> 转换成所需数据格式 -> 分配到模板
第一种 方式： 将数据组合成数组再转换成json：
function echarts(){ //1.实例化数据表模型 $user = D('User'); //2.读取到表中数据 $data = $user ->alias('a') ->join('left join oa_dept as b on a.user_deptid = b.dept_id') ->field('b.dept_name,count(*) as num') ->group('user_deptid') ->select(); //dump($data);die; //3.遍历$data二维数组 分别将dept_name 和 num单独存放到一个空数组 //数据类型示例：data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"] $name = array();; $num = array(); foreach ($data as $v) { array_push($name, $v['dept_name']); array_push($num, $v['num']); } //print_r($name); // 4.转换成json数据类型，供前端使用 $name_json = json_encode($name); $num_json = json_encode($num); //dump($name_json); //5.分配到模板，调用视图 $this->assign('name_json', $name_json); $this->assign('num_json', $num_json); $this->display(); }
第二种 方式：拼接字符串方式
function echarts(){
//1.实例化数据表模型
$user = D('User');
//2.读取到表中数据
$data = $user
->alias('a')
->join('left join oa_dept as b on a.user_deptid = b.dept_id')
->field('b.dept_name,count(*) as num')
->group('user_deptid')
->select();
//dump($data);die;
//3.遍历二维数组，拼接成字符串，形成想要的数据类型
//数据类型示例：data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
$result_name="";
foreach($data as $value){
$result_name .= '"'.$value['dept_name'].'"'.",";
}
$str_name = substr($result_name,0,strlen($result_name)-1);
$str_names="[".$str_name."]";
//dump($str_name);die;
$this->assign('str_names',$str_names);
$result_num="";
foreach($data as $value){
//数据类型示例： data: [5, 20, 36, 10, 10, 20]
$result_num .= $value['num'].",";
}
$str_num = substr($result_num,0,strlen($result_num)-1);
$str_nums = "[".$str_num."]";
//dump($str_num);die;
$this->assign('str_nums',$str_nums);
$this->display();
}