**地图 为什么只显示了海南诸岛那个小框 about vue-echarts-v3

[sxhjlzl]

使用vue2
import IEcharts from 'vue-echarts-v3';

[xlsdg]

外部包围一个div，用样式限定一下大小：

<template>
  <div class="echarts">
    <IEcharts :option="map" />
  </div>
</template>

<style scoped>
  .echarts {
    width: 400px;
    height: 400px;
  }
</style>

[sxhjlzl]

欢迎

概览

图表 基础图表

.echarts { width: 400px; height: 400px; }

这些都有的，还是只显示海南诸岛

[xlsdg]

那就要检查一下你的 option 参数配置或参考 #6 正确引入地图数据。

[sxhjlzl]

option 参数是从http://echarts.baidu.com/demo.html#map-china-dataRange option 里面拷贝过去的 一点没变动。
import IEcharts from 'vue-echarts-v3';
按理说这样全部引入，应该不需要单个引入了吧

[xlsdg]

注册地图数据了吗？代码贴一下

[sxhjlzl]

[sxhjlzl]

还缺什么东西吗，import china from 'echarts/map/js/china' **的地铁的js也引入了，

[sxhjlzl]

出来了 把 import IEcharts from 'vue-echarts-v3'; 换成import IEcharts from 'vue-echarts-v3/src/lite.vue';就好了，这个是什么原因呢？

[xlsdg]

不清楚，没碰到这个问题……

[sxhjlzl]

排查下这个问题，官网上写着Import all charts and components 只导入import IEcharts from 'vue-echarts-v3';

[xlsdg]

import IEcharts from 'vue-echarts-v3';

通过这种方式引入的，要下载 json 格式的地图数据，不能引入js。

完整示例代码：

<template>
  <div class="echarts">
    <IEcharts :option="map" />
  </div>
</template>

<script type="text/babel">
import IEcharts from 'vue-echarts-v3';
import chinaMap from './china.json';

IEcharts.registerMap('china', chinaMap);

function randomData() {
  return Math.round(Math.random() * 1000);
}

export default {
  name: 'index',
  components: {
    IEcharts
  },
  data() {
    const option = {
      title: {
        text: 'iphone销量',
        subtext: '纯属虚构',
        left: 'center'
      },
      tooltip: {
        trigger: 'item'
      },
      legend: {
        orient: 'vertical',
        left: 'left',
        data: ['iphone3', 'iphone4', 'iphone5']
      },
      visualMap: {
        min: 0,
        max: 2500,
        left: 'left',
        top: 'bottom',
        text: ['高', '低'],           // 文本，默认为数值文本
        calculable: true
      },
      toolbox: {
        show: true,
        orient: 'vertical',
        left: 'right',
        top: 'center',
        feature: {
          dataView: { readOnly: false },
          restore: {},
          saveAsImage: {}
        }
      },
      series: [
        {
          name: 'iphone3',
          type: 'map',
          mapType: 'china',
          roam: false,
          label: {
            normal: {
              show: true
            },
            emphasis: {
              show: true
            }
          },
          data: [
            { name: '北京', value: randomData() },
            { name: '天津', value: randomData() },
            { name: '上海', value: randomData() },
            { name: '重庆', value: randomData() },
            { name: '河北', value: randomData() },
            { name: '河南', value: randomData() },
            { name: '云南', value: randomData() },
            { name: '辽宁', value: randomData() },
            { name: '黑龙江', value: randomData() },
            { name: '湖南', value: randomData() },
            { name: '安徽', value: randomData() },
            { name: '山东', value: randomData() },
            { name: '**', value: randomData() },
            { name: '江苏', value: randomData() },
            { name: '浙江', value: randomData() },
            { name: '江西', value: randomData() },
            { name: '湖北', value: randomData() },
            { name: '广西', value: randomData() },
            { name: '甘肃', value: randomData() },
            { name: '山西', value: randomData() },
            { name: '内蒙古', value: randomData() },
            { name: '陕西', value: randomData() },
            { name: '吉林', value: randomData() },
            { name: '福建', value: randomData() },
            { name: '贵州', value: randomData() },
            { name: '广东', value: randomData() },
            { name: '青海', value: randomData() },
            { name: '西藏', value: randomData() },
            { name: '四川', value: randomData() },
            { name: '宁夏', value: randomData() },
            { name: '海南', value: randomData() },
            { name: '**', value: randomData() },
            { name: '香港', value: randomData() },
            { name: '澳门', value: randomData() }
          ]
        },
        {
          name: 'iphone4',
          type: 'map',
          mapType: 'china',
          label: {
            normal: {
              show: true
            },
            emphasis: {
              show: true
            }
          },
          data: [
            { name: '北京', value: randomData() },
            { name: '天津', value: randomData() },
            { name: '上海', value: randomData() },
            { name: '重庆', value: randomData() },
            { name: '河北', value: randomData() },
            { name: '安徽', value: randomData() },
            { name: '**', value: randomData() },
            { name: '浙江', value: randomData() },
            { name: '江西', value: randomData() },
            { name: '山西', value: randomData() },
            { name: '内蒙古', value: randomData() },
            { name: '吉林', value: randomData() },
            { name: '福建', value: randomData() },
            { name: '广东', value: randomData() },
            { name: '西藏', value: randomData() },
            { name: '四川', value: randomData() },
            { name: '宁夏', value: randomData() },
            { name: '香港', value: randomData() },
            { name: '澳门', value: randomData() }
          ]
        },
        {
          name: 'iphone5',
          type: 'map',
          mapType: 'china',
          label: {
            normal: {
              show: true
            },
            emphasis: {
              show: true
            }
          },
          data: [
            { name: '北京', value: randomData() },
            { name: '天津', value: randomData() },
            { name: '上海', value: randomData() },
            { name: '广东', value: randomData() },
            { name: '**', value: randomData() },
            { name: '香港', value: randomData() },
            { name: '澳门', value: randomData() }
          ]
        }
      ]
    };
    return {
      map: option
    };
  }
};
</script>

<style lang="less" scoped>
.echarts {
  width: 100%;
  height: 600px;
}
</style>