这是后端传来的接口类型:其中分别是今天,昨天,明天的数据,一天24个小时,分别为a0和a23表示;后端接口数据如下:
dom表单代码如下:
<div class="tide">
<div class="title">
<div class="title_zh">潮汐表</div>
<div class="title_en">TIDE TABLE</div>
</div>
<div class="wrap" v-loading="loading">
<p class="echarts_title" v-html="echartsTitle"></p>
<div class="tide_table" ref="tideEchartsElement"></div>
<div class="btn_list clearfix">
<div class="btn fl" :style="{ cursor: activeTime === 'yesterday' ? 'no-drop' : 'pointer' }" @click="handleChangeDay('yesterday')">前一天</div>
<div class="btn time fl" @click="handleChangeDay('today')">{{ tideTime }}</div>
<div class="btn fl" :style="{ cursor: activeTime === 'tomorrow' ? 'no-drop' : 'pointer' }" @click="handleChangeDay('tomorrow')">后一天</div>
</div>
</div>
</div>
</div>
在公共数据区中定义:代码如下:
在加载进入页面时在mounted方法中加载,this.getTideSearch()方法,在methods中调用getTideSearch方法,调用接口,用tideObj来接收对象数据,昨天的数据用yesterday: res.data[0].yesterday,来表示。
最后调用this.handleChangeDay('today')参数为'today'。在handleChangeDay(e)方法中传入参数e。用activeTime来接收,然后用data来接收tideObj对象,用arr来分别定义a0到a23,然后用arr.forEach((item, index) => {})来接收,最后用createTideEcharts方法来接收arr1, arr2, arr3。
用echatrs来写的折线图:代码如下:
createTideEcharts(data) {
const tideEchartsElement = this.$refs.tideEchartsElement, that = this;
const xData = ['0:00', '1:00', '2:00', '3:00', '4:00', '5:00', '6:00', '7:00', '8:00', '9:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00'];
const color = ['#1f5b59', '#2a7d70', '#fa2424']
const name = ['晚上潮水高度', '白天潮水高度']
// const data = [
// [13.7, 3.4, 13.5, 16.1, 7.4, 15.2],
// [17.4, 13.7, 13.5, 3.4, 15.2, 13.5],
// [null, 7.4, 13.7, 13.5, 16.1]
// ]
const series = [];
for (let i = 0; i < 6; i++) {
series.push({
name: name[i],
type: 'line',
smooth: true,
showSymbol: false, // 是否显示 symbol, 如果 false 则只有在 tooltip hover 的时候显示
itemStyle: {
color: color[i],
borderColor: color[i]
},
lineStyle: {
width: 2,
type: 'solid',
opacity: 0.7
},
areaStyle: {
// color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
// offset: 0,
// color: color[i]
// }, {
// offset: 0.8,
// color: 'rgba(255,255,255,0)'
// }], false),
// shadowColor: 'rgba(255,255,255, 0.1)',
shadowBlur: 10,
opacity: 0.3
},
data: data[i]
})
}
this.initCharts(tideEchartsElement, {
legend: {
bottom: 10,
itemWidth: 43,
itemHeight: 16,
itemGap: 8,
icon: 'roundRect',
textStyle: {
color: '#fff',
fontSize: '10'
},
data: name
},
grid: {
top: 10
},
tooltip: {
trigger: 'axis',
textStyle: {
color: '#fff',
fontSize: '20'
},
axisPointer: { // 坐标轴指示器,坐标轴触发有效
type: 'line', // 默认为直线,可选为:'line' | 'shadow'
lineStyle: {
color: '#57617B'
}
},
formatter: function (a) {
let str = ''
if (a[0].value === undefined) {
str = `时间:${a[1].name}  潮水高度:${a[1].value}米`;
} else {
str = `时间:${a[1].name}  潮水高度:${a[0].value}米`;
}
that.echartsTitle = str;
}
},
xAxis: [{
type: 'category',
axisLine: {
lineStyle: {
color: '#fff'
}
},
splitLine: {
show: false,
lineStyle: {
color: '#32346c '
}
},
boundaryGap: false, // 坐标轴两边留白策略,类目轴和非类目轴的设置和表现不一样
axisTick: {
show: false
},
splitArea: {
show: false
},
axisLabel: {
inside: false,
color: '#bac0c0',
fontWeight: 'normal',
fontSize: '12'
},
data: xData
}],
yAxis: {
type: 'value',
axisTick: {
show: false
},
axisLine: {
show: true,
lineStyle: {
color: '#fff'
}
},
splitLine: {
show: true,
lineStyle: {
color: '#fff',
type: 'dashed'
}
},
axisLabel: {
color: '#bac0c0',
fontWeight: 'normal',
fontSize: '12',
formatter: '{value}'
}
},
series: series
})
},