Echarts 柱状图使用

目录

第一种 基础柱状图  

Examples - Apache ECharts  官方案例

Controller

参数说明:

label  使 数据展示在柱状图 顶部位置 

data 打印结果

View文件   主要使用的是 id="echarts_level_count"  方便 在js文件中使用

js文件  渲染 EChart

参数说明:

最终呈现的效果------------

 第二种  堆叠柱状图  

Examples - Apache ECharts  官方示例

Controller

 实现官方文档中的数据结构  保留两个的案例

参数说明:

label  使 数据展示在柱状图 顶部位置 

data 打印结果

​编辑 View文件   主要使用的是 id="echarts_level_count"  方便 在js文件中使用

js文件  渲染 EChart

参数说明:

最终呈现的效果------------

---

第一种 基础柱状图  

Examples - Apache ECharts  官方案例

Controller

 实现官方文档中的数据结构

参数说明:

label  使 数据展示在柱状图 顶部位置 

        $level_model = model('app\common\model\UserLevel');
		$level_user =$level_model->where(['level'=>['>',1]])->select();
		$datax_level = array_column($level_user,"name");        
        $source_level = [];
		$source_level['name'] = $datax_level;
		$source_level['type'] = "bar";
		$source_level['barGap'] = 0;
		$source_level['emphasis'] = ['focus'=>"series"];
		$source_level['label'] = ['show'=>true,'position'=>"top"];
		$source_level['data'] = $this->getLevelData($level_user);

		$levelCount = [
			'datax'=>$datax_level,
			'source'=>$source_level
		];

		$this->assignconfig('levelCount',$levelCount);


public function getLevelData($level)
	{
		$model = model('app\common\model\User');
		$level_arr =[];
		foreach ($level as $key =>$value) {
			$level_arr[$key] = 	 $model->where('level',$value['level'])->count();

		}
		return $level_arr;

	}

data 打印结果

View文件   主要使用的是 id="echarts_level_count"  方便 在js文件中使用

<div class="row">
	<div class="col-xs-12 col-sm-12">
		<div class="panel">
			<div class="panel-body">
				<div class="chart tab-pane" id="echarts_level_count" style="position: relative; height: 300px;"></div>
			</div>
		</div>
	</div>
</div>

js文件  渲染 EChart

参数说明:

title  图表左侧置顶显示

legend        中部置顶显示的数据  (详细请看第二种柱状图)

xAxis        X轴数据展示

yAxis        Y轴数据展示 (默认   type:'value') 

series        柱状图展示的数据

var barChartLevel = Echarts.init(document.getElementById('echarts_level_count'), 'walden');
			// 使用刚指定的配置项和数据显示图表。
			barChartLevel.setOption({
				title: {
					text: '统计星级人数'
				},
				legend: {
					data:"星级人数",
				},
				tooltip: {},
				xAxis: {type: 'category',data:Config.levelCount.datax},
				yAxis: {type:'value'},
				// Declare several bar series, each will be mapped
				// to a column of dataset.source by default.
				series:Config.levelCount.source
			});

最终呈现的效果------------

 第二种  堆叠柱状图  

Examples - Apache ECharts  官方示例

Controller

 实现官方文档中的数据结构  保留两个的案例

参数说明:

label  使 数据展示在柱状图 顶部位置 

$currentDate = date('Y-m-d');
		// 使用循环获取近七天的日期
		for ($i = 0; $i < 7; $i++) {
			// 使用strtotime函数将当前日期转换为时间戳，并通过循环递减一天来获取过去日期
			$date = date('Y-m-d', strtotime("-$i day", strtotime($currentDate)));
			// 将日期添加到数组中
			$dates_day[]  = $date;
		}
		//排序
		array_multisort($dates_day, SORT_ASC);
		$orderCount_title = ['下单人数', '下单金额'];
		$source = [];
		foreach ($orderCount_title as $key =>$value) {
			$source[$key]['name'] = $value;
			$source[$key]['type'] = "bar";
			$source[$key]['barGap'] = 0;
			$source[$key]['emphasis'] = ['focus'=>"series"];
			$source[$key]['label'] = ['show'=>true,'position'=>"top"];
//			$source[$key]['data'] = [10,20,30,40,50,60,70];
			$source[$key]['data'] = $this->getData($dates_day,$value);
		}

		$orderCount = [
			'title'=>$orderCount_title,
			'datax'=>$dates_day,
//			'datay'=>$datay_data,
			'source'=>$source
		];

		$this->assignconfig('orderCount',$orderCount);


public function getData($dates_day,$name)
	{
		$number  = [];
		$price  = [];
		// 加载商品模型
		$model = model('app\api\model\wanlshop\Order');
		$pay_model = model('app\api\model\wanlshop\Pay');
		foreach ($dates_day as $key =>$value) {
			$number[$key] = $model->where(['state'=>['in',"2,3,4,6"]])->whereTime('paymenttime', '>=', strtotime($value . " 00:00:00"))->whereTime('paymenttime', '<=', strtotime($value . "  23:59:59"))->count();

			$order = $model->where(['state'=>['in',"2,3,4,6"]])->whereTime('paymenttime', '>=', strtotime($value . " 00:00:00"))->whereTime('paymenttime', '<=', strtotime($value . "  23:59:59"))->select();
			if (!empty($order)) {
				$order_ids = array_column($order,'id');
				$price[$key] = $pay_model->whereIn('order_id',$order_ids)->sum('price');
			}else {
				$price[$key] = 0;
			}

		}


		if ($name == "下单人数") {
			return $number;
		}else {
			return $price;
		}
	}

data 打印结果

 View文件   主要使用的是 id="echarts_level_count"  方便 在js文件中使用

<div class="row">
	<div class="col-xs-12 col-sm-12">
		<div class="panel">
			<div class="panel-body">
				<div class="chart tab-pane" id="echarts_order_count" style="position: relative; height: 300px;"></div>
			</div>
		</div>
	</div>
</div>

js文件  渲染 EChart

参数说明:

title  图表左侧置顶显示

legend        中部置顶显示的数据

xAxis        X轴数据展示

yAxis        Y轴数据展示 (默认   type:'value') 

series        柱状图展示的数据

var barChartOrderCount = Echarts.init(document.getElementById('echarts_order_count'), 'walden');
			// 使用刚指定的配置项和数据显示图表。
			barChartOrderCount.setOption({
				title: {
					text: '统计下单人数下单金额'
				},
				legend: {
					data:Config.orderCount.title,
				},

				tooltip: {},
				xAxis: {type: 'category',data:Config.orderCount.datax},
				// yAxis: {data:Config.orderCount.datay},
				yAxis: {type:'value'},
				// Declare several bar series, each will be mapped
				// to a column of dataset.source by default.
				series:Config.orderCount.source
			});

最终呈现的效果------------