用echarts写潮汐表，并处理后端传来的数据为潮汐表接口的数据

 这是后端传来的接口类型：其中分别是今天，昨天，明天的数据，一天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}&nbsp&nbsp潮水高度：${a[1].value}米`;
            } else {
              str = `时间：${a[1].name}&nbsp&nbsp潮水高度：${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
      })
    },