如何使用china.json导入echarts地图-Toy模板网

这篇具有很好参考价值的文章主要介绍了如何使用china.json导入echarts地图。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

1、第一步引入china.json,（引入的是中国地图就导入中国地图json,导入省份地图就引入省份json）地图json获取地址
2、在里面注册地图,
```
`echarts.registerMap('china',chinaMap)`
```
这个括号里面的必须一一对应，前面是表示引入什么地图，后面是json文件
3、如果大家想在地图上改动，需要了解echarts里面的geo

china.json,echarts,json,前端

china.json,echarts,json,前端
这样就可以出现中国地图了
文章来源地址https://www.toymoban.com/news/detail-783315.html

3、配置地图颜色、悬浮、边框、显示标签+圆点设置等

 <template>
  <div style="flex:0 1 50%">
    <dv-border-box-1 id="asdf" style="width:100%;height:400px">
     
      
    </dv-border-box-1>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import ChinaMap from '@/assets/china.json'

export default {
  name:'ChinaMap',
  data(){
    return{

    }
  },
  mounted(){
    this.initChar()
  },
  methods:{
    initChar(){
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.querySelector('#asdf'));
      echarts.registerMap('china',ChinaMap);
      // 绘制图表
      // 指定图表的配置和数据
      var option ={
        geo:{
          show:true ,//是否显示
          type:'map',//类型是地图
          map:'china',//中国地图
          label:{ //设置字体样式
            show:true,  //字体是否显示
            fontSize:7, //设置字体大小
            color:'yellow' //设置字体颜色
          },
          itemStyle:{ //设置图形样式
            areaColor:'blue', //地图颜色
            borderWidth:3,//地图边框宽度
            borderColor:'#fff'//地图边框颜色
          },
          zoom:2,//地图放大到原来的多少倍
          emphasis:{ //高亮状态（鼠标放在哪里，哪里发生变化）
            label:{ //字体设置
              show:true,//显示字体
              color:'#2596cc',//字体颜色
              fontSize:14,//字体大小
            },
            itemStyle:{ //设置图像样式
              areaColor:'#ffffad',//设置地图背景颜色
              borderColor:'green',//设置边框颜色
              borderWidth:2,//边框宽度

            }
          }
          
        },
        series:[   //设置特效的
            {
              type:'effectScatter',//带有特效动画的散点图
              coordinateSystem:'geo',//该系列使用的坐标系
              rippleEffect:{//特效相关配置
                period:2,
                brushType:'stroke',
                scale:5,  //这个是设置类似于雷达波纹的大小的
              },
              label:{ //标签
                normal:{  //正常（默认）标签设置
                  show:true,  //标签显示
                  position:'right'//标签显示在右侧
                }
              },
              itemStyle:{
                color:'#fc5531' //圆点的颜色
              },
              Symbol:'circle',  //特效是圆
             // symbolSize:10,  //设置圆点的大小
             symbolSize:function(value){
                return value[2]
             },
              data:[  //数据
                {
                  name:'北京',
                  value:[116.4551, 40.2539,20,'#fc5531']
                },
                {
                  name:'长沙',
                  value:[113.0823, 28.2568,10,'#b34b62']
                }
              ]
              
            }
          ]
      };
      // 使用刚指定的配置项和数据显示图标
      myChart.setOption(option);
    }
  }
}
</script>

<style>

</style>