Vue Highcharts“ TypeError：无法读取未定义的属性'chart'”

Question

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

观察者触发dataSource（）方法。 dataSource（）方法用于读取列表并计算图表数据； const“ base”是从中提取类别和数据的地方。 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，而又导入其他库？