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

落日映苍穹つ 2021-10-01 06:06 351阅读 0赞

下面是在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][] 属性

[activeAxisLabelStyle]: https://api.highcharts.com.cn/drilldown.activeAxisLabelStyle