PHP渲染echars折线图
PHP中将echars折线图渲染,根据后台数据库在js前端渲染echars,在不变图表的前提下,将数据库中的数据传到echars中
这是数据库,其中Y轴是根据仪器名称的变化量的字段,X轴可以写死
这是已经写死的echars的代码,将写死的echars渲染成动态echars
(function() {
//绕坝渗压变化率
var chartDom2 = document.getElementById('col01');
var myChart2 = echarts.init(chartDom2);
var option2;
var dataSrc = {
year: [
[[-40,248], [-30,263],[-20,275,],[20,285],[-10,295],[10,305],[-5,313],[5,319],[-5,326]], //数据曲线
[[0,248], [0,263],[0,275,],[0,285],[0,295],[0,305],[0,313],[0,319],[0,326]], //仪器位置
]
};
const markLine = []; //标记线
markLine.push(
[{
name: 'SR1-2-09 D0+326',
coord: [0,326],
label: {
formatter: '{b}',
// formatter: 'ID1-01',
position: 'start',
fontSize: 12,
}
},
{
name: 'end1' ,
coord: [-5,326],
}],
[{
name: 'SR1-1-01 D0+248.00',
coord: [0,248],
label: {
formatter:'{b}',
position: 'start',
fontSize: 12,
}
},
{
name: 'end2' ,
coord: [-40,248],
}],
// ————————————————————————————————————————————
[{
name: '向左岸平移',
coord: [-40,240],
label: {
formatter: '{b}',
// formatter: 'ID1-01',
position: 'start',
fontSize: 12,
}
},
{
name: 'end3' ,
coord: [-60,240]
}],
[{
name: '向右岸平移',
coord: [40,240],
label: {
formatter: '{b}',
// formatter: 'ID1-01',
position: 'start',
fontSize: 12,
}
},
{
name: 'end3' ,
coord: [60,240]
}],
);
// 2. 指定配置和数据
option2 = {
grid: {
left: '2%',
right: '8%',
top: '8%',
bottom: '5%',
containLabel: true
},
xAxis: {
type: 'value',
name: '(mm)',
// nameRotate: 90,
nameTextStyle: {
// 坐标轴名字旋转，角度值 90,
padding: [0, 0,0,-10], // 表示 [上, 右, 下, 左] 的边距。
color: '#fff'
},
// nameGap: 0, // 坐标轴名称与轴线之间的距离，默认值
splitLine:{ // 去掉网格
show:false
},
axisTick:{
show:false // 不显示坐标轴刻度线
},
max: 100,
min: -100,
interval: 20,
axisLine: {
show: true, // 是否显示坐标轴轴线
symbol: ['arrow', 'arrow'], // 轴线两端箭头，两个值，none表示没有箭头，arrow表示有箭头
symbolSize: [10, 10], // 轴线两端箭头大小，数值一表示宽度，数值二表示高度
lineStyle: {
color: '#eee', // 坐标轴线线的颜色
// width: '5', // 坐标轴线线宽
// type: 'solid', // 坐标轴线线的类型('solid'，实线类型；'dashed'，虚线类型；'dotted',点状类型)
},
},
axisLabel:{
rotate: 0,
color: '#fff',
formatter: function (v) {
if(v<0){return -v;}
else {
return v ;
}
},
},
},
yAxis: {
type: 'value',
name: '(D0+*/m)',
nameTextStyle: {
padding: [-310,0,0,0], // 表示 [上, 右, 下, 左] 的边距。
color: '#fff'
},
min: 240,
max: 330,
interval: 30,
inverse: true, //反转坐标轴
// show: 'false',
splitLine:{ // 去掉网格
show:false,
lineStyle: {
type: 'dashed',
color: '#fff',
width: '1'
}
},
axisTick:{
show:false // 不显示坐标轴刻度线
},
axisLine: { // ?显示坐标轴线
//show: false,
show: 'ture',
lineStyle: {
type: 'solid',
color: '#fff', //左边线的颜色
width: '1' //坐标线的宽度
},
symbol: ['none', 'arrow'], // 轴线两端箭头，两个值，none表示没有箭头，arrow表示有箭头
symbolSize: [5, 10], // 轴线两端箭头大小，数值一表示宽度，数值二表示高度
} ,
axisLabel:{
show: false,
rotate: 45,
color: '#fff',
formatter: function (v) {
// var temp=v;
// if(temp<0) {
// return parseInt(-v) + '桩号' ;
// }else if (temp==0)
// {
// return parseInt(v) + '坝轴线' ;
// }
// else{
// return parseInt(v) + '坝下';
// }
return v + '桩号' ;
//表示整数。其他数值类型以此类推-2021 + '月'/
},
},
boundaryGap: false,
},
series: [
{
name: 'curr',
type: 'line',
smooth: 'true',
symbol:'circle',
itemStyle: {
// 设置symbol的颜色
normal: {
color: '#eee'
}
},
symbolSize: 5,
// symbolColor: "#eee",
symbolRotate: 180,
lineStyle: {
normal: {
type: 'solid', // 'dashed','dotted',
width: 2,
color:"yellow", //设置水柱颜色
},
},
itemStyle: {
color: 'skyblue',
// color: '#eee',
},
markPoint: {
data: [
{
x: '46.95%',
yAxis: 240,
symbol: "arrow",
symbolSize: [4, 10],
// value: '特殊标记2',
animation: true,
label: {
show: true,
color: '#eee'
},
itemStyle: {
color: '#eee'
}
},
],
},
data: dataSrc.year[0] // 数据曲线
},
{
name: 'curr',
type: 'line',
symbolSize: 5,
color: '#93cd78',
smooth: 'true',
// symbolRotate: 180,
lineStyle: {
normal: {
type: 'solid', // 'dashed','dotted',
// symbol:'arrow',
width: 0.8,
color: '#eee', //设置水柱颜色
},
},
itemStyle: {
},
data: dataSrc.year[1] // 值，水柱线
},
{
name: 'line',
type: 'line',
backgrounColor: 'blue',
fontSize: 8,
// data: datasrc,
markLine: {
data: markLine,
label: {
distance: [6, 8],
color:'#eee'
},
// itemStyle:{
// normal:{
// show:true,
// color:'green'
// },
// },
fontSize: 8,
symbolSize: 5,
lineStyle:{
// color:'skyblue',
color:'#eee',
type: 'solid',
}
}
},
]
};
myChart2.resize({
height: 322,
// top: -23,
width:483
});
option2 && myChart2.setOption(option2);
})();
ajax请求就行了啊，把死数据换成请求结果，setOption一下
以下是一个使用 ECharts 折线图的示例，使用 AJAX 获取响应数据：
HTML 代码：
<div id="chart" style="width: 600px;height:400px;"></div>
JavaScript 代码：
// 初始化 ECharts 实例
var myChart = echarts.init(document.getElementById('chart'));
// 发送 AJAX 请求获取数据
$.ajax({
url: 'data.php',
type: 'GET',
dataType: 'json',
success: function (response) {
// 处理响应数据
var data = response.data;
// 配置 ECharts 图表
var option = {
title: {
text: '折线图'
},
tooltip: {},
xAxis: {
data: data.xAxisData
},
yAxis: {},
series: [{
name: '数据',
type: 'line',
data: data.seriesData
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
},
error: function (xhr, status, error) {
console.log('AJAX 请求失败：' + error);
}
});