老师我想用v-charts设置显示世界地图应该怎么做？

来源：8-3 v-charts移植销售大盘地图组件

NeoRRRR

2020-07-15

补充编辑：

这是zoom为1的效果
图片描述

我想实现世界地图

图片描述

https://echarts.apache.org/examples/zh/editor.html?c=map-parallel-prices

上图的例子在option里有一个geo对象指定map为world，但是我在v-charts里实现尝试了几种方式都未生效，另外地图如何实现国际化，将国家名，海洋换成英文或者不显示也可以

  <ve-bmap
    :settings="chartSettings"
    height="100%"
    :title="title"
    :geo="geoSetting"
    :tooltip="{}"
    :series="chartSeries"
  />

...

data(){
return {
      geoSetting: {
        geo: {
          map: 'world',
          silent: true
        }
      },
      chartSettings: {
       key: 'wm41Vq8d154cyuSnELzQ0g6CkxWebeCM',
         // 这种写法也没生效
         geo:{
		  map: 'world',
          silent: true
		},
       bmap: {
	       //放在这里也没生效
         map: 'world',
         // 这种写法也没生效
         geo:{
		  map: 'world',
          silent: true
		},
         center: [104.114129, 37.550339],
         zoom: 5,
         roam: false,
         mapStyle: {}
       }
     },
} 
}

写回答

3回答

扬_灵

2020-07-23

已采纳

同学你好，展示世界地图可以直接使用v-echarts中的ve-map组件实现。ve-map组件提供了position属性可以设置位置，地图如何实现国际化，将国家名，海洋换成英文或者不显示也可以这些效果也可以通过label属性实现，或者你也可以参考下面这个案例实现世界地图https://liuxianyu.cn/article/vue-echarts.html ，如果帮助到了你，欢迎采纳！

NeoRRRR

非常感谢！

2020-07-25

共1条回复

页雨

2020-07-23

同学，看你的效果图应该是用 map 而不是 bmap，如果是 map 的话你可以给你点参考代码

<template>
  <div class="map">
    <v-chart :options="option"></v-chart>
  </div>
</template>

<script>

// 这一句是重点
import 'echarts/map/js/world'

export default {
  data() {
    return {
      option: {
        series: {
          type: 'map',
          map: 'world'
        }
      }
    }
  }
}
</script>

<style scoped>
.map {
  position: absolute;
  width: 100%;
  height: 80%;
  margin-top: 10%;
}
</style>

我这里有个中国的示例你可以看下，区别就是一个是 import 'echarts/map/js/china' 另一个是 import 'echarts/map/js/world'，

https://github.com/clinfc/multiple/blob/dev/src/views/echarts/map-02.vue

NeoRRRR

非常感谢！

2020-07-25

共1条回复

扬_灵

2020-07-16

同学你好，能不能把你的需求说一下，想要实现什么样的效果，如果想显示世界地图可以把zoom改为1。如果不能解决你的问题，可以继续追问。

NeoRRRR

zoom改成1是东亚范围地图老师等我编辑问题

2020-07-16