Vue Highcharts“类型错误：无法读取未定义的属性‘图表’”

Question

我正在尝试使用 Vue 的 Highcharts 在 Vue.js 中显示来自 Highcharts 的图表。我在浏览器控制台上的标题中不断收到我创建的观察者和方法的错误（请参见下面的代码）。以及其他 Vue 方法（参见代码下方的屏幕截图）。

观察者触发 dataSource() 方法。 dataSource() 方法用于读取列表并计算图表数据； const“基础”是要从中提取类别和数据的地方。 setup() 方法用于设置图表并显示在屏幕上（该方法只有在数据准备好时才会触发）。

如何解决这些错误？

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.js"></script>
<script>
import { mapState } from "vuex";
import _ from "lodash";
import { Highcharts } from "highcharts";

export default {
  computed: mapState({
    list: state => state.list
  }),

  //watcher for each time the list is modified. Triggers dataSource() method;
  watch: {
    list() {
      this.dataSource();
    }
  },
  methods: {
    //used to read the list and calculate chart data
    dataSource() {
      const countries = this.list.map(item => item.country);

      //const from where categories and data is going to be extracted
      const base = _(countries)
        .countBy()
        .map((value, key) => ({ key, value }))
        .orderBy(["value"], ["desc"])
        .value();

      const categories = base.map(item => item.key);
      const values = base.map(item => item.value);

      this.setup({ categories, values });
    },

    //used to set up the chart and display on the screen. This method will only be triggered when data is ready
    setup(obj) {
      const { categories, values } = obj;

      Highcharts.chart("container-for-countries", {
        chart: {
          type: "column"
        },
        title: {
          text: "Monthly Average Rainfall"
        },
        subtitle: {
          text: "Source: WorldClimate.com"
        },
        xAxis: {
          categories: categories,
          crosshair: true
        },
        yAxis: {
          min: 0,
          title: {
            text: "Rainfall (mm)"
          }
        },
        series: [
          {
            name: "Quantidade",
            data: values
          }
        ]
      });
    }
  }
};
</script>

Answer 1

https://www.npmjs.com/package/highcharts

来自文档Load Highcharts as an ES6 module

import Highcharts from 'highcharts';

您正在使用命名导入。

还有，有点跑题了，不过还是有话题的。。为什么要从 CDN 加载 vue js，而其他库是导入的？