<!-- 可以使用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 属性