Highcharts-more.js在vue-cli项目中不起作用
这几个星期我在一个vue-cli项目上工作，我正在尝试做一个这样的极坐标图： https ： //www.highcharts.com/demo/polar-spider
由于这个图表需要highchart-more文件，因此我使用npm安装并导入了highcharts和highchart-more库。 但是，导入这两个文件后，我在我的铬控制台中得到以下错误，并不能加载高图。 错误
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文件？ 谢谢！！
这是我的代码：
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>
终于find了答案：
像这样编辑main.js文件：
import Highcharts from 'highcharts' import VueHighcharts from 'vue-highcharts' import highchartsMore from 'highcharts/highcharts-more' highchartsMore(Highcharts) Vue.use(VueHighcharts, {Highcharts})
它会像一个魅力:)