<template>
<div id="container" style="width:400px;height:400px"></div>
</template>
<script>
var Highcharts = require('highcharts');
// 在 Highcharts 加載之后加載功能模塊
require('highcharts/modules/exporting')(Highcharts);
export default {
name: 'Chart',
data () {
return {
}
},
created(){
Highcharts.chart('container', {
//圖表類型，
type:'bar',
// 反轉(zhuǎn)，x和y軸
inverted:false,
// 動(dòng)畫
animation:true,
//圖表英妓，可以配置圖表樣式
chart: {
// 樣式丐膝，或者使用className:string也行
style: {
fontFamily: "",
fontSize: '12px',
fontWeight: 'bold',
color: '#006cee'
}
},
// 標(biāo)題，以及副標(biāo)題subtitle淫半，配置基本上就是樣式的設(shè)置
// 可以動(dòng)態(tài)獲取及設(shè)置標(biāo)題： chart.title.textStr溃槐，chart.setTitle(titleObj,subTitleObj);
// 或update標(biāo)題：chart.title.update(titleObj),hart.subtitle.update(titleObj);
title:{
text: '我是標(biāo)題'
},
//事件
events: {
click:function(){
}
},
// loading 加載時(shí)的一些配置
loading:{
},
xAxis:{
title:{
text:'x軸標(biāo)題',
align:"middle",//'low','high' 即底部，中間科吭，和頂部
margin:10,//偏移量昏滴。相當(dāng)于字外圍。和offset（字內(nèi)圍）互斥对人。x,y相對(duì)于自身再偏移谣殊。即相對(duì)定位
rotation:0,//旋轉(zhuǎn)角度
style:{}
}
},
yAxis:{
title:{
text:'y軸標(biāo)題',
align:"middle"
}
},
// 坐標(biāo)軸刻度
Labels:{
enabled:true,//false, 默認(rèn)有刻度
Formatter:function(){
return this.value;//this.value表示原先的刻度值，可以對(duì)原先刻度值格式化牺弄，返回新的值
},
Step:1,//顯示值的跨度為1姻几。如果為2則相當(dāng)于第一個(gè)刻度沒有值顯示，第二個(gè)才有猖闪。第三個(gè)沒有鲜棠，第四個(gè)有。多列好像沒用培慌？
},
// 數(shù)據(jù)列
series:[
{
data:[2,4,6,3,8,11],
// 其它如列類型豁陆，線條樣式，dataLabels(數(shù)據(jù)標(biāo)簽:節(jié)點(diǎn)處顯示值) 貌似在這里配置沒用?
}
]
}
</script>
<style scoped>
</style>
