这几周我在做一个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>
import {Highcharts} from 'highcharts'
。 - Bert