效果图：
核心代码：
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('app'))
function Rendering(lineColor,lsiltObject,lwaterObject,textObject,modes,tiems){
let lsiltList = [] //渲染含沙量过程线特征值max、min
let lwaterList = [] //渲染水位过程线特征值max、min
lsiltObject.markPoint.forEach(i => {
lsiltList.push({
name: i.formatter,
coord: [i.coordX, i.coordY],
symbol: 'path://M255.872 512h597.589333V128H255.872v384zM256 597.333333v384H170.666667V42.666667h768v554.666666H256z',
symbolSize: 40,
symbolKeepAspect: true,
})
})
lwaterObject.markPoint.forEach(i => {
lwaterList.push({
name: i.formatter,
coord: [i.coordX, i.coordY],
symbol: 'path://M255.872 512h597.589333V128H255.872v384zM256 597.333333v384H170.666667V42.666667h768v554.666666H256z',
symbolSize: 40,
symbolKeepAspect: true,
})
})
let grid = {
left: 100,
right: 100,
}
let yAxis = {
type: 'value',
onZero: false,
axisTick: { // 隐藏刻度线
show: false
},
axisLine: { //轴线
show: true,
lineStyle: {
color: '#666'
}
},
splitLine: {
show: true,
lineStyle: {
color: '#666',
width: 0.5,
}
},
minorTick: {
splitNumber: 10
},
minorSplitLine: {
show: true,
lineStyle: {
color: '#ccc',
width: 0.5,
type: 'solid'
}
}
}
let xAxis = {
data: tiems,
type: 'category', // 坐标轴类型
boundaryGap: false,
axisTick: {
show: false
}, // 是否显示坐标轴刻度
axisLine: { //轴线
show: false,
lineStyle: {
color: '#666'
}
},
splitLine: {
show: true,
interval: 59,
lineStyle: {
while: 0.5,
color: ['#666', '#ddd', '#ddd', '#ddd', '#ddd', '#ddd', '#ddd', '#ddd', '#ddd', '#ddd', '#ddd',
'#ddd'
],
opacity: 1
}
}
}
let xAxisAxisLabel = {
interval: 0,
rotate: 0, // 倾斜角度
fontSize: 12,
formatter: function(val, index) {
let vals = val.split("-")[1]
if (tiems.length - 1 == index) {
return 24
}
if (vals % (60 * 6) == 0) {
return vals / 60
}
}
}
let graphicStyle = {
fill: '#333',
width: 20,
overflow: 'break',
fontSize: 24,
textAlign: 'center'
}
let series = {
type: 'line',
smooth: false,
// symbol: 'none',
connectNulls: true,
lineStyle: {
width: 0.5
},
itemStyle: {
borderWidth: 0
},
}
var option = {
color: lineColor,
graphic: {
elements: [{
type: 'text',
z: 100,
left: 10,
top: '25%',
style: {
...graphicStyle,
text: '含沙量',
fontSize: 22,
}
},
{
type: 'text',
z: 100,
left: 10,
top: '27.5%',
style: {
...graphicStyle,
textAlign: 'left',
width: 100,
text: '(kg/m³)',
fontSize: 14,
}
},
{
type: 'text',
z: 100,
left: 10,
bottom: '25%',
style: {
...graphicStyle,
text: '水位',
fontSize: 22,
}
},
{
type: 'text',
z: 100,
left: 10,
bottom: '24.5%',
style: {
...graphicStyle,
textAlign: 'left',
width: 80,
text: '(m)',
fontSize: 14,
}
},
{
type: 'text',
z: 100,
right: 45,
top: '7%',
style: {
...graphicStyle,
text: `${textObject.bsnm} ${textObject.hnnm}`
}
},
{
type: 'text',
z: 100,
right: 45,
top: '33%',
style: {
...graphicStyle,
text: textObject.label
}
},
{
type: 'text',
z: 100,
right: 45,
top: '45%',
style: {
...graphicStyle,
text: textObject.date + '逐时水位含沙量过程线'
}
},
{
type: 'text',
z: 100,
right: 60,
top: '65%',
style: {
...graphicStyle,
fontSize: 18,
text: '绘图 年 月 日'
}
},
{
type: 'text',
z: 100,
right: 20,
top: '65%',
style: {
...graphicStyle,
fontSize: 18,
text: '校对 年 月 日'
}
},
{
type: 'text',
z: 100,
right: 20,
bottom: '4.5%',
style: {
...graphicStyle,
fontSize: 18,
text: '共 页 第 页'
}
},
{
type: 'text',
z: 100,
right: 60,
bottom: '4.5%',
style: {
...graphicStyle,
fontSize: 18,
text: '年 月 日'
}
},
{
type: 'text',
z: 100,
right: 60,
bottom: '20%',
style: {
...graphicStyle,
fontSize: 18,
text: '翻阅'
}
},
]
},
tooltip: {
show: false,
trigger: 'axis',
axisPointer: {
animation: false
},
formatter: function(params) {
let name = params[0].name.split('-')
let time = `${name[0]} ${String(name[1]/60).split(".")[0]}:${name[1]%60}<br/>`
let arr = `${time}<br/>`
params.forEach(i => {
arr += `${i.marker} ${i.seriesName}：${i.data}<br/>`
})
return arr
}
},
grid: [{
...grid,
top: '5%',
height: '11.1%'
},
{
...grid,
top: '16.1%',
height: '27.75%'
},
{
...grid,
top: '43.85%',
height: '14.8%'
},
{
...grid,
top: '58.65%',
height: '27.75%'
},
{
...grid,
top: '86.4%',
height: '11.1%'
},
],
axisPointer: {
link: [{
xAxisIndex: [0, 2, 4, 5, 6]
}]
},
toolbox: {
feature: {
saveAsImage: {
pixelRatio: 1,
name: textObject.date+'逐时水位含沙量过程线',
}
}
},
// x轴的数据
xAxis: [{
...xAxis,
gridIndex: 1,
position: 'top',
offset: 320,
axisLabel: {
show: true,
...xAxisAxisLabel
},
}, {
data: modes,
gridIndex: 1,
axisLabel: {
interval: 0,
fontSize: 14,
color: '#333'
},
position: 'top',
offset: 340, // X 轴相对于默认位置的偏移，在相同的 position 上有多个 X 轴的时候有用
type: 'category', // 坐标轴类型
axisTick: {
show: false
}, // 是否显示坐标轴刻度
axisLine: {
show: false,
}, // 是否显示坐标轴轴线
},
{
...xAxis,
gridIndex: 3,
offset: 320,
axisLabel: {
show: true,
...xAxisAxisLabel
},
}, {
data: modes,
gridIndex: 3,
axisLabel: {
interval: 0,
fontSize: 14,
color: '#333'
},
position: 'bottom',
offset: 340, // X 轴相对于默认位置的偏移，在相同的 position 上有多个 X 轴的时候有用
type: 'category', // 坐标轴类型
axisTick: {
show: false
}, // 是否显示坐标轴刻度
axisLine: {
show: false,
}, // 是否显示坐标轴轴线
},
{
...xAxis,
gridIndex: 0,
axisLabel: {
show: true,
...xAxisAxisLabel,
formatter: ''
},
},
{
...xAxis,
gridIndex: 2,
axisLabel: {
show: true,
...xAxisAxisLabel,
formatter: ''
},
},
{
...xAxis,
gridIndex: 4,
axisLabel: {
show: true,
...xAxisAxisLabel,
formatter: ''
},
}
],
yAxis: [{
gridIndex: 1,
max: lsiltObject.max,
min: lsiltObject.min,
interval: (lsiltObject.max - lsiltObject.min) / 15,
axisLabel: {
formatter: function(value) {
if (value >= 0) {
if (value >= 100) {
return Math.floor(value)
} else if (value >= 10) {
if (Number.isInteger(value)) {
return value + '.0'
}
if (String(value).split(".")[1].length == 1) {
return value
} else {
return Math.floor(value * 10) / 10
}
} else if (value >= 1) {
if (Number.isInteger(value)) {
return value + '.00'
}
if (String(value).split(".")[1].length == 1) {
return value + '0'
}
if (String(value).split(".")[1].length == 2) {
return value
} else {
return Math.floor(value * 100) / 100
}
} else {
if (Number.isInteger(value)) {
return value + '.000'
}
if (String(value).split(".")[1].length == 1) {
return value + '00'
}
if (String(value).split(".")[1].length == 2) {
return value + '0'
}
if (String(value).split(".")[1].length == 3) {
return value
} else {
return Math.floor(value * 1000) / 1000
}
}
} else {
return ''
}
}
},
...yAxis
},
{
gridIndex: 3,
max: lwaterObject.max,
min: lwaterObject.min,
interval: (lwaterObject.max - lwaterObject.min) / 15,
axisLabel: {
formatter: function(value) {
var value = Math.round(parseFloat(value) * 100) / 100;
var s = value.toString().split(".");
if (s.length == 1) {
value = value.toString() + ".00";
return value;
}
if (s.length > 1) {
if (s[1].length < 2) {
value = value.toString() + "0";
}
return value;
}
}
},
...yAxis
},
{
gridIndex: 0,
max: 0,
min: 6,
interval: 1,
axisLabel: {
formatter: ''
},
...yAxis
},
{
gridIndex: 2,
max: 0,
min: 8,
interval: 1,
axisLabel: {
formatter: ''
},
...yAxis
},
{
gridIndex: 4,
max: 0,
min: 6,
interval: 1,
axisLabel: {
formatter: ''
},
...yAxis
},
],
series: [{
name: '逐时含沙量过程线',
data: lsiltObject.data,
yAxisIndex: 0,
xAxisIndex: 0,
...series,
markPoint: {
symbolKeepAspect: true,
symbolOffset: [15, '-50%'],
label: {
formatter: function(params) {
return params.data.name
},
offset: [0, -7],
color: '#000'
},
data: [
...lsiltList,
]
}
},
{
name: '逐时水位过程线',
data: lwaterObject.data,
yAxisIndex: 1,
xAxisIndex: 2,
...series,
markPoint: {
symbolKeepAspect: true,
symbolOffset: [15, '-50%'],
label: {
formatter: function(params) {
return params.data.name
},
offset: [0, -7],
color: '#000'
},
data: [
...lwaterList,
]
}
}
]
}
myChart.setOption(option);
}
//折线颜色
let color=['#00f', '#f00']
//含沙量月数据
let lsiltObject={
data:[],//集合
max:'15',//y轴最大值
min:'0',//y轴最小值
markPoint:[],//特征值数据
}
//水位月数据
let lwaterObject={
data:[],//集合
max:'15',//y轴最大值
min:'0',//y轴最小值
markPoint:[],//特征值数据
}
//右侧文本
let textObject={
bsnm:'流域',//流域名称
hnnm:'水系',//水系名称
label:'站点',//站点名称
date:'2023年1月',//当前报表的年月份
}
//x轴日（统一默认31天）
let modes = [];
//x轴分钟（以小时展示）
let tiems = [];
for (let i = 0; i < 31; i++) {
modes.push(i + 1)
for (let j = 0; j < 60 * 24; j++) {
tiems.push(`${i+1}-${j}`)
}
}
tiems.push(`31-1440`)
//模拟折线数据
function randomSum(){
return Math.round(Math.random()*15);
}
tiems.forEach((i,index)=>{
if(index%1000===0){
lwaterObject.data.push(randomSum())
lsiltObject.data.push(randomSum())
}else{
lwaterObject.data.push(null)
lsiltObject.data.push(null)
}
})
lwaterObject.data.pop()
lsiltObject.data.pop()
lwaterObject.data.push(randomSum())
lsiltObject.data.push(randomSum())
Rendering(color,lsiltObject,lwaterObject,textObject,modes,tiems)
</script>北京云智乐动科技发展有限公司
1310
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
