node.js - 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

如果我只导入 highchart 文件，插件可以加载但看起来像这样(基本线图，不是极线图) https://www.highcharts.com/demo/line-basic

如何正确使用highchart-more文件？谢谢!!

这是我的代码:

ma​​in.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>

Answer 1

终于找到答案了:

像这样编辑 ma​​in.js 文件:

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

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

它会像一个魅力:)