如何在每个列的顶部显示值| Hightcharts | Vue-chartkick | Cube Js

Highcharts.chart('container', {
  chart: {
    type: 'column'
  },
  title: {
    text: 'Column Chart with Data Labels'
  },
  xAxis: {
    categories: ['Category 1', 'Category 2', 'Category 3']
  },
  yAxis: {
    title: {
      text: 'Value'
    }
  },
  series: [{
    name: 'Series 1',
    data: [10, 20, 30],
    dataLabels: {
      enabled: true,
      format: '{y}' // 显示数据值
    }
  }]
});

<template>
  <div>
    <column-chart :data="chartData"></column-chart>
  </div>
</template>

<script>
import { VueChartkick, columnChart } from 'vue-chartkick'
import 'chart.js'

export default {
  components: {
    columnChart
  },
  data() {
    return {
      chartData: [
        ['Category 1', 10],
        ['Category 2', 20],
        ['Category 3', 30]
      ]
    }
  }
}
</script>

<style>
/* 样式 */
</style>

import cubejs from '@cubejs-client/core';
import { BarChart } from '@cubejs-client/echarts';

const cubejsApi = cubejs('CUBEJS_API_TOKEN');

cubejsApi.load({
  measures: ['Orders.count'],
  dimensions: ['Orders.category']
}).then(({ resultSet }) => {
  const chartData = resultSet.chartPivot();
  const chart = new BarChart(document.getElementById('chart-container'), {
    data: chartData,
    xField: 'Orders.category',
    yField: 'Orders.count',
    tooltip: true
  });
  chart.render();
});