如何在 Vue.js 中使用 zingchart 地图模块？

Question

我在documentation 中搜索，但我没有找到任何将地图模块与zingchart-vue 一起使用的示例

我确实在使用 Nuxt，但我认为它是一样的......

Answer 1

我们已在 zingchart-vue 存储库中更新了自述文件，了解如何解决该问题。

https://github.com/zingchart/zingchart-vue#zingchart-modules

ZingChart 与常用图表类型捆绑在一起，例如折线图、柱形图、饼图和散点图。对于其他图表类型，您需要导入其他模块文件。

例如，向您的 vue 组件添加深度图将需要额外的导入。注意，必须从 zingchart 包中的 modules-es6 目录导入。

import 'zingchart/modules-es6/zingchart-depth.min.js';

这是加载地图的完整 .vue 示例：

<template>
  <div style="height:200px">
    <zingchart :height="'100%'" ref="myChart" 
               :data="{
        shapes: [
          {
            type: 'zingchart.maps',
            options: {
              name: 'usa',
              ignore: ['AK','HI']
            }
          }
        ]
      }" >
    </zingchart>
  </div>
</template>

<script>
import zingchartVue from 'zingchart-vue';
import 'zingchart/modules-es6/zingchart-maps.min.js';
import 'zingchart/modules-es6/zingchart-maps-usa.min.js';

export default {
  components: {
    zingchart: zingchartVue,
  },
}
</script>