vue-chartkick npm包中的geochart库问题

<template>
  <geochart :data="chartData" :options="chartOptions"></geochart>
</template>

<script>
export default {
  data() {
    return {
      chartData: [['地区', '值'], ['北京', 100], ['上海', 200]],
      chartOptions: {
        googleApiKey: 'YOUR_GOOGLE_API_KEY'
      }
    };
  }
};
</script>

chartOptions: {
  region: 'CN', // 设置为中国区域
  displayMode: 'regions', // 显示区域模式
  colorAxis: { colors: ['#FF0000', '#00FF00'] } // 自定义颜色轴
}

npm update vue-chartkick chart.js

<template>
  <div>
    <geochart :data="chartData" :options="chartOptions"></geochart>
  </div>
</template>

<script>
export default {
  data() {
    return {
      chartData: [
        ['地区', '人口'],
        ['北京', 21542000],
        ['上海', 24237800],
        ['广东', 113460000]
      ],
      chartOptions: {
        region: 'CN',
        displayMode: 'regions',
        resolution: 'provinces',
        colorAxis: { colors: ['#e7eef1', '#c6dbef', '#9ecae1', '#6baed6'] }
      }
    };
  }
};
</script>

<style>
/* 确保没有全局样式影响到地图 */
</style>