Highcharts实现下钻多柱series

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

前言

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

实现

<template>
  <div
    ref="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>

效果

• 动画没录入