Echarts地图动效制作

效果图：

 上图就是咱们今天要讲解的内容，接下来让我们来一起学习～

图片素材：

let img = 'image://data:image/png;base64,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'
let img2 = 'image://data:image/png;base64,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'

1) 配置Echarts环境

（1）安装Echarts

yarn add echarts

npm install echarts --save

 （2）在main.js全局引入

import * as echarts from "echarts";   //引入echarts

Vue.prototype.$echarts = echarts;   //挂载到vue实例，方便全局使用

注：

echarts5.0及以上版本

import *as echarts from 'echarts';
//或者
let echarts = require('echarts');

echarts5.0及以下版本

import echarts from 'echarts';
//或者
import *as echarts from 'echarts';
//或者
let echarts = require('echarts');

如果还需引入echartsGL，需注意，要和echarts版本相匹配

“echarts”: “^4.9.0”, “echarts-gl”: “^1.1.2”,
“echarts”: “^5.2.0”, “echarts-gl”: “^2.0.8”,

2) 地图数据的准备 

（1）查看echarts的node包中是否含有所需数据

        node_modules -> echarts -> map -> js

（2）如若没有，在以下地址中下载

http://datav.aliyun.com/portal/school/atlas/area_selector

（3）整理数据

 3) 开始绘制地图

（1）地图数据的导入及挂在到DOM上

<template>
  <div style="height:100%;">
    <div id="chartmainbar" ref="chart" style="width:100%; height:100%;"></div>
  </div>
</template>

<script>
import shanxi from "@/assets/map/js/province/shanxi1";

export default {
  props: {
    propsData: {
      default: []
    },
  },
  data() {
    return {};
  },
  mounted() {
    this.echartschange();
  },
  methods: {
    echartschange() {
      let chart = this.$echarts.init(
        this.$refs.chart
      )
      const option = {
        series: [
          // 地图
          {
            type: 'map', // 类型
            map: '陕西', // 使用 registerMap 注册的地图名称
            aspectScale: 1, // 这个参数用于 scale 地图的长宽比，如果设置了projection则无效。
            layoutCenter: ["50%", "47%"], // 在使用 left/right/top/bottom/width/height 的时候，可能很难在保持地图高宽比的情况下把地图放在某个盒形区域的正中间，并且保证不超出盒形的范围。此时可以通过 layoutCenter 属性定义地图中心在屏幕中的位置，layoutSize 定义地图的大小。
            layoutSize: "90%", // 地图的大小，见 layoutCenter。支持相对于屏幕宽高的百分比或者绝对的像素大小。
            roam: false, // 是否开启鼠标缩放和平移漫游
          },
        ]
      }
      chart.setOption(option);
    }
  }
};
</script>

 （2）地图区域的多边形图形样式 - itemStyle

            // 地图区域的多边形 图形样式
            itemStyle: {
              // 线性渐变，前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1，相当于在图形包围盒中的百分比，如果 globalCoord 为 `true`，则该四个值是绝对的像素位置
                areaColor: {
                  type: 'linear-gradient',
                  x: 0,
                  y: 300,
                  x2: 0,
                  y2: 0,
                  colorStops: [{
                    offset: 0,
                    color: 'rgba(37,108,190,0.8)' // 0% 处的颜色
                  }, {
                    offset: 1,
                    color: 'rgba(15,169,195,0.8)' // 50% 处的颜色
                  }],
                  global: true // 缺省为 false
                },
                borderColor: '#4ECEE6', // 图形的描边颜色
                borderWidth: 1.5, // 描边线宽。为 0 时无描边
                shadowColor: "rgba(0, 0, 0, 0.5)", // 阴影颜色
                shadowBlur: 0, // 图形阴影的模糊大小
                shadowOffsetX: 0, // 阴影水平方向上的偏移距离
                shadowOffsetY: 0.5, // 阴影垂直方向上的偏移距离
            },

注：

// 线性渐变，前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1，相当于在图形包围盒中的百分比，如果 globalCoord 为 `true`，则该四个值是绝对的像素位置
{
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
   offset: 0, color: 'red' // 0% 处的颜色
}, {
   offset: 1, color: 'blue' // 100% 处的颜色
}],
global: false // 缺省为 false
}
// 径向渐变，前三个参数分别是圆心 x, y 和半径，取值同线性渐变
{
type: 'radial',
x: 0.5,
y: 0.5,
r: 0.5,
colorStops: [{
   offset: 0, color: 'red' // 0% 处的颜色
}, {
   offset: 1, color: 'blue' // 100% 处的颜色
}],
global: false // 缺省为 false
}
// 纹理填充
{
image: imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement，不支持路径字符串
repeat: 'repeat' // 是否平铺，可以是 'repeat-x', 'repeat-y', 'no-repeat'
}

 （3）高亮状态下的多边形和标签样式 - emphasis

            // 高亮状态下的多边形和标签样式
            emphasis: {
              label: {
                show: false // 是否显示标签
              },
              itemStyle: {
                areaColor: {
                  type: 'linear-gradient',
                  x: 0,
                  y: 300,
                  x2: 0,
                  y2: 0,
                  colorStops: [{
                    offset: 0,
                    color: 'RGBA(37,108,190,1)' // 0% 处的颜色
                  }, {
                    offset: 1,
                    color: 'RGBA(15,169,195,1)' // 50% 处的颜色
                  }],
                  global: true // 缺省为 false
                }
              }
            }

（4）地理坐标系组建 - geo

        // 地理坐标系组件
        // 地理坐标系组件用于地图的绘制，支持在地理坐标系上绘制散点图，线集
        geo: [
          {
            map: "陕西", // 使用 registerMap 注册的地图名称
            aspectScale: 1, //这个参数用于 scale 地图的长宽比
            zoom: 1, // 当前视角的缩放比例
            layoutCenter: ["50%", "49%"], // 定义地图中心在屏幕中的位置
            layoutSize: "90%", // 支持相对于屏幕宽高的百分比或者绝对的像素大小
            silent: true, // 图形是否不响应和触发鼠标事件，默认为 false，即响应和触发鼠标事件
            roam: false, // 是否开启鼠标缩放和平移漫游
            itemStyle: {
              normal: {
                areaColor: {
                  type: 'linear-gradient',
                  x: 0,
                  y: 300,
                  x2: 0,
                  y2: 0,
                  colorStops: [{
                    offset: 0,
                    color: 'RGBA(37,108,190,0.8)' // 0% 处的颜色
                  }, {
                    offset: 1,
                    color: 'RGBA(15,169,195,0.8)' // 50% 处的颜色
                  }],
                  global: true // 缺省为 false
                },
                borderColor: '#4ECEE6',
                borderWidth: 0,
              },
              emphasis: {
                areaColor: {
                  type: 'linear-gradient',
                  x: 0,
                  y: 300,
                  x2: 0,
                  y2: 0,
                  colorStops: [{
                    offset: 0,
                    color: 'RGBA(37,108,190,1)' // 0% 处的颜色
                  }, {
                    offset: 1,
                    color: 'RGBA(15,169,195,1)' // 50% 处的颜色
                  }],
                  global: true // 缺省为 false
                },
              }
            }
          }
        ],

（5）扩散圆点-effectScatter(带有涟漪特效动画的散点（气泡）图)

引入utils组件

export default {
  fontSize: function(res) {
    let clientWidth = window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth;
    if (!clientWidth) return;
    let fontSize = 100 * (clientWidth / 1920);
    return res*fontSize;
  }

import utils from "@/js/utils";

          // 扩散圆点-effectScatter(带有涟漪特效动画的散点（气泡）图)
          {
            type: 'effectScatter',
            zlevel: 3, // 层级
            coordinateSystem: 'geo', // 该系列使用的坐标系，cartesian2d（使用二维的直角坐标系），polar（使用极坐标系）
            rippleEffect: { // 涟漪特效相关配置
              scale: utils.fontSize(0.1), // 动画中波纹的最大缩放比例
              brushType: 'stroke', // 波纹的绘制方式
            },
            showEffectOn: 'render', // 配置何时显示特效，render（绘制完成后显示特效），emphasis（高亮（hover）的时候显示特效）
            itemStyle: {
              normal: {
                color: '#00FFFF', // 颜色
              }
            },
            symbol: 'circle', // 标记的图形
            symbolSize: [utils.fontSize(0.1), utils.fontSize(0.04)], // 标记的大小
            data: [ // 系列中的数据内容数组
              {
                "name": "铜川市",
                "value": [108.979608, 35.25]
              }
            ],
          },

（6）三角立柱-scatter

echarts图片引入方式：

1.Base64

let img2 = 'image://data:image/png;base64,iVBORw0KGgoA......'
symbol: img2

2.方式二

symbol: "image://" + require("@/assets/img.png");

3.方式三

import img from "@/assets/img.png";

const doming = document.creatElement("img");
domImg.src = img;

symbol: domImg

          // 三角立柱-scatter
          {
            type: 'scatter', // 散点（气泡）图
            zlevel: 3, // 层级
            coordinateSystem: 'geo', // 该系列使用的坐标系
            data: [
              {
                name: "铜川市", // 数据项名称
                value: [108.979608, 35.25], // 数据项值
                symbol: img, // 单个数据标记的图形
                symbolSize: [utils.fontSize(0.45), utils.fontSize(0.5)], // 单个数据标记的大小
                symbolOffset: [0, -utils.fontSize(0.25)], // 单个数据标记相对于原本位置的偏移
              },
              {
                name: "铜川市",
                value: [108.979608, 35.25],
                label: {
                  normal: {
                    show: true, // 是否显示标签
                    formatter: function (params) {
                      let name = params.data.name;
                      let text = `{fline|${name}}`;
                      return text;
                    },
                    rich: {
                      fline: {
                        color: '#88ffff', // 文字的颜色
                        textShadowColor: '#030615', // 文字本身的阴影颜色
                        textShadowBlur: '0', // 文字本身的阴影长度
                        textShadowOffsetX: 1, // 文字本身的阴影 X 偏移
                        textShadowOffsetY: 1, // 文字本身的阴影 Y 偏移
                        fontSize: utils.fontSize(0.16), // 文字的字体大小
                        fontFamily: "pmzd_title" // 文字的字体系列
                      }
                    },
                  },
                  emphasis: {
                    show: true,
                  },
                },
                symbol: img2,
                symbolSize: [utils.fontSize(0.8), utils.fontSize(0.35)],
                symbolOffset: [0, -utils.fontSize(0.62)],
              }
            ],
          }

 （7）黄色四区模块-scatter

          // 黄色四区模块-scatter
          {
            type: 'scatter',
            zlevel: 2,
            coordinateSystem: 'geo',
            data: [
              {
                name: "陕北长城沿线旱作区",
                value: [108.858621, 37.507668],
                symbol: "image://" + require("@/assets/images/imgAll1.png"),
                symbolSize: [utils.fontSize(3.55), utils.fontSize(1.4)],
                symbolOffset: [0, -utils.fontSize(0.25)],
                label: {
                  normal: {
                    show: true,
                    formatter: function (params) {
                      let name = params.data.name;
                      return name;
                    },
                    textShadowColor: '#030615',
                    textShadowBlur: '0',
                    textShadowOffsetX: 1,
                    textShadowOffsetY: 1,
                    fontSize: utils.fontSize(0.17),
                    fontFamily: "pmzd_title",
                    color: "rgba(244, 233, 37, 1)"
                  },
                },
              }
            ],
          }

 （8）玫红色路线图-lines

// 玫红色路线图-lines
          {
            type: 'lines', // 用于带有起点和终点信息的线数据的绘制，主要用于地图上的航线，路线的可视化
            zlevel: 1, // 层级
            effect: { // 线特效的配置
              show: true, // 是否显示特效
              period: 6, // 特效动画的时间，单位为 s
              trailLength: 0.7, // 特效尾迹的长度。取从 0 到 1 的值，数值越大尾迹越长
              color: 'rgba(244, 127, 203, 1)', // 特效标记的颜色
              symbolSize: utils.fontSize(0.22), // 特效标记的大小
              symbol: 'arrow', // 特效图形的标记，（rect、roundRect...）
            },
            data: [
              {
                name: '安康->汉中', // 数据名称
                coords: [ // 一个包含两个到多个二维坐标的数组。在 polyline 设置为 true 时支持多于两个的坐标
                  [109.029273, 32.6203],
                  [105.8, 33.707668]
                ],
                color: 'rgba(244, 127, 203, 1)',
                lineStyle: {
                  normal: {
                    color: 'rgba(244, 127, 203, 0.05)',
                    width: 2,
                    curveness: 0.05, // 边的曲度，支持从 0 到 1 的值，值越大曲度越大
                  },
                },
                symbol: ['none', 'arrow'],
                symbolSize: 20,
              },
            ]
          }

 （9）蓝色路线图-lines

// 蓝色圆点-effectScatter
          {
            zlevel: 2,
            type: 'effectScatter',
            coordinateSystem: 'geo',
            showEffectOn: 'render',
            data: [
              {
                name: "关中现代农业产业带",
                value: [108.605117, 34.783439],
                rippleEffect: {
                  period: 14,
                  scale: 6,
                  brushType: 'fill'
                },
                label: {
                  show: false
                },
                itemStyle: {
                  color: '#88ffff',
                  shadowBlur: 20,
                  shadowColor: '#333',
                  opacity: 0.75
                },
                symbolSize: 3,
              }
            ],
          },
          // 蓝色线条左边
          {
            type: 'lines',
            zlevel: 1,
            symbol: ['none', 'arrow'],
            symbolSize: 10,
            color: 'rgba(44, 193, 240, 1)',
            effect: {
              show: true,
              period: 6,
              trailLength: 0.7,
              color: 'rgba(44, 193, 240, 1)',
              symbolSize: 6,
              symbol: 'arrow',
            },
            lineStyle: {
              normal: {
                color: 'rgba(44, 193, 240, 0.5)',
                width: 1,
                curveness: 0.1,
              },
            },
            data: [
              {
                name: '线',
                value: 80,
                coords: [
                  [108.605117, 34.783439],
                  [106.605117, 34.783439]
                ]
              }
            ]
          },
          // 蓝色线条右边
          {
            type: 'lines',
            zlevel: 1,
            symbol: ['none', 'arrow'],
            symbolSize: 10,
            color: 'rgba(44, 193, 240, 1)',
            effect: {
              show: true,
              period: 6,
              trailLength: 0.7,
              color: 'rgba(44, 193, 240, 1)',
              symbolSize: 6,
              symbol: 'arrow',
            },
            lineStyle: {
              normal: {
                color: 'rgba(44, 193, 240, 0.5)',
                width: 1,
                curveness: -0.1,
              },
            },
            data: [
              {
                name: '线',
                value: 80,
                coords: [
                  [108.605117, 34.783439],
                  [110.905117, 35.683439]
                ]
              },
            ]
          }

（10）绿色路线图-lines

// 绿色线条组
          {
            type: 'lines',
            zlevel: 1,
            symbol: ['none', 'arrow'],
            symbolSize: 20,
            color: 'rgba(30, 213, 54, 1)',
            effect: {
              show: true,
              period: 2,
              trailLength: 0.7,
              color: 'rgba(30, 213, 54, 1)',
              symbolSize: 20,
              symbol: 'arrow',
            },
            lineStyle: {
              normal: {
                color: 'rgba(30, 213, 54, 0.5)',
                width: 1,
                curveness: 0,
              },
            },
            data: [
              {
                name: '线',
                value: 80,
                coords: [
                  [106.528621, 34.007668],
                  [106.508621, 34.307668]
                ]
              },
            ]
          },
          {
            type: 'lines',
            zlevel: 1,
            symbol: ['none', 'arrow'],
            symbolSize: 20,
            color: 'rgba(30, 213, 54, 1)',
            effect: {
              show: true,
              period: 2,
              trailLength: 0.7,
              color: 'rgba(30, 213, 54, 1)',
              symbolSize: 20,
              symbol: 'arrow',
            },
            lineStyle: {
              normal: {
                color: 'rgba(30, 213, 54, 0.5)',
                width: 1,
                curveness: 0,
              },
            },
            data: [
              {
                name: '线',
                value: 80,
                coords: [
                  [107.418621, 34.107668],
                  [107.408621, 34.407668]
                ]
              },
            ]
          },
          {
            type: 'lines',
            zlevel: 1,
            symbol: ['none', 'arrow'],
            symbolSize: 20,
            color: 'rgba(30, 213, 54, 1)',
            effect: {
              show: true,
              period: 2,
              trailLength: 0.7,
              color: 'rgba(30, 213, 54, 1)',
              symbolSize: 20,
              symbol: 'arrow',
            },
            lineStyle: {
              normal: {
                color: 'rgba(30, 213, 54, 0.5)',
                width: 1,
                curveness: 0,
              },
            },
            data: [
              {
                name: '线',
                value: 80,
                coords: [
                  [108.310621, 34.057668],
                  [108.308621, 34.357668]
                ]
              },
            ]
          },
          {
            type: 'lines',
            zlevel: 1,
            symbol: ['none', 'arrow'],
            symbolSize: 20,
            color: 'rgba(30, 213, 54, 1)',
            effect: {
              show: true,
              period: 2,
              trailLength: 0.7,
              color: 'rgba(30, 213, 54, 1)',
              symbolSize: 20,
              symbol: 'arrow',
            },
            lineStyle: {
              normal: {
                color: 'rgba(30, 213, 54, 0.5)',
                width: 1,
                curveness: 0,
              },
            },
            data: [
              {
                name: '线',
                value: 80,
                coords: [
                  [109.100621, 33.957668],
                  [109.128621, 34.3257668]
                ]
              },
            ]
          },
          {
            type: 'lines',
            zlevel: 1,
            symbol: ['none', 'arrow'],
            symbolSize: 20,
            color: 'rgba(30, 213, 54, 1)',
            effect: {
              show: true,
              period: 2,
              trailLength: 0.7,
              color: 'rgba(30, 213, 54, 1)',
              symbolSize: 20,
              symbol: 'arrow',
            },
            lineStyle: {
              normal: {
                color: 'rgba(30, 213, 54, 0.5)',
                width: 1,
                curveness: 0,
              },
            },
            data: [
              {
                name: '线',
                value: 80,
                coords: [
                  [109.900621, 33.857668],
                  [109.938621, 34.157668]
                ]
              },
            ]
          },
          {
            type: 'lines',
            zlevel: 1,
            symbol: ['none', 'arrow'],
            symbolSize: 20,
            color: 'rgba(30, 213, 54, 1)',
            effect: {
              show: true,
              period: 2,
              trailLength: 0.7,
              color: 'rgba(30, 213, 54, 1)',
              symbolSize: 20,
              symbol: 'arrow',
            },
            lineStyle: {
              normal: {
                color: 'rgba(30, 213, 54, 0.5)',
                width: 1,
                curveness: 0,
              },
            },
            data: [
              {
                name: '线',
                value: 80,
                coords: [
                  [110.700621, 33.757668],
                  [110.748621, 34.057668]
                ]
              },
            ]
          }

 （11）黄色椭圆

// 黄色椭圆
          {
            type: 'scatter',
            zlevel: 0,
            coordinateSystem: 'geo',
            label: {
              normal: {
                show: false,
              },
              emphasis: {
                show: false,
              },
            },
            symbol: 'circle',
            symbolSize: [utils.fontSize(5.5), utils.fontSize(2.5)],
            symbolRotate: utils.fontSize(0.05),
            itemStyle: {
              color: {
                type: 'radial',
                x: 0.5,
                y: 0.5,
                r: 0.5,
                colorStops: [{
                  offset: 0, color: "rgba(244, 233, 37, 0)" // 0% 处的颜色
                }, {
                  offset: 1, color: 'rgba(244, 233, 37, 0.2)' // 100% 处的颜色
                }],
                global: false // 缺省为 false
              },
              borderColor: "#F56C6C",
              // borderType: "dotted",
              // borderDashOffset: 15,
              animation: true,
              animationThreshold: 2000,
              animationDuration: 1000,
              animationEasing: 'cubicOut'
            },
            z: 999,
            data: [
              {
                area: 774.77,
                name: "西安市",
                value: [109.1, 34.35, 740]
              }
            ],
          },
          {
            zlevel: 0,
            type: 'effectScatter',
            coordinateSystem: 'geo',
            showEffectOn: 'render',
            rippleEffect: {
              period: 14,
              scale: 6,
              brushType: 'fill'
            },
            hoverAnimation: true,
            label: {
              show: false
            },
            itemStyle: {
              color: {
                type: 'radial',
                x: 0.5,
                y: 0.5,
                r: 0.5,
                colorStops: [{
                  offset: 0, color: "rgba(244, 233, 37, 0)" // 0% 处的颜色
                }, {
                  offset: 1, color: 'rgba(244, 233, 37, 0.2)' // 100% 处的颜色
                }],
                global: false, // 缺省为 false

              },
              shadowBlur: 0,
              shadowColor: '#333',
              opacity: 0.75
            },
            symbolSize: [utils.fontSize(1), utils.fontSize(0.5)],
            symbolRotate: utils.fontSize(0.05),
            emphasis: {
              itemStyle: {
                opacity: 1
              }
            },
            data: [
              {
                name: "圆点1",
                value: [109.1, 34.35]
              }
            ],
          },

 （12）echarts地图动态自适应

mounted() {
  this.echartschange();
  window.addEventListener("resize", () => {
    this.echartschange();
  });
},
beforeDestoryed() {
  // 组件销毁前移除监听,防止内存泄露
  window.removeEventListener("resize");
},
    
window.addEventListener("resize", () => {
  chart.resize();
});