vue 中 highcharts 的簡單使用

首先安裝依賴

 

npm install -S vue-highcharts

 

　　

在main.js 中進行配置

import Vue from 'vue'
import App from './App'
import router from './router'

//highcharts的引入
import VueHighcharts from 'vue-highcharts';

Vue.use(VueHighcharts)
Vue.config.productionTip = false

new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: { App },
  methods:{

  	moreChart() {
        var options = this.getMoreOptions(this.type);

        if (this.chart) {
            this.chart.destroy();
        };
    // 初始化 Highcharts 圖表
    this.chart = new Highcharts.Chart('highcharts-more', options);
    }
  }
})

　　

新建一個作為comp.vue圖表的組件

<template>
	<div class="x-bar">
		<div :id="id" :option="option"></div>
	</div>
</template>
<script>
	import HighCharts from 'highcharts'
	export default {
		// 驗證類型
		props: {
			id: {
				type: String
			},
			option: {
				type: Object
			}
		},
		mounted() {
			HighCharts.chart(this.id, this.option)
		}
	}
</script>

　　

在需要使用的頁面調用組件

<template>
	<div class="hello">
		<div class="charts">
			<x-chart :id="id" :option="option"></x-chart>
		</div>
	</div>
</template>

<script>
	// 導入chart組件
	import XChart from './comp.vue'
	export default {
		data() {
			return {
				id: 'test',
				option: {
					chart: {
						type: 'line'
					},
					title: {
						text: '月平均氣溫'//表頭文字
					},
					subtitle: {
						text: '數據來源: WorldClimate.com'//表頭下文字
					},
					xAxis: {//x軸顯示的內容
						categories: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
　　　　　　　　　　　　　　　　　　　　　　　　plotbands:[{//可以顯示一個方塊，如果需要的話可以更改透明度和顏色
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　from:4.5,
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　to:6.5,
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　color:''rgba(68,170,213,0)//透明度和顏色
　　　　　　　　　　　　　　　　　　　　　　　　　　　　}]
                                                 },

				        yAxis: {//y軸顯示的內容
						title: {
							text: '氣溫 (°C)'
						}
					},
					plotOptions: {
						line: {
							dataLabels: {
								enabled: true // 開啟數據標簽
							},
							enableMouseTracking: false // 關閉鼠標跟蹤，對應的提示框、點擊事件會失效
						}
					},
					series: [{//兩條數據
						name: '東京',
						data: [7.0, 6.9, 9.5, 14.5, 18.4, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
					}, {
						name: '倫敦',
						data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
					}]
				}
			}
		},
		components: {
			XChart
		}
	}
</script>

　　

就是這個樣子啦，

如果想要使用highcharts的其他圖表，

只要對應將對應的數據vue的放在data（）{} 里面就可以了 

補充：

tickInterval 用來改變行間距，

labels  用來改變數值及數值單位，

yAxis: {
                        tickInterval:2,//y軸間距
                        title: {
                            text: '水果 單位'
                        },
                        labels: { //y軸數值改變
                            formatter: function() {
                                return this.value / 10 + 'k';
                            }
                        }
                    },