</template>
<div>
<highcharts :options="options">
</div>
</template>
// 注入
import Vuefrom 'vue'
import highchartsfrom 'highcharts'
import HighchartsVue from 'highcharts-vue'
import highcharts3d from 'highcharts/highcharts-3d'
import loadExporting from 'highcharts/modules/exporting'
Vue.use(HighchartsVue)
highcharts3d(highcharts)
loadExporting(highcharts)
// 函数集，
methods: {
init() {
let _this =this
this.options = {
chart: {
type:'column',
options3d: {
enabled:true,
alpha:5,
beta:0,
viewDistance:25,
depth:40
},
renderTo:'container',
marginTop:80,
marginRight:40
},
colors:this.$config.chartsColor,
title: {
text:this.titleText
},
xAxis: {
categories:this.xAxisCategories
},
yAxis: {
allowDecimals:false,
min:0,
max: _this.maxYAxis,
title: {
text:this.yAxisTitle
},
labels: {
formatter:function () {
return this.value + _this.unitSymbol
}
}
},
tooltip: {
headerFormat:'<b>{point.key}</b><br>',
pointFormat:`{point.y} ${_this.unitSymbol}`
},
credits: {
enabled:false// 不显示LOGO
},
plotOptions: {
column: {
stacking:'normal',
dataLabels: {
enabled:true,
style: {
// 如果不需要数据标签阴影，可以将 textOutline 设置为'none'
textOutline:'none'
},
formatter:function () {
return this.y + _this.unitSymbol
}
},
depth:40
}
},
series:this.seriesData
}
Highcharts.setOptions({
lang: {// options here
contextButtonTitle:'图表导出菜单',
downloadJPEG:'下载JPEG图片',
downloadPDF:'下载PDF文件',
downloadPNG:'下载PNG文件',
downloadSVG:'下载SVG文件'
}
})
}
}
