<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',
// 反转，x和y轴
inverted:false,
// 动画
animation:true,
//图表，可以配置图表样式
chart: {
// 样式，或者使用className:string也行
style: {
fontFamily: "",
fontSize: '12px',
fontWeight: 'bold',
color: '#006cee'
}
},
// 标题，以及副标题subtitle，配置基本上就是样式的设置
// 可以动态获取及设置标题： chart.title.textStr，chart.setTitle(titleObj,subTitleObj);
// 或update标题：chart.title.update(titleObj),hart.subtitle.update(titleObj);
title:{
text: '我是标题'
},
//事件
events: {
click:function(){
}
},
// loading 加载时的一些配置
loading:{
},
xAxis:{
title:{
text:'x轴标题',
align:"middle",//'low','high' 即底部，中间，和顶部
margin:10,//偏移量。相当于字外围。和offset（字内围）互斥。x,y相对于自身再偏移。即相对定位
rotation:0,//旋转角度
style:{}
}
},
yAxis:{
title:{
text:'y轴标题',
align:"middle"
}
},
// 坐标轴刻度
Labels:{
enabled:true,//false, 默认有刻度
Formatter:function(){
return this.value;//this.value表示原先的刻度值，可以对原先刻度值格式化，返回新的值
},
Step:1,//显示值的跨度为1。如果为2则相当于第一个刻度没有值显示，第二个才有。第三个没有，第四个有。多列好像没用？
},
// 数据列
series:[
{
data:[2,4,6,3,8,11],
// 其它如列类型，线条样式，dataLabels(数据标签:节点处显示值) 貌似在这里配置没用?
}
]
}
</script>
<style scoped>
</style>
