highcharts 没有数据的时候的页面 highcharts-no-data-to-display在vue中的用法

最新推荐文章于 2022-05-04 20:04:37 发布

???xixi

最新推荐文章于 2022-05-04 20:04:37 发布

阅读量1.2k

点赞数 1

文章标签： vue

本文链接：https://blog.youkuaiyun.com/xixi_csdn/article/details/115392195

版权

文章目录

前言
用法
参考文献

前言

由于数据大都是由后端返回的，在渲染图表的时候要考虑没有数据时候的样式。有两种方式

1
用v-show（不可用v-if图表会渲染不出来）判断接口数据是否有值，显示相应的内容
2
使用highcharts自带的判断是否有值的方法。下图是官网的介绍
在这里插入图片描述

用法

1
先引入highcharts-no-data-to-display

npm i highcharts-no-data-to-display -D

2
在main.js中的用法，需要写在highcharts的引用下面

import的用法
import HighchartsNoData from 'highcharts-no-data-to-display';
HighchartsNoData(HighCharts)

require的用法
require('highcharts-no-data-to-display')(Highcharts)

3
在使用的时候。样式如下图（图中series、xAxis都没有数据，title有数据）

lang: {
   noData: "暂无数据"  // 这是会显示在页面上的问题。默认样式是垂直居中
 },
 noData:{  // 下面写的是有默认值的数据，详情见官网
  attr:{},  //Object,没有数据标签的 SVG 属性集合
  position:
  { "x": 0, "y": 0, "align": "center", "verticalAlign": "middle" },
  style:{ "fontSize": "12px", "fontWeight": "bold", "color": "#666666" },
  useHTML:false,
}