如何使用china.json导入echarts地图

如何使用china.json导入echarts地图

  • 1、第一步引入china.json,(引入的是中国地图就导入中国地图json,导入省份地图就引入省份json) 地图json获取地址
  • 2、在里面注册地图,
  • `echarts.registerMap('china',chinaMap)`
    

    这个括号里面的必须一一对应,前面是表示引入什么地图,后面是json文件

  • 3、如果大家想在地图上改动,需要了解echarts里面的geo

  • 这样就可以出现中国地图了

    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:'#2596***',//字体颜色
                  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>
    
转载请说明出处内容投诉
CSS教程_站长资源网 » 如何使用china.json导入echarts地图

发表评论

欢迎 访客 发表评论

一个令你着迷的主题!

查看演示 官网购买