下载工具echars
官方地址是github,为了方便使用,下面是网盘上的v5.4.1版本
链接：https://pan.baidu.com/s/1ZlZaeTdMWHEMOQt9-13JoQ
提取码：n5vr
后端的逻辑处理
public function getData()
{
//数据
$avg = [
['name'=>'a1','type'=>'line','data' => [1418.3,1385.1,1705.4,1562.9]],
['name'=>'a2','type'=>'line','data' => [36.1,79.8,119.3,120.9]],
['name'=>'a3','type'=>'line','data' => [0,0,0,0]],
['name'=>'a4','type'=>'line','data' => [536,435,661,565]],
];
//顶部
$aname = ['a1','a2','a3','a4'];
//x轴
$atime = ['2023-01-01','2023-02-01','2023-03-01','2023-04-01'];
return (['avg' => $avg,'aname' => $aname,'atime' => $atime]
);
}
前端渲染,实现功能
<html>
<head>
<meta charset="utf-8">
<script src="/static/js/echarts.js"></script>
<script src="/static/js/jquery.min.js"></script>
</head>
<body>
<style>
html, body {
width: 100%;
height: 100%;
}
</style>
<div id="main"></div>
<script>
var data = '';
$.ajax({
url:"/getData",
async:false,
dataType:'json',
type:'post',
success:function(msg){
data = msg;
}
});
function makeChart () {
var main = document.getElementById('main');
var div = document.createElement('div');
var width = document.body.clientWidth;
div.style.cssText = width + 'px; height:400px';
main.appendChild(div);
return echarts.init(div);
}
function makeLine () {
var chart = makeChart();
var atime= data.atime;
var avg= data.avg;
var aname = data.aname;
var option = {
tooltip : {
trigger: 'axis'
},
legend: {
data:aname
},
toolbox: {
top: 25,
feature: {
magicType: {
type: ['line']
},
dataView: {},
restore: {},
saveAsImage: {
pixelRatio: 2
},
myTool1: {
show: true,
title: 'Custom Icon. Reload Option',
onclick: function (){
chart.setOption(option);
alert('chart.setOption(option) DONE!')
}
}
}
},
xAxis : [
{
type : 'category',
data : atime
}
],
yAxis : [
{
type : 'value'
}
],
series :
data.avg
}
chart.setOption(option);
}
makeLine();
</script>
</body>
</html>
改下路径基本可以直接跑,有问题欢迎留言交流