Vue Highcharts "TypeError: 无法读取未定义的'图表'属性"

Question

我试图用Highcharts for Vue.js在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.compackagehighcharts

从文件上看 Load Highcharts as an ES6 module

import Highcharts from 'highcharts';

你使用的是命名导入。

另外，有点偏离主题，但还是要说一下......为什么你会从CDN加载vue js，但其他库是导入的？