实现echats地图

最新推荐文章于 2024-06-11 21:36:57 发布
最新推荐文章于 2024-06-11 21:36:57 发布
阅读量205 收藏
点赞数 1
文章标签： echarts javascript vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_48357279/article/details/129829507
版权

当一个项目需要用echarts做地图时 会觉得相当棘手
身为前端cv工程师 我在网上找到一个jq版本引入echarts地图的版本 由于项目不用jq 所以我将其转化为vue的版本 效果图如下:
image.png

首先 需要在根目录HTML下引入CDN

image.png

<script src="https://webapi.amap.com/maps?v=1.3&key=73cddabc2173e0166a622f4483d3592a&plugin=AMap.DistrictSearch"></script>
    <script src="https://webapi.amap.com/maps?v=1.3&key=73cddabc2173e0166a622f4483d3592a" type="text/javascript"></script> 
    <script src="https://webapi.amap.com/ui/1.0/main.js"></script>
    <script src="https://echarts.baidu.com/resource/echarts-gl-latest/dist/echarts-gl.min.js"></script>

在创建自己的组件 当然此demo可以层级跳转

<template>

  <div ref="charts"
    id="chart-panel"
    >
    <div class="back">返 回</div>
  </div>

</template>
           
<script>
import * as echarts from 'echarts';
export default {
  name: '',
  data() {
    return {
      geoJson: {},
      parentInfo: [{ cityName: '全国', code: 100000 }],
      currentIndex: 0,
      timeTitle: ['2015', '2016', '2017', '2018', '2019'],
    };
  },
  created() {
    this.$nextTick(() => {
      this.initCharts();
    });
  },
  computed: {},
  methods: {
    initCharts() {
      this.init(100000);
    },
    init(adcode) {
      this.getGeoJson(adcode).then((data) => {
        this.geoJson = data;
        console.log(data, '123123');
        this.getMapData();
      });
    },
    // 获取省市区
    getGeoJson(adcode, childAdcode = '') {
      return new Promise((resolve, reject) => {
        function insideFun(adcode, childAdcode) {
          AMapUI.loadUI(['geo/DistrictExplorer'], (DistrictExplorer) => {
            var districtExplorer = new DistrictExplorer();
            districtExplorer.loadAreaNode(adcode, function (error, areaNode) {
              if (error) {
                console.error(error);
                reject(error);
                return;
              }
              let Json = areaNode.getSubFeatures();
              if (Json.length === 0) {
                let parent = areaNode._data.geoData.parent.properties.acroutes;
                insideFun(parent[parent.length - 1], adcode);
                return;
              }
              if (childAdcode) {
                Json = Json.filter((item) => {
                  return item.properties.adcode == childAdcode;
                });
              }
              let mapJson = {
                features: Json,
              };
              resolve(mapJson);
            });
          });
        }
        insideFun(adcode, childAdcode);
      });
    },
    // 封装数据
    getMapData() {
      let mapData = [],
        pointData = [],
        sum = 0;
      this.geoJson.features.forEach((item) => {
        let value = Math.random() * 3000;
        mapData.push({
          name: item.properties.name,
          value: value,
          cityCode: item.properties.adcode,
        });
        pointData.push({
          name: item.properties.name,
          value: [item.properties.center[0], item.properties.center[1], value],
          cityCode: item.properties.adcode,
        });
        sum += value;
      });
      mapData = mapData.sort(function (a, b) {
        return b.value - a.value;
      });
      this.initEchartMap(mapData, sum, pointData);
      console.log(mapData, 111);
      console.log(sum, 222);
      console.log(pointData, 333);
    },
    initEchartMap(mapData, sum, pointData) {
      var myChart = echarts.init(this.$refs['charts']);
      var xData = [],
        yData = [];
      var min = mapData[mapData.length - 1].value;
      var max = mapData[0].value;
      if (mapData.length === 1) {
        min = 0;
      }
      mapData.forEach((c) => {
        xData.unshift(c.name.replace(/(省|市|自治区|回族|维吾尔|壮族|特别行政区)/g, ''));
        yData.unshift(c.value);
      });
      //这里做个切换，全国的时候才显示南海诸岛  只有当注册的名字为china的时候才会显示南海诸岛
      echarts.registerMap(this.parentInfo.length === 1 ? 'china' : 'map', this.geoJson);

      var option = {
        // 正下方时间自动轮播
        // timeline: {
        //   data: this.timeTitle,
        //   axisType: 'category',
        //   autoPlay: true,
        //   playInterval: 5000,
        //   left: '10%',
        //   right: '10%',
        //   bottom: '2%',
        //   width: '80%',
        //   label: {
        //     normal: {
        //       textStyle: {
        //         color: 'rgb(179, 239, 255)'
        //       }
        //     },
        //     emphasis: {
        //       textStyle: {
        //         color: '#fff'
        //       }
        //     }
        //   },
        //   this.currentIndex: this.currentIndex,
        //   symbolSize: 10,
        //   lineStyle: {
        //     color: '#8df4f4'
        //   },
        //   checkpointStyle: {
        //     borderColor: '#8df4f4',
        //     color: '#53D9FF',
        //     borderWidth: 2,
        //   },
        //   controlStyle: {
        //     showNextBtn: true,
        //     showPrevBtn: true,
        //     normal: {
        //       color: '#53D9FF',
        //       borderColor: '#53D9FF'
        //     },
        //     emphasis: {
        //       color: 'rgb(58,115,192)',
        //       borderColor: 'rgb(58,115,192)'
        //     }
        //   },
        // },
        baseOption: {
          // backgroundColor: '#012248',
          title: [
            {
              left: 'center',
              top: 20,
              text:
                this.parentInfo[this.parentInfo.length - 1].cityName + '销售额统计图(可点击到县)',
              textStyle: {
                color: '#b3efff',
                fontSize: 16,
              },
            },
            {
              text: '销售总额：' + sum.toFixed(2) + '万',
              left: 'center',
              top: 45,
              textStyle: {
                color: '#FFAC50',
                fontSize: 20,
              },
            },
          ],
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'none', // 默认为直线，可选为：'line' | 'shadow'
            },
          },
          legend: {
            show: true,
            icon: 'roundRect',
            itemWidth: 25,
            itemHeight: 15,
            itemGap: 9,
            bottom: '10',
            right: '20',
            textStyle: {
              fontSize: 14,
              color: '#b3efff',
            },
            data: ['单数', '销售额'],
          },
          grid: [
            {
              show: false,
              right: '21%',
              top: '12%',
              bottom: '8%',
              containLabel: true,
              width: '15%',
            },
            {
              show: false,
              right: '18.5%', //调整中间文字位置
              top: '14%', //使中间文字对齐
              bottom: '8%',
              width: '0%',
            },
            {
              show: false,
              right: '2%',
              top: '12%',
              bottom: '8%',
              containLabel: true,
              width: '15%',
            },
          ],
          toolbox: {
            feature: {
              restore: {
                show: false,
              },
              dataView: {
                show: false,
              },
              saveAsImage: {
                name: this.parentInfo[this.parentInfo.length - 1].cityName + '销售额统计图',
              },
              dataZoom: {
                show: false,
              },
              magicType: {
                show: false,
              },
            },
            iconStyle: {
              normal: {
                borderColor: '#1990DA', //右上角下载的颜色
              },
            },
            top: 15,
            right: 35,
          },
          geo: {
            map: this.parentInfo.length === 1 ? 'china' : 'map',
            zoom: 1.1,
            roam: true,
            left: '10%',
            top: '15%',
            tooltip: {
              trigger: 'item',
              formatter: (p) => {
                let val = p.value[2];
                if (window.isNaN(val)) {
                  val = 0;
                }
                let txtCon =
                  "<div style='text-align:left'>" +
                  p.name +
                  ':<br />单数：' +
                  val.toFixed(2) +
                  '单<br />销售额：' +
                  val.toFixed(2) +
                  '万</div>';
                return txtCon;
              },
            },
            label: {
              normal: {
                show: true,
                color: '#f9f9f9', //省份标签字体颜色
                formatter: (p) => {
                  switch (p.name) {
                    case '内蒙古自治区':
                      p.name = '内蒙古';
                      break;
                    case '西藏自治区':
                      p.name = '西藏';
                      break;
                    case '新疆维吾尔自治区':
                      p.name = '新疆';
                      break;
                    case '宁夏回族自治区':
                      p.name = '宁夏';
                      break;
                    case '广西壮族自治区':
                      p.name = '广西';
                      break;
                    case '香港特别行政区':
                      p.name = '香港';
                      break;
                    case '澳门特别行政区':
                      p.name = '澳门';
                      break;
                  }
                  return p.name;
                },
              },
              emphasis: {
                show: true,
                color: '#f75a00',
              },
            },
            itemStyle: {
              normal: {
                areaColor: '#24CFF4',
                borderColor: '#53D9FF',
                borderWidth: 1.3,
                shadowBlur: 15,
                shadowColor: '#3a73c0',
                shadowOffsetX: 7,
                shadowOffsetY: 6,
              },
              emphasis: {
                areaColor: '#8dd7fc',
                borderWidth: 1.6,
                shadowBlur: 25,
              },
            },
          },
          visualMap: {
            //右下角
            min: min,
            max: max,
            left: '3%',
            bottom: '5%',
            calculable: true,
            seriesIndex: [0],
            inRange: {
              color: ['#24CFF4', '#2E98CA', '#1E62AC'],
            },
            textStyle: {
              color: '#24CFF4',
            },
          },
          xAxis: [
            {
              type: 'value',
              inverse: true, //是否是反向坐标轴。
              scale: true,
              position: 'top',
              boundaryGap: false,
              splitLine: {
                show: false,
              },
              axisLine: {
                show: true,
                lineStyle: {
                  color: '#455B77',
                },
              },
              axisTick: {
                show: true,
              },
              axisLabel: {
                show: true,
                lineStyle: {
                  color: 'rgba(255,255,255,0.2)',
                },
                margin: 2,
                textStyle: {
                  color: '#c0e6f9',
                },
              },
            },
            {
              gridIndex: 1,
              show: false,
            },
            {
              gridIndex: 2,
              type: 'value',
              inverse: false, //是否是反向坐标轴。
              scale: true,
              position: 'top',
              boundaryGap: false,
              splitLine: {
                show: false,
              },
              axisLine: {
                show: true,
                lineStyle: {
                  color: '#455B77',
                },
              },
              axisTick: {
                show: true,
              },
              axisLabel: {
                show: true,
                lineStyle: {
                  color: 'rgba(255,255,255,0.2)',
                },
                margin: 2,
                textStyle: {
                  color: '#c0e6f9',
                },
              },
            },
          ],
          yAxis: [
            {
              type: 'category',
              inverse: false,
              position: 'right',
              nameGap: 16,
              axisLine: {
                show: true,
                lineStyle: {
                  color: '#455B77',
                },
              },
              axisTick: {
                show: false,
              },
              axisLabel: {
                show: false,
              },
              data: xData,
            },
            {
              gridIndex: 1,
              type: 'category',
              inverse: false,
              position: 'center',
              nameGap: 16,
              axisLine: {
                show: false,
              },
              axisTick: {
                show: false,
              },
              axisLabel: {
                show: true,
                textStyle: {
                  color: '#c0e6f9',
                  fontSize: 12,
                  align: 'center',
                },
              },
              data: xData,
            },
            {
              gridIndex: 2,
              type: 'category',
              inverse: false,
              position: 'left',
              nameGap: 16,
              axisLine: {
                show: true,
                lineStyle: {
                  color: '#455B77',
                },
              },
              axisTick: {
                show: false,
              },
              axisLabel: {
                show: false,
              },
              data: xData,
            },
          ],
          series: [
            {
              //最外层鼠标经过显示的黑框
              name: this.timeTitle[this.currentIndex] + '年销售额度',
              type: 'map',
              geoIndex: 0,
              map: this.parentInfo.length === 1 ? 'china' : 'map',
              roam: true,
              zoom: 1.3,
              tooltip: {
                trigger: 'item',
                formatter: (p) => {
                  let val = p.value;
                  if (p.name == '南海诸岛') return;
                  if (window.isNaN(val)) {
                    val = 0;
                  }
                  let txtCon =
                    "<div style='text-align:left'>" +
                    p.name +
                    ':<br />单数：' +
                    val.toFixed(2) +
                    '单<br />销售额：' +
                    val.toFixed(2) +
                    '万</div>';
                  return txtCon;
                },
              },
              label: {
                normal: {
                  formatter: function (data) {
                    return '4';
                  },
                  show: true,
                  position: 'right',
                  distance: 5,
                  color: 'white',
                  backgroundColor: '#1D3039',
                  padding: 10,
                  borderRadius: 20,
                  // show: false,
                },
                emphasis: {
                  show: false,
                },
              },
              data: mapData,
            },
            {
              name: '散点',
              type: 'effectScatter',
              coordinateSystem: 'geo',
              rippleEffect: {
                brushType: 'fill',
              },
              itemStyle: {
                normal: {
                  color: '#F4E925',
                  shadowBlur: 10,
                  shadowColor: '#333',
                },
              },
              data: pointData,
              symbolSize: function (val) {
                let value = val[2];
                if (value == max) {
                  return 27;
                }
                return 10;
              },
              showEffectOn: 'render', //加载完毕显示特效
            },
            {
              name: '单数',
              type: 'bar',
              barGap: '-100%',
              barCategoryGap: '60%',
              stack: 'left',
              label: {
                show: true,
                fontSize: 10,
                distance: 10,
                color: '#fff',
                position: 'left', //inside|right
                formatter: (params) => {
                  return params.value.toFixed(2);
                },
              },
              itemStyle: {
                normal: {
                  barBorderRadius: 30,
                  color: new echarts.graphic.LinearGradient(0, 1, 1, 1, [
                    { offset: 0, color: '#EB3B5A' },
                    { offset: 1, color: '#FE9C5A' },
                  ]),
                },
                emphasis: {
                  show: false,
                },
              },
              data: yData,
            },
            {
              name: '销售额',
              type: 'bar',
              barGap: '-100%',
              barCategoryGap: '60%',
              stack: 'right',
              xAxisIndex: 2,
              yAxisIndex: 2,
              label: {
                show: true,
                fontSize: 10,
                distance: 10,
                color: '#fff',
                position: 'right', //inside|right
                formatter: (params) => {
                  return params.value.toFixed(2);
                },
              },
              itemStyle: {
                normal: {
                  barBorderRadius: 30,
                  color: new echarts.graphic.LinearGradient(0, 1, 1, 1, [
                    { offset: 0, color: '#395CFE' },
                    { offset: 1, color: '#2EC7CF' },
                  ]),
                },
                emphasis: {
                  show: false,
                },
              },
              data: yData,
            },
          ],
        },
      };
      myChart.setOption(option, true);
      //点击前解绑，防止点击事件触发多次
      myChart.off('click');
      myChart.on('click', this.echartsMapClick);
      //监听时间切换事件
      myChart.off('timelinechanged');
      myChart.on('timelinechanged', (params) => {
        this.currentIndex = params.this.currentIndex;
        getMapData();
      });
    },
    echartsMapClick(params) {
      // $('.back').css({ cursor: 'pointer', opacity: '1' });
      if (!params.data) {
        return;
      } else {
        //如果当前是最后一级，那就直接return
        if (this.parentInfo[this.parentInfo.length - 1].code == params.data.cityCode) {
          return;
        }
        let data = params.data;
        this.parentInfo.push({
          cityName: data.name,
          code: data.cityCode,
        });
        this.init(data.cityCode);
      }
    },
  },
};
</script>
<style lang='scss'  scoped>
#chart-panel {
  width: 100%;
  height: 1900px;
  height: 770px;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin-top: 10px;
  background-size: 100% auto;
  background-color: #0e0e29;
}
#chart-panel .back {
  opacity: 0.5;
  position: absolute;
  left: 25px;
  top: 20px;
  color: #b3efff;
  font-size: 16px;
  cursor: not-allowed;
  z-index: 100;
}
</style>

第一次做 希望大佬可以留下宝贵的建议

nz一只肥猫
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
echarts社区地图、echart地图
m0_67402026的博客
03-03 1595
文章目录 地图时间轴多样 3D地图+拖拽+扫描特效+自转+4.9.0及以下版本才能用 气泡地图+圆点会动 地图上+柱图 地图上+气泡 地图+图例 地图时间轴多样 var uploadedDataURL = "/asset/get/s/data-1528971808162-BkOXf61WX.json"; var geoGpsMap = { '1': [127.9688, 45.368], '2': [116.4551, 40.2539], '3': [
echarts地图
liuy_1314的博客
08-11 2140
这里写目录标题需求数据格式渲染地图函数地图展示三种类型的数据鼠标悬浮在某个定位点，显示相关详情数据；放大缩小限制整合一下，就是这样的效果如图根据搜索的数据，显示当前的定位点及其相关数据；点击下拉框的li，重新渲染地图搜索图标的点击事件 需求 1.地图展示三种类型的数据； 2.鼠标悬浮在某个定位点，显示相关详情数据； 3.根据搜索的数据，显示当前的定位点及其相关数据； 4.放大缩小限制 数据格式 var qn=[ { "name": "党校", "value": [
Echarts 绘制地图（中国、省市、区县），保姆级教程！
最新发布
共同学习，共同成长
06-11 1万+
这篇讲述 Vue+Echarts 绘制地图（中国、省市、区县），保姆级教程！
地图（用ECharts绘制）
我的博客
08-18 2698
目录 基本实现 1.ECharts最基本的代码结构 2.准备中国地图的矢量数据 3.使用Ajax获取矢量地图数据 4.在Ajax的回调函数中注册地图矢量数据，名字为chinaMap 5.配置geo的type为'map'，map为'chinaMap' <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Comp
echarts自定义地图
hexu_blog的博客
06-22 5218
先看看效果 拿到需求后，作为一个java后台开发人员，突然去搞这前端，感觉有点麻烦的。但事情总要有人做，硬着头皮上吧? 地图有两个难点 1.地图 效果看上去像3d地图，当使用3d地图实现不了所需要的边框效果和背景颜色。 2.地图是乡镇级别的，甚至乡镇级别中让我自己去划分街道的。 如何解决。直接上代码开讲吧 第一步：获取前乡镇级别的经纬度 1.下载BigemapGIS Designer，下载地址：http://www.bigemap.com/reader/download/，选择全能版..
echarts地图资源
12-06
echarts map 资源,含全世界；中国；省；市地区的地图 ；json .js都有），echarts官网上都挺详细的，唯一难受的地方就是echarts的地图数据都下架了，数据或许不是很精确，所以仅供大家参考。有问题可以联系
实现echarts地图省市县三级下钻
03-08
基于html 或可在vue下的实现页面展示效果，可直接放入操作软件上，更改路径便可实现效果，如样式需要更改也可在对应位置进行更改
echarts地图飞线实现
06-25
在“echarts地图飞线实现”这个主题中，我们将深入探讨如何使用ECharts来创建动态的地图线行展示，使得数据的流动和交互更加直观、生动。 首先，地图展示是ECharts的一个重要功能。ECharts支持多种地图类型，包括...
echarts实现地图攻击
03-06
"地图攻击"标签则可能意味着我们要关注如何在ECharts地图组件上模拟或展示攻击事件，或者是通过数据表示某种“攻击”行为的地理分布。 **文件列表解析：** "showdata" 这个文件名暗示了它可能是一个数据文件，用于...
山西echarts地图js
08-16
总的来说，“山西echarts地图js”是利用ECharts库和地理坐标数据文件实现山西省地图可视化的实例，通过这个案例，我们可以了解到ECharts在地图绘制方面的强大能力，以及如何结合自定义数据进行个性化展示。...
台湾echarts地图资源
12-30
总结来说，"台湾echarts地图资源"涉及到如何在ECharts中使用和定制台湾地图，包括地图数据的获取与处理、数据的绑定、交互功能的实现、动态效果的展示，以及性能优化和兼容性问题。开发者可以借助这些资源，创建出...
ECharts--中国地图（无敌详细）
热门推荐
qq_45066453的博客
03-12 6万+
使用Echarts绘制中国地图，其中地图点信息由JSON文件编写，前端html直接从JSON文件中读取地区数据，渲染到前端即可。详细介绍用到的各个功能！代码直接复制运行即可！
Echarts绘制地图（超详细版！）
m0_55245520的博客
01-17 1万+
Echarts是一个很有用又很美观的可视化工具，最近想用Echarts绘制地图，但是网上的代码都没有绘制完全，今天分享一下我的代码要注意echarts需要引用一些js文件~
教你从零开始画echarts地图
m0_67401660的博客
07-31 6225
离线地图下载地址echarts文档地址。
echart之map地图图表使用教程
ll_883963的博客
07-15 3835
官方解释你可以有选择地退出默认的深度响应式/只读转换模式，并将原始的，未被代理的对象嵌入状态图中。它们可以根据情况灵活运用：有些值不应该是响应式的，例如复杂的第三方类实例或 Vue 组件对象。(第三方实例)当渲染具有不可变数据源的大列表时，跳过 proxy 转换可以提高性能。解决方案在实例化echart时，将其指定为非响应式的import {
echarts地图的常见用法：基本使用、区域颜色分级、水波动画、区域轮播、给地图添加背景图片和图标、3d地图、飞线图
weixin_41897680的博客
06-01 1万+
echarts地图的常见用法：基本使用、区域颜色分级、水波动画、区域轮播、给地图添加背景图片和图标、3d地图、飞线图
ECharts地图，echarts自定义map地图，echarts添加标注，自定义坐标、图标、icon
沐枫
10-18 6万+
ECharts如何自定义省、市、县区地图(各省市直辖区的map地图)，ECharts如何在地图上自定义图片、图标，根据经纬度显示自定义建筑图片、添加自定义覆盖物 前言 最近在做一个项目中，需求是：要显示中国某个省份下，某个市的地图，而地图还要有块级效果，自定义地图颜色，还要在地图上显示不同的建筑物图片，还要每隔几秒后（数据是从后端用ws实时推送过来的，要根据推送过来的数据，动态切换显示对......
ECharts 实现地图功能
weixin_48163734的博客
12-15 8975
Vue进阶（幺玖幺）：ECharts 实现地图功能 No Silver Bullet 2021-06-22 16:17:28 ...
怎么实现echarts地图从边框向中心的背景色渐变
06-02
要实现echarts地图从边框向中心的背景色渐变，可以使用echarts自带的visualMap组件来实现。具体实现步骤如下： 1. 在option中添加visualMap组件，并设置type为continuous（连续的）。 2. 设置visualMap的min和max属性，表示数据的最小值和最大值。 3. 设置visualMap的color属性，表示渐变色的颜色数组。 4. 设置visualMap的calculable属性为true，表示用户可以拖动滑块来选择数据范围。 5. 设置visualMap的inRange属性为渐变色的最小值和最大值所对应的颜色值。 下面是一个示例代码： ```javascript option = { visualMap: { type: 'continuous', min: 0, max: 100, color: ['#f5ddb1', '#e64f4f'], calculable: true, inRange: { color: ['#f5ddb1', '#e64f4f'] } }, series: [{ type: 'map', map: 'china', data: [{ name: '北京', value: 50 }, { name: '上海', value: 70 }] }] }; ``` 在上面的代码中，visualMap的min和max属性分别设置为0和100，color属性设置为从黄色到红色的渐变色，inRange属性也设置为从黄色到红色的渐变色。最后在series中添加了一个map类型的系列，并设置了数据。 这样就可以实现echarts地图从边框向中心的背景色渐变了。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值