精华内容
下载资源
问答
  • 2021-03-14 21:43:21

    最近遇到项目需要使用使用geoJson数据在echarts上进行地图的绘制,仅使用此文记录学习的过程。

    首先需要在项目中引入echart相关依赖,在package.json中添加如下依赖:

    "echarts": "^4.8.0",

    可以简单分为以下几步

    ①首先定义节点,并命名id

    <div class="mychart" id="mychart"></div>

    ②导入数据,此处数据为geoJson格式的地图文件

    import geoJson from "@/assets/map1.json";

    ③初始化echarts并将echarts图表绑定至mychart节点

     this.myChart = echarts.init(document.getElementById("mychart"), "light");

    ④在echarts中注册地图并命名

    echarts.registerMap("jimo", this.jsonData);

    ⑤定义option,在option中对样式及相关属性进行个性化调整,并设置option属性

    var option = {
            backgroundColor: "#020933",
            title: {
              top: 20,
              text: "即墨市区县",
              subtext: "",
              x: "center",
              textStyle: {
                color: "#ccc",
              },
            },
    
            tooltip: {
              trigger: "item",
              axisPointer: {
                type: "cross",
                crossStyle: {
                  color: "#999",
                },
              },
              //设置提示框位置
              position: (point, params, dom, rect, size) => {
                return [point[0] - 60, point[1] - 120];
              },
              formatter: function (params) {
                console.log(params); // 当我们想要自定义提示框内容时,可以先将鼠标悬浮的数据打印出来,然后根据需求提取出来即可
                let name = params.name;
                let item = params.data.value;
                return `<div style="padding:0 10px; color: #fff; background-color: #001f55; "><div style="height: 20px; line-height: 20px; color: orange; font-weight: bold; ">${item.township}</div><div style="height: 20px; line-height: 20px; ">总人数:<span style="color: rgb(252,255,25)">${item.total_rural_population}</span>人</div><div style="height: 20px; line-height: 20px; ">村庄数:<span style="color: rgb(252,255,25)">${item.natural_village}</span>个</div><div style="height: 20px; line-height: 20px; ">实际供水量:<span style="color: rgb(252,255,25)">${item.actual_water_supply}</span>m³/d</div></div>`;
              },
            },
            
            geo: {
              map: "jimo",
              aspectScale: 0.75, //长宽比
              zoom: 1.1,
              roam: false,
              itemStyle: {
                normal: {
                  areaColor: "#013C62",
                  shadowColor: "#3399ff",
                  shadowBlur: 30,
                  shadowOffsetX: 19,
                  shadowOffsetY: 30,
                },
                emphasis: {
                  areaColor: "#2AB8FF",
                  borderWidth: 0,
                  color: "green",
                  label: {
                    show: false,
                  },
                },
              },
            },
            series: [
              {
                type: "map",
                roam: true,
                label: {
                  normal: {
                    show: true,
                    textStyle: {
                      color: "#fff",
                    },
                  },
                  emphasis: {
                    textStyle: {
                      color: "#fff",
                    },
                  },
                },
                itemStyle: {
                  normal: {
                    borderColor: "#2ab8ff",
                    borderWidth: 1.5,
                    areaColor: "#12235c",
                  },
                  emphasis: {
                    areaColor: "#2AB8FF",
                    borderWidth: 0,
                    color: "green",
                  },
                },
                roam: false,
                zoom: 1.1,
                map: "jimo", //使用
                data: this.countrylocList, //热力图数据   不同区域 不同的底色
              },
              
            ],
          };
          this.myChart.setOption(option);

    实现效果如下

    详细属性可参考echarts官网,相对于网络上的资源来说,echarts官方网站提供了详细的api接口以及教程,同时也有相应案例代码进行学习,可以节省大量查找资料的时间。

    更多相关内容
  • Echart 基于geo的3D柱状图

    千次阅读 2020-11-29 20:56:52
    echarts社区例子:ECharts Gallery - 3d地图画线1 (makeapie.com) 效果图: npm安装: npm install echarts npm install echarts-gl 引入方式: import echart from "echarts"; import "echarts-gl"; import ...

    echarts社区例子:ECharts Gallery - 3d地图画线1 (makeapie.com)

    效果图:

    npm安装:

    npm install echarts
    npm install echarts-gl

    引入方式:

    import echart from "echarts";
    import "echarts-gl";
    import "echarts/map/js/china";

    或者index.html cdn引入

    <!--echarts js文件 -->
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@4/dist/echarts.min.js"></script>
    <!--echarts-gl js文件 -->
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-gl@1/dist/echarts-gl.min.js"></script>
    <!-- bmap、china、world 的 js 文件 -->
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@4/dist/extension/bmap.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@4/map/js/china.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@4/map/js/world.js"></script>
    <!-- ecStat 的 js 文件 -->
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-stat@1/dist/ecStat.min.js"></script>
    <!-- dataTool 的 js 文件 -->
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@4/dist/extension/dataTool.min.js"></script>

    1.数据结构

          bPoint=[
                  {
                    name: "名字",//名字
                    value:[105.93318,//经度
                           37.981425,//纬度
                              2399//数值
                          ]
                  }],

    2.option配置

    <script>
    import echart from "echarts";
    import "echarts-gl";
    import "echarts/map/js/china";
    export default {
      data() {
        return {
          bPoint: [
                  {
                    name: "名字",
                    value:[105.93318,37.981425,2399]
                  }],
          sPoint: [
                  {
                    name: "名字",
                    value:[106.576627,38.159436,4887]
                  }],
        };
      },
      mounted() {
        this.getMapData();
      },
      methods: {
        getMapData() {
          // 绘制柱状图函数 geo底图
          this.drawBarChartGeo("map", this.bPoint,this.sPoint);
        },
        // 绘制柱状图函数 geo底图
        async drawBarChartGeo(name, bData,sData) {
          const { data: geoJSON } = await this.$http.get(
              "https://geo.datav.aliyun.com/areas/bound/geojson?code=100000_full"
          );
          // echart.registerMap('geoJSON', geoJSON);
          // 初始化
          const myChart = echart.init(document.getElementById(name));
          let option = {
            geo3D: {
              map: 'china',
              roam: true,
              itemStyle: {
                color: '#475368',
                opacity: 1,
                borderWidth: 0.4,
                borderColor: '#212429'
              },
              label: {
                show: true,
                textStyle: {
                  color: '#fff', //地图初始化区域字体颜色
                  fontSize: 10,
                  opacity: 1,
                  backgroundColor: 'rgba(0,23,11,0)'
                }
              },
              shading: 'lambert',
              light: { //光照阴影
                main: {
                  color: '#ffffff', //光照颜色
                  intensity: 1.2, //光照强度
                  //  shadowQuality: 'high', //阴影亮度
                  shadow: true, //是否显示阴影
                  alpha: 55,
                  beta: 10
    
                },
                ambient: {
                  intensity: 0.3
                }
              }
            },
            series: [
              //柱状图
              {
                name: "买家的柱状图",
                type: "bar3D",
                coordinateSystem: "geo3D",
                barSize: 0.4, //柱子粗细
                shading: "lambert",
                bevelSize: 0.3,
                minHeight:1,
                itemStyle: {
                  color:"#3678fc",
                  opacity: 1,
    
                },
                label: {
                  show: false,
                  formatter: (record) => {
                    return `${record.name}\n重量:${record.value[2].toFixed(2)}吨`;
                  },
                },
                data: bData,
              },
              //柱状图
              {
                name: "卖家家的柱状图",
                type: "bar3D",
                coordinateSystem: "geo3D",
                barSize: 0.4, //柱子粗细
                shading: "lambert",
                bevelSize: 0.3,
                minHeight:1,
                itemStyle: {
                  color:"#ffb526",
                  opacity: 1,
    
                },
                label: {
                  show: false,
                  formatter: (record) => {
                    return `${record.name}\n重量:${record.value[2].toFixed(2)}吨`;
                  },
                },
                data: sData,
              },
            ],
          };
          myChart.setOption(option);
          //地图点击事件
          // myChart.getZr().on('click', function (params) {});
        }
      }
    }
    </script>

    3.源码

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <title>基于geo的3D柱状图</title>
        <style>
            html, body, #app{
                width: 100%;
                height: 100%;
                margin: 0;
                padding: 0;
                position: absolute;
                background: black;
            }
            #map {
                width: 100%;
                height: 100%;
            }
        </style>
    </head>
    <body>
    <div id="app">
        <div id="map"></div>
    </div>
    </body>
    <!-- 引入 Vue -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <!-- 引入 axios -->
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <!--echarts js文件 -->
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@4/dist/echarts.min.js"></script>
    <!--echarts-gl js文件 -->
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-gl@1/dist/echarts-gl.min.js"></script>
    <!-- bmap、china、world 的 js 文件 -->
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@4/dist/extension/bmap.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@4/map/js/china.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@4/map/js/world.js"></script>
    <!-- ecStat 的 js 文件 -->
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-stat@1/dist/ecStat.min.js"></script>
    <!-- dataTool 的 js 文件 -->
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@4/dist/extension/dataTool.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data() {
                return {
                    bPoint: [
                        {
                            name: "名字",
                            value:[105.93318,37.981425,2399]
                        }],
                    sPoint: [
                        {
                            name: "名字",
                            value:[106.576627,38.159436,4887]
                        }],
                    drawer: false,
                    direction: 'rtl'
                };
            },
            mounted() {
                this.getMapData();
            },
            methods: {
                //   请求数据的函数
                getMapData() {
                    // 绘制柱状图函数 geo底图
                    this.drawBarChartGeo("map", this.bPoint, this.sPoint);
                },
                // 绘制柱状图函数 geo底图
                async drawBarChartGeo(name, bData, sData) {
                    const { data: geoJSON } = await axios.get(
                        "https://geo.datav.aliyun.com/areas/bound/geojson?code=100000_full"
                    );
                    // 初始化
                    const myChart = echarts.init(document.getElementById(name));
                    let option = {
                        geo3D: {
                            map: 'china',
                            roam: true,
                            itemStyle: {
                                color: '#475368',
                                opacity: 1,
                                borderWidth: 0.4,
                                borderColor: '#212429'
                            },
                            label: {
                                show: true,
                                textStyle: {
                                    color: '#fff', //地图初始化区域字体颜色
                                    fontSize: 10,
                                    opacity: 1,
                                    backgroundColor: 'rgba(0,23,11,0)'
                                }
                            },
                            shading: 'lambert',
                            light: { //光照阴影
                                main: {
                                    color: '#ffffff', //光照颜色
                                    intensity: 1.2, //光照强度
                                    //  shadowQuality: 'high', //阴影亮度
                                    shadow: true, //是否显示阴影
                                    alpha: 55,
                                    beta: 10
    
                                },
                                ambient: {
                                    intensity: 0.3
                                }
                            }
                        },
                        series: [
                            //柱状图
                            {
                                name: "买家的柱状图",
                                type: "bar3D",
                                coordinateSystem: "geo3D",
                                barSize: 0.4, //柱子粗细
                                shading: "lambert",
                                bevelSize: 0.3,
                                minHeight: 1,
                                itemStyle: {
                                    color: "#3678fc",
                                    opacity: 1,
    
                                },
                                label: {
                                    show: false,
                                    formatter: (record) => {
                                        return `${record.name}\n重量:${record.value[2].toFixed(2)}吨`;
                                    },
                                },
                                data: bData,
                            },
                            //柱状图
                            {
                                name: "卖家家的柱状图",
                                type: "bar3D",
                                coordinateSystem: "geo3D",
                                barSize: 0.4, //柱子粗细
                                shading: "lambert",
                                bevelSize: 0.3,
                                minHeight: 1,
                                itemStyle: {
                                    color: "#ffb526",
                                    opacity: 1,
    
                                },
                                label: {
                                    show: false,
                                    formatter: (record) => {
                                        return `${record.name}\n重量:${record.value[2].toFixed(2)}吨`;
                                    },
                                },
                                data: sData,
                            },
                        ],
                    };
                    myChart.setOption(option);
                    //地图点击事件
                    // myChart.getZr().on('click', function (params) {});
                }
            }
        })
    </script>
    </html>

    4.geojson数据来自:

    地图选择器 (aliyun.com)

    通过axios请求:https://geo.datav.aliyun.com/areas/bound/geojson?code=100000_full 获取geojson数据

    遇到什么问题,可留言,看到会尽快回复。

    展开全文
  • Echarts-地图GEO-map.zip

    2019-08-24 09:48:54
    Echarts地图中GEO的js文件,全国、以及各市的
  • qt 使用Echart 绘图

    2017-10-25 16:15:35
    qt echart 绘图 webview 解决qt4绘图问题
  • echart map 全国所有市级 geo js文件
  • 这一份是世界地图的JSON文件,国家名称为英文,不含中国省份的。该文件比较容易获得,也可以自行查找其他网页。
  • vue中用echarts 绘制geo 中国地图

    千次阅读 2021-06-17 11:10:18
    'Low'], realtime: false, calculable: true, inRange: { color: ['yellow','orange', 'red'] } }, geo: [{ // 绘制geo地图 map: "china", // 定义的数据名称 roam: true, aspectScale: 0.8, layoutCenter: ["50%",...

    前言

    由于5.X版本的echarts没有了map包,因此我先安装了5.1.1版本,再安装了4.9版本,并将4.9版本中的map包复制到了5.1.1版本里。

    绘制效果如下:
    1、省份根据数据值,展示不同颜色。
    2、具体城市展示大小不同的点
    3、前五名城市展示涟漪效果
    4、支持省份可点击
    在这里插入图片描述


    1、按需引入依赖

    // 第一步
    import * as echarts from 'echarts/core';
    import china from 'echarts/map/json/china.json' //重点,从4.9版本中拿到
    import {
        TitleComponent,
        ToolboxComponent,
        TooltipComponent,
        VisualMapComponent,
        GeoComponent
    } from 'echarts/components';
    import {
        MapChart
    } from 'echarts/charts';
    import {
        CanvasRenderer
    } from 'echarts/renderers';
    import 'echarts/extension/bmap/bmap'
    

    2、初始化

    // 第二步
    methods: {
       useEchart() {
       		// 数据来源echarts官网示例
    		var data = [
    		  {name: '海门', value: 9},
              {name: '鄂尔多斯', value: 12},
              {name: '招远', value: 12},
              {name: '舟山', value: 12},
              {name: '齐齐哈尔', value: 14},
             ]
             var geoCoordMap = {
              '海门':[121.15,31.89],
              '鄂尔多斯':[109.781327,39.608266],
              '招远':[120.38,37.35],
              '舟山':[122.207216,29.985295],
              '齐齐哈尔':[123.97,47.33],
             ]
             var convertData = function (data) {
              var res = [];
              for (var i = 0; i < data.length; i++) {
                  var geoCoord = geoCoordMap[data[i].name];
                  if (geoCoord) {
                      res.push({
                          name: data[i].name,
                          value: geoCoord.concat(data[i].value),
                          visualMap: false  // 具体的点,不用根据省份变颜色
                      });
                  }
              }
              return res;
          };
          echarts.use(
              [TitleComponent, ToolboxComponent, TooltipComponent, VisualMapComponent, GeoComponent, MapChart, CanvasRenderer]
          );
          var chartDom = document.getElementById('main');
          var myChart = echarts.init(chartDom);
          var option;
          // ......第三步
       }
    }
    

    3、绘制geo地图

    // 接上图第三步,在useEchart方法内
          echarts.registerMap('china', china);   // 定义这个地图数据为 ‘china’,后续会用
          myChart.setOption(option = {
            title: {
                text: '绘制地图',
            },
            tooltip: {
                trigger: 'item',
            },
            visualMap: {  // 根据数据展示不同颜色
                min: 0,
                max: 1200,
                text: ['High', 'Low'],
                realtime: false,
                calculable: true,
                inRange: {
                    color: ['yellow','orange', 'red']
                }
            },
            geo: [{   // 绘制geo地图
              map: "china", // 定义的数据名称
              roam: true, 
              aspectScale: 0.8, 
              layoutCenter: ["50%", "38%"],
              layoutSize: 370, 
              label: { // 基本的一些样式
                normal: {
                  show: true,
                  textStyle: {
                    color: "rgba(0, 0, 0, 0.9)",
                    fontSize: '8'
                  }
                },
                formatter:'{b} 数据量:<br/>{c}',
                emphasis: {
                  color: "#333"
                }
              },
              regions: [ //隐藏南海诸岛,可以不去掉,根据业务需求
                {
                  name: "南海诸岛",
                  itemStyle: {
                    // 隐藏地图
                    normal: {
                      opacity: 0, // 为 0 时不绘制该图形
                    }
                  },
                  label: {
                    show: false // 隐藏省份文案,false不隐藏
                  }
                },
              ],
            }],
            // ....第四步
           })
           option && myChart.setOption(option);
    

    此时,已经可以绘制出一个白底的中国地图,但这只是一个底图达不到业务需求,我们进行下一步。
    在这里插入图片描述


    4、配置series

    // 接上图第四步
     myChart.setOption(option = {
    	series: [
                {
                    name: '全国节点',
                    type: 'map',
                    roam: true,
                    mapType: 'china', // 自定义扩展图表类型
                    label: {
                        show: true
                    },
                    // geoIndex:'0', 先不加这个属性
                    data: [// 各省数据
                        {name: '湖北',value: 1510,title:'hubei'},
                        {name: '湖南',value: 222,title:'hunan'},
                        {name: '江西',value: 333,title:'jiangxi'},
                        {name: '安徽',value: 444,title:'anhui'},
                        {name: '云南',value: 555,title:'yunnan'},
                        {name: '广东',value: 666,title:'guangdong'},
                        {name: '福建',value: 421,title:'fujian'},
                        {name: '广西',value: 241,title:'guangxi'},
                        {name: '浙江',value: 234,title:'zhejiang'},
                        {name: '江苏',value: 341,title:'jiangsu'},
                        {name: '上海',value: 1134,title:'shanghai'},
                        {name: '海南',value: 351,title:'hainan'},
                        {name: '香港',value: 351,title:'xianggang'},
                        {name: '澳门',value: 61,title:'aomen'},
                        {name: '台湾',value: 136,title:'taiwan'},
                        {name: '贵州',value: 462,title:'guizhou'},
                        {name: '重庆',value: 462,title:'chongqing'},
                        {name: '宁夏',value: 32,title:'ningxia'},
                        {name: '四川',value: 342,title:'sichuan'},
                        {name: '新疆',value: 144,title:'xinjiang'},
                        {name: '西藏',value: 35,title:'xizang'},
                        {name: '青海',value: 33,title:'qinghai'},
                        {name: '甘肃',value: 312,title:'gansu'},
                        {name: '内蒙古',value: 1233,title:'neimenggu'},
                        {name: '陕西',value: 213,title:'shanxi1'},
                        {name: '北京',value: 3111,title:'beijing'},
                        {name: '辽宁',value: 232,title:'liaoning'},
                        {name: '黑龙江',value: 332,title:'heilongjiang'},
                        {name: '山西',value: 313,title:'shanxi'},
                        {name: '山东',value: 1833,title:'shandong'},
                        {name: '河北',value: 1283,title:'hebei'},
                        {name: '河南',value: 1233,title:'henan'},
                        {name: '吉林',value: 233,title:'jilin'},
                        {name: '天津',value: 323,title:'tianjin'},
                        {name: '南海诸岛',value: 0},
                    ],
                },
                 { // 下面内容可以在echarts官网示例中查看
                 	// 所有城市点
                    name: 'pm2.5',
                    type: 'scatter', //非涟漪效果
                    coordinateSystem: 'geo', // 官网是bmap 这里要改成geo
                    data: convertData(data),
                    encode: {
                        value: 2
                    },
                    symbolSize: function (val) {
                        return val[2] / 10;
                    },
                    label: {
                        formatter: '{b}',
                        position: 'right'
                    },
                    itemStyle: {
                        color: 'blue'
                    },
                    emphasis: {
                        label: {
                            show: true
                        }
                    }
                },
                {
                   // 前五名城市点
                    name: 'Top 5',
                    type: 'effectScatter', //涟漪效果
                    coordinateSystem: 'geo', // 官网是bmap 这里要改成geo
                    data: convertData(data.sort(function (a, b) {
                        return b.value - a.value;
                    }).slice(0, 6)),
                    encode: {
                        value: 2
                    },
                    symbolSize: function (val) {
                        return val[2] / 10;
                    },
                    showEffectOn: 'render',
                    rippleEffect: {
                        brushType: 'stroke'
                    },
                    hoverAnimation: true,
                    label: {
                        formatter: '{b}',
                        position: 'right',
                        show: true
                    },
                    itemStyle: {
                        color: 'blue',
                        shadowBlur: 10,
                        shadowColor: '#333'
                    },
                    zlevel: 1
                },
            ]
     })
    

    在这里插入图片描述

    此时,已经可以绘制出2张中国地图, 一张原来的白色geo的底图,但上面已经有了所有的点, 还有一张根据省份值变色的图。

    我们滚动鼠标发现,所有的点位 跟在geo图上, 而省份颜色却在series画的图上,我们需要让二者合并。
    因此,需要在series上添加 geoIndex:‘0’ 属性,

    在这里插入图片描述

    再运行一下,是不是很神奇。


    最后添加点击事件

    
    	option && myChart.setOption(option);
    	// 在这里
         myChart.on('click', function (params) {
           console.log(params);
           if(params.componentSubType === 'map'){ //判断点击的是点还是 省份
              console.log('点击了省份:' + params.data.name)
            }
         });
    

    echarts改版变化很频繁,还是需要根据业务需求,一点点的尝试吧。

    展开全文
  • 重庆echart地图

    2018-12-29 14:45:22
    重庆echart地图,因为 Echarts 官方不再提供地图数据的下载,在这里保存一份,供日后使用,重庆地图数据的 JSON 文件在 CSDN 上下载。可实现echart应用。
  • echarts-map echarts 绘制地图 连线 时间轴 热力图等 使用echarts绘制了地图、连线、散点图、热力图、时间轴等 ...在浏览器中输入 即可看到效果 heatmap2里写了一个异步加载,感觉写得不太好,如果有更好的写法的话可以...
  • echart 离线geo.json

    2022-06-10 14:46:05
    echart 离线geo.json
  • echart 实现 3d中国地图叠加 散点图 ,图表可任意拖拽
  • 使用Echarts绘制geo地图(案例)

    千次阅读 2021-07-19 11:26:02
    使用Echarts绘制geo地图(案例) 项目使用@vue/cli 4.5.13以及echarts版本为5.1.2。 需求:在省份地图上,将数据进行分段映射。如图: 首先下载geojson数据 链接: ...

    使用Echarts绘制geo地图(案例)

    项目使用@vue/cli 4.5.13以及echarts版本为5.1.2。
    需求:在省份地图上,将数据进行分段映射。如图
    在这里插入图片描述

    首先下载geojson数据

    链接: http://datav.aliyun.com/tools/atlas/index.html#&lat=33.521903996156105&lng=104.29849999999999&zoom=3
    在左侧点击所选择的区域,勾选是否包含子区域(是否显示各个市区域),然后直接下载即可。
    在这里插入图片描述
    下载后我将文件放入了libs文件夹下,并用export default输出:
    在这里插入图片描述

    接下来就是mapEcharts组件的基本代码

    <template>
      <div class="map" ref="mapChart"></div>
    </template>
    <script>
    //引入geo数据
    import zjData from "libs/china-zj";
    
    export default {
      methods: {
      	initMapChart() {
          const el = this.$refs.mapChart;
          const echarts = require("echarts");
          const myChart = echarts.init(el);
          echarts.registerMap("zj", zjData);
          
    	  const option = {
          //这里渲染地图
    	  }
    	  
          myChart.setOption(option);
          window.addEventListener("resize", function () {
            myChart.resize();
          });
        },
      },
      mounted() {
         this.initMapChart();
      },
    };
    </script>
    
    <style lang="less" scoped>
    .map {
      width: 100%;
      height: 100%;//要给指定高度,这里我在组件外加了固定高度,所以这里给了100%
    }
    </style>
    

    渲染地图的代码

    const option = {
    		//数据映射
            visualMap: {
              type: "piecewise",//分段标签
              min: 0,//最小值
              max: 50,//最大值,不设置为无限大
              right: 30,//距离右侧位置
              bottom: 30,//距离底部位置
              orient: "vertical",//组件竖直放置
              align: "left",//色块在左
              textGap: 14,//文字主体之间的距离
              itemSymbol: "circle",//右下角映射组件使用圆点形状
              show: true,
              seriesIndex: 0,//指定取哪个系列的数据(series.data),若不设置则会影响图上标点颜色设置。
              
              //一以下是分段式视觉映射组件的每一段的范围
              //gt:大于、gte:大于等于、lt:小于、lte:小于等于。
              pieces: [
                {
                  gt: 5,
                  label: "5个以上",
                  color: "#1492FF",
                },
                {
                  gte: 2,
                  lte: 5,
                  label: "2-5个",
                  color: "#59AAF5",
                },
                {
                  gte: 0,
                  lt: 2,
                  label: "0-2个",
                  color: "#99CBF9",
                },
              ],
              /*
              pieces或者inRange内设置颜色试验时都能生效,个人认为需要传入组件控制颜色时
              再选择用inRange,两个都存在并给予不同的颜色,显示以pieces为主。
              */
              //inRange: {
              //    color: ["#99CBF9", "#59AAF5", "#1492FF"],
              //},
            },
            geo: {
              map: "zj",//上面引入的数据名
              show: true,
              roam: false,//关闭拖拽
              label: {  //地图显示的地点名
                show: true,
                color: "#fff",
                fontSize: 16,
              },
              itemStyle: { 
                areaColor: "#99CBF9", //地图区域的颜色(没有数据时会按照这个颜色显示)
                borderColor: "#fff",  //地图区域的边框
                borderWidth: 0.6,
              },
              emphasis: {  //高亮的显示设置
                label: {
                  color: "#fff",
                },
                itemStyle: {
                  areaColor: "#9DE3FF",
                },
              },
              select: { //选中显示设置
                label: {
                  color: "#fff",
                },
                itemStyle: {
                  areaColor: "#9DE3FF",
                },
              },
            },
            series: [
            //配置数据的显示
              {
                type: "map",  //类型map
                geoIndex: 0, //指定geo属性后,series-map.map 属性,以及 series-map.itemStyle 等样式配置不再起作用,而是采用 geo 中的相应属性。
                data:[{name: "杭州市",value: 6},
                {name: "湖州市",value: 0},
                {name: "嘉兴市",value: 0},
                {name: "金华市",value: 0},
                {name: "丽水市",value: 0},
                {name: "宁波市",value: 0},
                {name: "衢州市",value: 0},
                {name: "绍兴市",value: 0},
                {name: "台州市",value: 0},
                {name: "温州市",value: 0},
                {name: "舟山市",value: 0}],
              },
            //以下配置了图中白色标记圆点的显示
              {
                type: "scatter", //类型:散点
                coordinateSystem: "geo", //使用地理坐标系
                itemStyle: {
                  color: {
                    type: "radial", // 径向渐变,前三个参数分别是圆心 x, y 和半径
                    x: 0.5,
                    y: 0.5,
                    r: 0.5,
                    colorStops: [
                      {
                        offset: 0.5,
                        color: "#fff", // 50% 处的颜色
                      },
                      {
                        offset: 1,
                        color: "rgb(0 0 0 / 0%)", // 100% 处的颜色
                      },
                    ],
                    global: false, // 缺省为 false
                  },
                  borderColor: "#fff", //边框白色
                  borderWidth: 1,      //边框宽度
                },
                symbolSize: 10,    //散点大小
                data: [
                  { name: "杭州市", value: [119.5035076, 29.703459] },
                  { name: "宁波市", value: [121.579792, 29.468388] },
                  { name: "温州市", value: [120.452111, 27.700575] },
                  { name: "嘉兴市", value: [120.770865, 30.500653] },
                  { name: "湖州市", value: [119.882398, 30.607198] },
                  { name: "绍兴市", value: [120.582112, 29.597117] },
                  { name: "金华市", value: [120.009506, 28.950024] },
                  { name: "衢州市", value: [118.67263, 28.681708] },
                  { name: "舟山市", value: [122.106863, 30.016028] },
                  { name: "台州市", value: [121.128599, 28.561378] },
                  { name: "丽水市", value: [119.571786, 28.001993] },
                ],
                zlevel: 1,
              },
            ],
          };
    

    需要注意的问题

    1.遇到更改scatter或effectScatter颜色不生效问题

    按照官网文档写那些白色标点的时候一直都是默认颜色,写的任何颜色都不生效,经查询发现有人说echarts中visualMap的优先级是最高的需要添加在visualMap中指定seriesIndex来解决,指定取哪个系列的数据他们将会互相影响,其他则不会受影响。试了一下果然ok👌🏻了。

    2.浏览器显示警告⚠️

    第一次加载的时候不显示,再次刷新会显示:dom上已经初始化了一个图表实例。
    如图:在这里插入图片描述
    这里我的处理方法是在初始化之前加上一句下面的代码,来销毁实例。

    this.$echarts.dispose(this.$refs["mapChart"]);
    

    但是感觉应该会有更好的解决办法,如果有想法或者以上代码哪里有可以优化的建议欢迎留言😛~

    展开全文
  • export function toCeil (value, num) { let val = Math.ceil(value * Math.pow(10, num)) / Math.pow(10, num) + '' if (num > 0) { const intp = val.split('.')[0] const decp = val.split('.')[1] || '' ...
  • { color: "#fff", }, }, name: "light", type: "scatter", coordinateSystem: "geo", data: convertData1(data), }, { name: "Top 5", type: "scatter", coordinateSystem: "geo", symbol: "pin", symbolSize: [50,...
  • Qt编写地图综合应用25-echart动态交互

    千次阅读 2021-01-25 09:10:39
    之前用echart组件做过各种效果,随着各种现场应用现场项目的增多,各种需求也都慢慢增加起来,为了满足各种不同类型的需求,近期又抽空重新整理和封装了echart类,主要就是增加了不少的js函数处理,增加了各种属性和...
  • echarts的 geojson 中国城市经纬度,由于echarts3.0不再提供,整理发出
  • echarts + echarts-gl - 使用geo3D + map3D + scatter3D做3d地图 一、使用插件 echarts@5.2.2、echarts-gl@2.0.8、jquery;jquery 是使用ajax加载json文件的。 二、准备地图json文件 因为找了一圈,网上的地图js文件...
  • Echarts地图geoJson格式全国行政边界线(省、市、区县) 100000.geoJson110000.geoJson。。。。。。。等等519个文件
  • echarts 地图geogeo3D 下穿

    千次阅读 热门讨论 2019-11-16 14:26:29
    geo: { map: geoName, left: myposition, top: 30, roam: true, zoom: 1, regions: regionsData[n], label: { show: geoName == 'chongqing_bananqu' ? true : false, formatter: function (ad) { ...
  • echart离线地图 geo.json文件
  • geo3D地图背景纹理 属性 colorMaterial 官方详细介绍 注意: 使用在colorMaterial属性仅在 shading属性为'color'时有效。 geo3D: { map: `海南`, shading: `color`, colorMaterial: { detailTexture: this....
  • echarts社区地图、echart地图

    千次阅读 2022-02-10 09:32:05
    echarts社区地图、echart地图
  • echarts结合geo绘制地图热点图

    千次阅读 2021-03-10 00:29:02
    '修文县', value: [106.59487,26.83783, 6]}, {name: '息烽县', value: [106.738,27.09346, 6]}, {name: '开阳县', value: [106.9692,27.05533, 5]}, ] var option = { geo: { map: '贵阳', ...
  • 二、echart设置地图外边框 为了方便起见,其他的冗余代码我就省略了,只展示关键代码 var option={ geo: [{ zlevel:2,//geo显示级别,默认是0 map: 'china',//地图名 roam: false,//设置为false,不启动...
  • (1)只好安装低版本 npm install echarts-gl@1.1.0 -S (2)import引入依赖 import 'echarts-gl' 这个时候,根据我们自己写的geo3D配置,就可以展示地图了 三、设置区域regions 我们要实现点击某块区域,该区域呈...
  • echarts map3d,geo3D以及加柱状图

    千次阅读 热门讨论 2020-01-07 20:17:05
    一、geo 3d 不支持visualMap,只是显示地理3D图,可以在上面绘制 柱状图,即省份区域是没办法根据数据进行visualMap变色的。 效果图: 可以显示各个省份的地图。 二。map 3D 加柱状图 map3D 是支持v...
  • 需求:从地面发射飞线到天空,看了官方文档把坐标设置为geo3d ![图片说明](https://img-ask.csdn.net/upload/202010/15/1602730686_209802.png) 不过设置之后又报错 ![图片说明]...
  • 结果:不同的区域展示不同的颜色,比如 北京是蓝色、河北是粉色 、山东是红色、河南是绿色
  • 在做GEO-Heatmap时是不是遇到过如下情况: # 新建GEO实例 geo = Geo( init_opts=opts.InitOpts( theme='light', width='980px', height='800px' ) ) data_pair = [] for idx, data_item in enumerate(data): ...
  • coordinateSystem: "geo", // 坐标系 itemStyle: { color: "transparent" // 散点图标记点 }, label: { normal: { show: false, // 这个是关键点, 默认显示 false formatter: function(params) { return ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,898
精华内容 759
关键字:

echart geo