如何在Highcharts-Vue包装器中使用无数据显示

Question

我正在使用highcharts-vue。包装器工作得很好，但是我不知道如何利用no-data-to-display模块。我的main.js基本上是这样的：

import Vue from "vue";
import App from "./App";
import BootstrapVue from "bootstrap-vue";
import HighchartsVue from 'highcharts-vue'
import globalFunc from "./mixins/mixins.js";
import { store } from "./store/store";
import axios from "axios";
import { router } from "./router/router.js";

Vue.prototype.$http = axios;
Vue.mixin(globalFunc);
Vue.use(BootstrapVue);
Vue.use(HighchartsVue);

new Vue({
    store: store,
    router: router,
    el: "#app",
    render: h => h(App)
});

我假设noData选项将自动与Vue.use(HighchartsVue)的使用有关，但这似乎并不正确。

对此有何想法？

Answer 1

根据README文档，您还必须导入highcharts本身：

import Highcharts from 'highcharts';
import HighchartsNoData from 'highcharts-no-data-to-display';

HighchartsNoData(Highcharts);