vue中使用highCharts的drilldown钻取图、3D等图

<!-- 可以使用highcharts的CDN资源 -->

<!-- 钻取图依赖jquery.js和highcharts.js ,有顺序要求 -->

<script src="http://cdn.highcharts.com.cn/highcharts/highcharts.js"></script>

<script src="http://cdn.highcharts.com.cn/highcharts/modules/drilldown.js"></script>

 

<!-- 下面是实现highcharts图表导出功能需要依赖的资源-->

<script src="http://cdn.highcharts.com.cn/highcharts/highcharts-more.js"></script>

<script src="http://cdn.highcharts.com.cn/highcharts/modules/exporting.js"></script>

 

下面是在vuejs中使用highcharts钻取图、3D等图表的方法：

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

 

3、demo

$(function () {
	// Create the chart
	$('#container').highcharts({
		chart: {
			type: 'column'
		},
		title: {
			text: 'Basic drilldown'
		},
		xAxis: {
			type: 'category'
		},
		legend: {
			enabled: false
		},
		plotOptions: {
			series: {
				borderWidth: 0,
				dataLabels: {
					enabled: true
				}
			}
		},
		series: [{
			name: 'Things',
			colorByPoint: true,
			data: [{
				name: 'Animals',
				y: 5,
				drilldown: 'animals'
			}, {
				name: 'Fruits',
				y: 2,
				drilldown: 'fruits'
			}, {
				name: 'Cars',
				y: 4,
				drilldown: 'cars'
			}]
		}],
		drilldown: {
			series: [{
				id: 'animals',
				data: [
					{name: 'Cats', id: 'cat', y: 4},
					{ name: 'Dogs', id: 'dog', y: 2},
					{ name: 'Cows', y: 1, id: 'cow'},
					{name: 'Sheep', y: 2, id: 'sheep'},
					{name: 'Pigs', y: 1, id: 'pig'}
				]
			}, {
				id: 'fruits',
				data: [{
					name: 'Apples',
					y: 4
				},{
					name: 'Oranges', 
					y:2,
					drilldown: 'third-leves'
				}]
			}, {
				id: 'cars',
				data: [
					['Toyota', 4],
					['Opel', 2],
					['Volkswagen', 2]
				]
			},{
				id: 'third-leves',
				data: [
					['Toyota', 4],
					['Opel', 2],
					['Volkswagen', 2]
				]
			}]
		}
	});
});

注意：钻取图的X轴标签样式默认和一般highcharts图表不一样。可钻取的数据点的 x 轴标签样式，默认是将该数据点对应的坐标轴标签设置为蓝色并添加下划线。使用activeAxisLabelStyle 属性