• Echarts地图绘制(散点,色卡)


        echarts绘制地图时,提供了js内部注册,也提供了json数据手动注册,这两种都可以绘制对应地图,但有一点不同的是,js内部只注册了中国地图和世界地图,而json数据提供了世界,中国,中国城市的数据

       手动注册:引入json数据,使用 echarts.registerMap('china', chinaJSON);就可以绘制中国地图了

       由于echarts提供的geoJSON数据过少,当我们想绘制中国城市甚至是城市的每个区的时候,我们就需要自定义geoJSON数据

       提供geoJSON数据的网站: http://datav.aliyun.com/tools/atlas/#&lat=33.578014746143985&lng=104.23828125&zoom=3

       该网站提供了中国省,市,县,地区的geoJSON数据,这样我们就可以自定义绘制对应地图了

       

       散点

       绘制地图完成后,可以在上面设置散点图,根据echarts的配置进行设置

       backgroundColor=“#ccc” // 地图的背景颜色

       geo = {  // 地图相关配置

          map: “china” ,  //  “china”是注册地图时使用的名称

         roam: true,  // 地图是否可以缩放

        itemStyle: {   // 地图区域的配置

            normal: {

                  areaColor: '#323c48',  // 绘制的每一个轮廓的背景颜色

                  borderColor: '#111'

            },

            emphasis: {

              areaColor: '#2a333d',// 鼠标移到区域时的背景颜色

           },

          }

         ...  // 更多配置可以查看官网

        };  

       visualMap = {  // 视觉映射配置

          show: true,  // 颜色渐变条是否显示

         color: ["", "", ""],  // 渐变的颜色集合

         textStyle: {  // 地图上的样式,比如,字体颜色,大小

            color: #fff, 

        },

       };

       series = [{

          type: "scatter" ,  // 类型为散点图

          coordinateSystem: 'geo',   // 使用该坐标系,映射到地图上

          data: [[121.221, 23.43, 12]], //散点的数据

          symbolSize: 5,  // 散点的大小

       }];

      色卡

        绘制地图完成后,可以在上面根据绘制的区域进行着色,根据echarts的配置进行设置

          background='#ccc';  // 地图背景颜色

          visualMap={

             type: 'continuous',  // 颜色渐变条为连续还是分段 (continuous 或 piecewise)

             min: 0,   // 渐变的最小值

            max: 100,  // 渐变的最大值

           show: true,  // 是否展示渐变条

           inRange:  {  // 渐变颜色范围

             color: ['#00FA9A', '#00FF7F', '#7FFF00' ],

          },

          textStyle: {  // 地图上的样式

            color: '#fff',

        };

        series=[{

           type: 'map',  // 类型为地图

           map: 'china',   // 该值为注册地图时的名称

           roam: true,  // 允许地图缩放

           data: [{ name: '北京', value: 10 }], // 每一个数据的name与注册地图的geoJSON里的name对应,不然映射不了

          itemStyle: {   // 地图区域的配置

            normal: {

                  areaColor: '#323c48',  // 绘制的每一个轮廓的背景颜色

                  borderColor: '#111'

            },

            emphasis: {

              areaColor: '#2a333d',// 鼠标移到区域时的背景颜色

           },

        }];

        更多配置请查看echarts官网: http://www.echartsjs.com/index.html

  • 相关阅读:
    解决小问题VC2008通过ADO连接ACCESS (转)
    给zblog站点备份和搬家
    vc中自定义编译时的输出消息 .
    更改MFC 对话框控件的tab顺序
    dotnetbar 添加到工具栏方法
    关于完成端口IOCP异步接收连接函数AcceptEx注意事项 (转)
    中英文url解码vc++源程序
    c#关于网页内容抓取,简单爬虫的实现。(包括动态,静态的)
    图解使用Broadcom Advanced Control Suite 2设置Broadcom单网卡跨多VLAN(转)
    windbg调试环境变量记录
  • 原文地址:https://www.cnblogs.com/yezi-dream/p/10088517.html
Copyright © 2020-2023  润新知