如何在Vue.js中使用zingchart映射模块

Question

我正在文档中搜索，但没有找到任何使用zingchart vue 的地图模块的示例

真的，我在使用Nuxt，但我怀疑它是一样的。。。

Answer 1

我们已经更新了zingchart-vue repo中关于如何解决该问题的自述文件。

https://github.com/zingchart/zingchart-vue#zingchart-模块

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>