当我们使用highcharts无数据的时候，要考虑到样式问题，官网默认效果如下

highcharts无数据显示_数据

 

这是没有数据 

highcharts无数据显示_官网_02

 

这是有数据，但数据都为0 

我们想在这种无数据的时候，修改highcharts样式，两种方式

① 通过 v-if（v-show）控制图表的显隐，无数据的时候就不加载图表；自定义去写一个暂无数据的样式

② 通过highcharts自带的判断是否有数据的方式 

第一种方式： 

<div class="chart">
  <LtTopPie v-if="datas.length" :id="'LtTopPie'" :dataList="datas" />
  <div v-else>
    <!-- 在这自定义去写无数据的样式 -->
  </div>
</div>

第二种方式 :

highcharts无数据显示_前端_03

 官网为我们提供的noData 需要依赖项highcharts-no-data-to-display

npm官网 ​​npmjs:highcharts-no-data-to-display​​ 

1. 安装 

npm install highcharts-no-data-to-display --save

2.  引入

可以在main.js 也可以在具体使用的组件中 

import highcharts from "highcharts";
import highchartsNoData from 'highcharts-no-data-to-display';
highchartsNoData(highcharts)

我是在具体的组件中使用的 

3. 使用 

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

效果： 

highcharts无数据显示_数据可视化_04

 

highcharts具体的使用示例： ​​HighCharts实现3D不同高度圆环图、3D饼图​​