用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})},

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

echarts在没有数据时显示暂无数据
需求描述: 如上图,若选择的日期范围内没有数据时,接口返回数据为空,此时需要在echarts dom区域内显示"暂无数据"的提示文字: 并且,若在暂无数据之后重新选择日期范围,当重 ...
Echarts插件中的data绑定一个变量，后面通过访问后端接口获取数据给这个变量，Echarts插件无法渲染数据
我们都知道echarts图标数据是写在option = {}对象里,但是数据不可能是固定值,而是通过后端接口返回来的,本以为只需要在 data里设置一个变量去接收返回的数据,然后再将变量赋值给echa ...
Vue解析后端传来的带有文字和html代码的数据
产生原因最近在毕设过程中学习了Vue,遇到一种情况是在前端解析后端传来的带有文字和图片的文章.考虑了很多种方法,最后选择直接在MySQL数据库中存储文字+html代码的形式.但是写好之后发现前端直接 ...
EJS 模板中，js 如何获取后端传来的数据
在 ejs 模板中,想让 js 的代码获得后端传来的数据,要在<%=%>的外面加一对引号. 如下图,从后端给 chatroom.ejs 传进去一个 avatar 变量,是个字符串类型的. ...
vue-video-player 实现动态渲染后端传来的视频
1.安装vue-video-player npm install vue-video-player --save 2.在main.js入口文件中引入 import VideoPlayer from ' ...
echarts中使用散点图根据后端接口动态生成点，并根据点数据动态渲染点颜色
实现效果如图点击 1 根据接口数据动态生成 2,并根据接口中的数据字段为数据渲染不同颜色,并且鼠标覆盖上去的提示信息不是渲染该数据点的值,而是根据接口获取下来的提示信息接口返回数据如下图 1 =& ...
基于echarts 24种数据可视化展示，填充数据就可用，动手能力强的还可以DIY（演示地址+下载地址）
基于echarts 24种数据可视化展示,填充数据就可用,动手能力强的还可以DIY(演示地址+下载地址) 前言演示地址下载地址 Demo示例(部分) 1.总览 2.物流信息展示 3.车辆综合管控平 ...
【小程序】【Tips】【前端】交互【后端】从Json对象数组里面获取数据的方法 - PHP - JS 的原生方法
小程序后端和前端之间是通过,json的格式来传数据的,那么,数据如何获取呢?这就分两个部分 1 就是后端到前端后端我们考虑是PHP环境,前端是JS, 那么在JS里面,很简单: 比如,小程序一般在前端 ...
后端思想篇：设计好接口的36个锦囊！
前言大家好,我是捡田螺的小男孩.作为后端开发,不管是什么语言,Java.Go还是C++,其背后的后端思想都是类似的.后面打算出一个后端思想的技术专栏,主要包括后端的一些设计.或者后端规范相关的,希望 ...

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

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

最新文章

热门文章