发表主题您当前位置:首页 / 分享 / PHP

PHP实现echarts5返回折线状option代码,可动态刷新折线图

jaes  2021-08-27  0  0  193

PHP实现echarts5返回折线状option代码,可动态刷新折线图

先看效果:

引入echarts:

<script type="text/javascript" src="/static/echarts/echarts.min.js"></script>

<p><button onclick="sx()">刷新</button></p>

折线图显示区域:

<div style="width: 800px; height: 500px; border: 1px solid #B1DFBB;">

<div id="echarts-line" style="height: 100%;"></div>

</div>

JS脚本:

var dom = document.getElementById("echarts-line");
var myChart = echarts.init(dom); var app = {};
var option=sy.ajax('echartsLine.php'); //换成自己ajax并返回json
if (option && typeof option === 'object') {
	myChart.setOption(option);
}

//动态刷新
function sx(){
	myChart.setOption(sy.ajax('echartsLine.php'));
}


echartsLine.php代码:

public function echartsLine(){
		$res=[
			'tooltip'=>['trigger'=>'axis'],  //提示框
			'legend'=>['data'=>['收入','支出']], //显示顶部项目名称
			'xAxis'=>['name'=>'月份','data'=>['1月','2月','3月','4月','5月','6月','7月','8月'],'boundaryGap'=>false],
			'yAxis'=>['name'=>'金额(元)','axisLine'=>['show'=>true]],
			'series'=>[
				['name'=>'收入','data'=>$this->randData(100,999,8),'type'=>'line', 'color'=>'#99CC33', 'smooth'=>true],
				['name'=>'支出','data'=>$this->randData(100,999,8),'type'=>'line', 'color'=>'#FF6600', 'smooth'=>true],
			]
		];
		return json($res);
	}
	function randData($min,$max,$num){
		$arr=[];
		for($i=0;$i<=$num;$i++){
			$sz=rand($min,$max);
			array_push($arr,$sz);
		}
		return $arr;
	}



说明:该主题及内容可以随意免费转发,但转发时请注明来源于“哈喽吧”哦^_^。

回复主题

上一篇:PHP指定日期时间加一天,一周,一月,一年

下一篇:FFmpeg的安装使用及结合win2008服务器IIS7+PHP7+TP6配置使用

最新回复(0)

暂无回复
回复主题
提示:请先登录后再回复主题。
  • 站内搜索
  • 百度搜索
  • 搜狗搜索