效果图
安装的依赖
npm i echarts echarts-gl -S
html
<div class="beijing">
<div id="ChinaMap"></div>
<div id="WorldMap"></div>
<div id="CityMap"></div>
</div>
js
import echartsGL from "echarts-gl";
var echarts = require("echarts");
require("echarts/map/js/china");
require("echarts/map/js/world");
// 河北省
require("echarts/map/js/province/hebei");
// 其他省
require("echarts/map/js/province/anhui");
require("echarts/map/js/province/aomen");
require("echarts/map/js/province/heilongjiang");
require("echarts/map/js/province/henan");
require("echarts/map/js/province/hubei");
require("echarts/map/js/province/hunan");
require("echarts/map/js/province/jiangsu");
require("echarts/map/js/province/jiangxi");
require("echarts/map/js/province/jilin");
require("echarts/map/js/province/liaoning");
require("echarts/map/js/province/neimenggu");
require("echarts/map/js/province/beijing");
require("echarts/map/js/province/ningxia");
require("echarts/map/js/province/qinghai");
require("echarts/map/js/province/shandong");
require("echarts/map/js/province/shanghai");
require("echarts/map/js/province/shanxi");
require("echarts/map/js/province/shanxi1");
require("echarts/map/js/province/sichuan");
require("echarts/map/js/province/taiwan");
require("echarts/map/js/province/tianjin");
require("echarts/map/js/province/xianggang");
require("echarts/map/js/province/chongqing");
require("echarts/map/js/province/xinjiang");
require("echarts/map/js/province/xizang");
require("echarts/map/js/province/yunnan");
require("echarts/map/js/province/zhejiang");
require("echarts/map/js/province/fujian");
require("echarts/map/js/province/gansu");
require("echarts/map/js/province/guangdong");
require("echarts/map/js/province/guangxi");
require("echarts/map/js/province/guizhou");
require("echarts/map/js/province/hainan");
export default {
data() {
return {
//map3D 配置项开始
autoRotate: false, //是否开启视角绕物体的自动旋转查看。
autoRotateDirection: "cw", //物体自传的方向。默认是 'cw' 也就是从上往下看是顺时针方向,也可以取 'ccw',既从上往下看为逆时针方向。
autoRotateSpeed: 20, //旋转速度
autoRotateAfterStill: 3, //在鼠标静止操作后恢复自动旋转的时间间隔。在开启 autoRotate 后有效。
damping: 0.8, //鼠标进行旋转,缩放等操作时的迟滞因子,在大于 0 的时候鼠标在停止操作后,视角仍会因为一定的惯性继续运动(旋转和缩放)。
rotateSensitivity: 5, //旋转操作的灵敏度,值越大越灵敏。支持使用数组分别设置横向和纵向的旋转灵敏度。0不能旋转
distance: 92, //地图大小 值越大-地图越小,值越小-地图越大
alpha: 45, //垂直翻转角度
beta: 0, //视角绕 y 轴,即左右旋转的角度。
zoomSensitivity: 3, //缩放操作的灵敏度,值越大越灵敏。0表示不能缩放
center: [0, -10, 0], //[ 18, 10, 0 ]视角中心点,旋转也会围绕这个中心点旋转,默认为[0,0,0]。
//map3D 配置项结束
//lines3D 轨迹线数据
datas: [
{
fromName: "北京",
toName: "宁波",
coords: [
[116.24, 39.55, 1],
[114.577059, 38.153047, 1],
],
},
{
fromName: "上海",
toName: "宁波",
coords: [
[121.46, 31.28],
[114.577059, 38.153047, 1],
],
},
{
fromName: "河北",
toName: "宁波",
coords: [
[116.21, 39.44],
[114.577059, 38.153047, 1],
],
},
{
fromName: "山西",
toName: "宁波",
coords: [
[111.95, 37.65],
[114.577059, 38.153047, 1],
],
},
{
fromName: "内蒙古",
toName: "宁波",
coords: [
[111.764469, 40.859042],
[114.577059, 38.153047, 1],
],
},
{
fromName: "辽宁",
toName: "宁波",
coords: [
[122.42, 41.29],
[114.577059, 38.153047, 1],
],
},
{
fromName: "吉林",
toName: "宁波",
coords: [
[126.32, 43.68],
[114.577059, 38.153047, 1],
],
},
{
fromName: "黑龙江",
toName: "宁波",
coords: [
[128.34, 48.85],
[114.577059, 38.153047, 1],
],
},
{
fromName: "江苏",
toName: "宁波",
coords: [
[119.26, 33.04],
[114.577059, 38.153047, 1],
],
},
{
fromName: "浙江",
toName: "宁波",
coords: [
[120.15, 29.28],
[114.577059, 38.153047, 1],
],
},
{
fromName: "安徽",
toName: "宁波",
coords: [
[117.28, 31.86],
[114.577059, 38.153047, 1],
],
},
{
fromName: "福建",
toName: "宁波",
coords: [
[118.31, 26.07],
[114.577059, 38.153047, 1],
],
},
{
fromName: "山西",
toName: "宁波",
coords: [
[115.89, 27.97],
[114.577059, 38.153047, 1],
],
},
{
fromName: "山东",
toName: "宁波",
coords: [
[118.01, 36.37],
[114.577059, 38.153047, 1],
],
},
{
fromName: "河南",
toName: "宁波",
coords: [
[113.46