如何在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);