栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > Web开发 > Vue.js

vueHightcharts && x轴24小时 && 没有数据时,展示提示

Vue.js 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

vueHightcharts && x轴24小时 && 没有数据时,展示提示

调用方式:

获得统计图

this.$refs.xxxcharts.getChart()

添加数据到统计图可以用addSeries的方式

chart.addSeries()

若有多图的情况

  • 可以将相同的options部分写进basicData中,统一调用

  • 不同的数据部分可以通过下面方式单独提出

export let xxxdata = {
  name: 'xxx',
  data: [],
}

如果数据有变动还可以通过

xxxcharts.series[0].update({    name: 'xxx',
    data: [],
})

update的方法是会把之前写的数据全部覆盖,相当于重新写
另外还有一种方法,是setdate但是只支持更新数据,不能更改相应的options


x轴24小时

若公司没有提供一个时间库的话,就只能自己来计算后端给的数据是多少份,然后在24个小时内平分。
x轴的格式有一定的要求。

  xAxis: {    type: 'datetime',
    // tickAmount: 24,
    // tickInterval: 3600 * 1000,
    // minTickInterval: 3600 * 1000,
    dateTimeLabelFormats: {
      day: '%H:%M'
    }
const startTime = new Date(new Date() - 24 * 3600 * 1000)const pointStart = Date.UTC(startTime.getFullYear(), 
startTime.getMonth(), startTime.getDate(), startTime.getHours(), startTime.getMinutes())let pointInterval = 24 * 3600 * 1000 / this.chartData[0].data.length

lineChart.addSeries(Object.assign({}, item, {pointInterval}, {pointStart}))

没有数据时,展示提示

网上有的相关的官方的noData的提示,也引入相关的noData需要的东西,依旧没有显示那个“没有数据”的提示

只好最后,自己加了div来提示“没有数据”,只要自己v-if看是否有数据.length



作者:徐金俊
链接:https://www.jianshu.com/p/dc0f5976b3a8


转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/241123.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号