vue 中 highcharts 的简单使用

以柱形图举例，实现步骤如下：

1. npm安装 Highcharts 相关资源

   npm install highcharts --save
   

2. 在vue要引入图表的界面引入使用

   引入：

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

   使用：
   html5代码： <div id="container"></div>
   js代码： 在methods中封装一个方法

   methods: {
       moreChart() {
   
       if (this.chart) {
           this.chart.destroy();
       }
         // 初始化 Highcharts 图表
         this.chart = new Highcharts.chart('container',{
   	chart: {
   		type: 'column'
   	},
   	title: {
   		text: '月平均降雨量'
   	},
   	subtitle: {
   		text: '数据来源: WorldClimate.com'
   	},
   	xAxis: {
   		categories: [
   			'一月','二月','三月','四月'
   		],
   		crosshair: true
   	},
   	yAxis: {
   		min: 0,
   		title: {
   			text: '降雨量 (mm)'
   		}
   	},
   	tooltip: {
   		// head + 每个 point + footer 拼接成完整的 table
   		headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
   		pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
   		'<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
   		footerFormat: '</table>',
   		shared: true,
   		useHTML: true
   	},
   	plotOptions: {
   		column: {
   			borderWidth: 0
   		}
   	},
   	series: [{
   		name: '东京',
   		data: [49.9, 71.5, 106.4, 129.2]
   	}, {
   		name: '纽约',
   		data: [83.6, 78.8, 98.5, 93.4]
   	}, {
   		name: '伦敦',
   		data: [48.9, 38.8, 39.3, 41.4]
   	}, {
   		name: '柏林',
   		data: [42.4, 33.2, 34.5, 39.7]
   	}]
   }
         );
       }
     }
   

   在mounted中加载方法

    mounted() {
   	    this.moreChart();
   	  },
   

运行结果如下：

完整代码如下

<template>
  <div id="container"></div>
</template>

<script>
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);
export default {
  mounted() {
    this.moreChart();
  },
  methods: {
    moreChart() {

    if (this.chart) {
        this.chart.destroy();
    }
      // 初始化 Highcharts 图表
      this.chart = new Highcharts.chart('container',{
	chart: {
		type: 'column'
	},
	title: {
		text: '月平均降雨量'
	},
	subtitle: {
		text: '数据来源: WorldClimate.com'
	},
	xAxis: {
		categories: [
			'一月','二月','三月','四月'
		],
		crosshair: true
	},
	yAxis: {
		min: 0,
		title: {
			text: '降雨量 (mm)'
		}
	},
	tooltip: {
		// head + 每个 point + footer 拼接成完整的 table
		headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
		pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
		'<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
		footerFormat: '</table>',
		shared: true,
		useHTML: true
	},
	plotOptions: {
		column: {
			borderWidth: 0
		}
	},
	series: [{
		name: '东京',
		data: [49.9, 71.5, 106.4, 129.2]
	}, {
		name: '纽约',
		data: [83.6, 78.8, 98.5, 93.4]
	}, {
		name: '伦敦',
		data: [48.9, 38.8, 39.3, 41.4]
	}, {
		name: '柏林',
		data: [42.4, 33.2, 34.5, 39.7]
	}]
}
      );
    }
  }

}
</script>

<style scoped>
#container{
  width: 500px;
}
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>