vue ajax highcharts,Vue+Highcharts完全使用

创建Comp组件

import HighCharts from 'highcharts'

import highchartsMore from 'highcharts/highcharts-more';

highchartsMore(HighCharts);

export default {

name: "Comp",

props: {

id: {

type: String

},

option: {

type: Object

}

},

mounted() {

HighCharts.chart(this.id, this.option)

}

}

创建使用组件

import XChart from './comp.vue'

import HighCharts from 'highcharts'

export default {

name: "WdataCharts",

data() {      return {

id: 'datacharts',

option: {

chart: {

polar: true,

type: 'line'

},

credits: {

enabled: true,

text: '',

href: ''

},

exporting: {

enabled: true,

buttons: {

exportButton: {

enabled: true

}

}

},

title: {

text: 'w'

},

subtitle: {

text: '数据来源: w'

}

,

xAxis: {

categories: ['1', '2', '3', '4',      '5', '6'],

tickmarkPlacement: 'on',

lineWidth: 0

},

yAxis: {

gridLineInterpolation: 'polygon',

lineWidth: 0,

min: 0,

labels: {

formatter: function () {        return this.value + "%";

}

}

},

tooltip: {

shared: true,

pointFormat: '{series.name}: {point.y:,.0f}%
'

},

legend: {

align: 'right',

verticalAlign: 'top',

y: 100,

layout: 'vertical'

},

plotOptions: {},

series: [{

name: '2017',

data: [0, 0, 0, 0, 0, 0],

pointPlacement: 'on'

}, {

name: '2016',

data: [0, 0, 0, 0, 0, 0],

pointPlacement: 'on'

}]

}，mounted() {

HighCharts.chart(this.id, this.option)

}

原文链接：https://www.cnblogs.com/wangpeili/p/10424951.html

打开App，阅读手记