2019-09-28

<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>

?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 當一個頁面超過屏幕高度的時候,一般會出現滾動條,粗粗的,看到這樣的滾動條,各位小伙伴們有什么想法呢: 也許是時候我...
    呼嚕嚕睡閱讀 1,206評論 0 2
  • 哇,又死了5天眾多問題,webpack中關鍵的一個概念是打包 在HMR中,通過CSS設置某一元素的背景,如何縮放圖...
    justam閱讀 115評論 0 0
  • 如何讓自己重新讀書 --------《麥肯錫精英的超高效閱讀法則》讀后感 一、讀書的好處 大家都知道讀書的好處,但...
    勺子和閱讀 317評論 0 1
  • 走出車站的時候,天還很黑,黎明前的車站,稀稀疏疏散落著些許旅人,不知道人影里,有幾個如我一般,但我相信,大多都是和...
    麥積木子閱讀 793評論 10 21
  • 作者:羅昕昊 在北極圈的冬天,會出現極夜現象,就是一天24小時都是黑夜。在極夜時,會有美麗的北極光出現...
    阿咧船長閱讀 327評論 0 1