Highcharts实现下钻多柱series

article/2025/9/12 19:24:09

钻取功能需要引入或注册额外的功能模块，链接是官方模块的引入文档。

前言

Highcharts实现下钻动态添加多个series

实现

<template><divref="chartRef"style="height:300px;width:800px"></div>
</template><script>
import Highcharts from "highcharts";
import HighchartsDrilldown from "highcharts/modules/drilldown";
HighchartsDrilldown(Highcharts);import { onMounted, ref } from "vue";export default {components: {},props: {},setup() {const chartRef = ref(null);onMounted(() => {initChart();});function initChart() {let chart = Highcharts.chart(chartRef.value, {credits: {enabled: false,},chart: {type: "column",events: {drilldown: async function (e) {// const drilldownId = e.point.drilldown // 可根据drilldownId 找到你要下钻的数据， 此处demo直接用模拟数据let area = {name: "10月面积",id: 10,color: "#F56C6C",data: [{name: "1",y: 100,},{name: "2",y: 200,},{name: "3",y: 400,},],};chart.addSingleSeriesAsDrilldown(e.point, area);let passArea = {name: "10月合格面积",id: 10,color: "#42b983",data: [{name: "1",y: 70,},{name: "2",y: 90,},{name: "3",y: 200,},],};chart.addSingleSeriesAsDrilldown(e.point, passArea);chart.applyDrilldown();},},},legend: {verticalAlign: "top",},title: {text: null,},subtitle: {text: "单击列,展示更多详细信息",},xAxis: {type: "category",crosshair: true,},yAxis: {title: {text: "面积",},},series: [{name: "面积",data: [{name: "10月",y: 1231,drilldown: 10,},],color: "#F56C6C",},{name: "合格面积",data: [{name: "10月",y: 443,drilldown: 10,},],color: "#42b983",},],drilldown: {drillUpButton: {position: {y: -32,},},},});chart.options.lang.drillUpText = "◁ Back";}return {chartRef,};},
};
</script>