Highcharts-more.js在vue-cli项目中无法正常工作。

Question

这几周我在做一个vue-cli项目，尝试制作一个极地图表，就像这个一样：https://www.highcharts.com/demo/polar-spider

由于这个图表需要highchart-more文件，所以我使用npm安装和导入了highcharts和highchart-more库。然而，在导入这两个文件后，我在Chrome控制台中收到以下错误，并且无法加载highchart。 错误

highcharts-more.js?7b43:8 Uncaught TypeError: p is not a function
at eval (eval at <anonymous> (app.js:874), <anonymous>:8:212)
at eval (eval at <anonymous> (app.js:874), <anonymous>:11:205)
at eval (eval at <anonymous> (app.js:807), <anonymous>:39:67)
at Object.<anonymous> (app.js:807)
at __webpack_require__ (app.js:658)
at fn (app.js:86)
at Object.<anonymous> (app.js:1182)
at __webpack_require__ (app.js:658)
at app.js:707
at app.js:710

如果只导入Highcharts文件，插件可以加载，但只会显示基本线状图，而不是极地图表。 https://www.highcharts.com/demo/line-basic 我该如何正确使用Highcharts-more文件？谢谢！

以下是我的代码：

main.js文件

import Vue from 'vue'
import App from './App'
import VueRouter from 'vue-router'
import VueResource from 'vue-resource'

// import $ from 'jquery'
import VueHighcharts from 'vue-highcharts'
import HighchartsMore from 'highcharts/highcharts-more'
Vue.use(VueRouter)
Vue.use(VueResource)

Vue.use(VueHighcharts)
HighchartsMore(VueHighcharts)

const router = new VueRouter({
  routes: [
   {
      path: '/result',
      name: 'result',
      component: Result
    },
    { path: '/*', redirect: '/introduction' }                 // Redirect all path to /hello
  ]
})

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: { App },
  data: {
    currentSection: 1,
    currentCategory: 1
  }


   })

Result.vue文件

<template>
  <div>
    <highcharts :options="options"></highcharts>

    <div class="col-sm-9">
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
  var options = {

    chart: {
      polar: true
    },

    title: {
      text: 'Highcharts Polar Chart'
    },

    pane: {
      startAngle: 0,
      endAngle: 360
    },

    xAxis: {
      tickInterval: 45,
      min: 0,
      max: 360,
      labels: {
        formatter: function () {
          return this.value + '°'
        }
      }
    },

    yAxis: {
      min: 0
    },

    plotOptions: {
      series: {
        pointStart: 0,
        pointInterval: 45
      },
      column: {
        pointPadding: 0,
        groupPadding: 0
      }
    },

    series: [{
      type: 'column',
      name: 'Column',
      data: [8, 7, 6, 5, 4, 3, 2, 1],
      pointPlacement: 'between'
    }, {
      type: 'line',
      name: 'Line',
      data: [1, 2, 3, 4, 5, 6, 7, 8]
    }, {
      type: 'area',
      name: 'Area',
      data: [1, 8, 2, 7, 3, 6, 4, 5]
    }]

  }

  export default {
    data () {
      return {
        options: options
      }
    }
  }
</script>

- Alick Wong

Answer 1

终于找到答案了:

像这样编辑 main.js 文件:

import Highcharts from 'highcharts'
import VueHighcharts from 'vue-highcharts'
import highchartsMore from 'highcharts/highcharts-more'

highchartsMore(Highcharts)
Vue.use(VueHighcharts, {Highcharts})

它会像魔术般地运作 :)

- Alick Wong

---

或者，您可以使用 import {Highcharts} from 'highcharts'。 - Bert

谢谢 =] @Bert Evans - Alick Wong

非常感谢！正是我所需要的！ - Joseph N.