1.安装highcharts
npm install highcharts --save
2.在main.js中
import Highcharts from 'highcharts/highstock';
import HighchartsMore from 'highcharts/highcharts-more';
import HighchartsDrilldown from 'highcharts/modules/drilldown';
import Highcharts3D from 'highcharts/highcharts-3d';
import Highmaps from 'highcharts/modules/map';
HighchartsMore(Highcharts)
HighchartsDrilldown(Highcharts);
Highcharts3D(Highcharts);
Highmaps(Highcharts);
new Vue({
el: '#app',
router,
axios,
components: { App },
template: '<App/>',
methods:{
moreChart() {
var options = this.getMoreOptions(this.type);
if (this.chart) {
this.chart.destroy();
};
// 初始化 Highcharts 图表
this.chart = new Highcharts.Chart('highcharts-more', options);
}
}
})
3.创建chart组件
<template>
<div class="chart">
<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>
<style scoped>
</style>
4.其他组件引用图表
<Chart :id="id" :option="option"></Chart>
import Chart from "./Chart";
export default {
name: "HelloWorld",
components: {
Chart
},
data() {
return {
msg: "Welcome to Your Vue.js App",
id: "test",
option: {
credits: {
enabled: false
},
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: false // 开启数据标签
},
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
]
}
]
}
}
}