安装
npm install --save echarts echarts-gl 因为本次渲染需要用到echarts-gl ,所以一起安装了
组件包版本号
"echarts": "^4.4.0",
"echarts-gl": "^1.1.1",
复制代码引入
建议单个文件引入
import echarts from "echarts";
import "echarts/map/js/world.js";// world是世界地图数据
import "echarts-gl";
复制代码容器
<div id="charts_center"></div>
复制代码地球主体代码
设置地球，通过新建一个canvas
//新建一个canvas
let chart = echarts.init(document.createElement("canvas"), null, {
width: 2596,
height:1548,
});
// 添加地球
let option = {
backgroundColor: "transparent",
globe: {
baseTexture: chart,
top: "middle",
left: "center",
displacementScale: 0,
shading: "color",
//地球是否自己转动 autoRotate为true时自己转动
viewControl: {
distance: 190,
autoRotate: true,
},
},
roam: true,
series: series3d,
};
var myChart = echarts.init(document.getElementById("charts_center"));
myChart.setOption(option, true);
复制代码增加2d平面地图和散点
// 添加2d地图 + 散点图
chart.setOption({
backgroundColor: "#040438",
tooltip: {
backgroundColor: "red",
alwaysShowContent: true,
},
geo: {
type: "map",
map: "world",
left: 0,
top: 0,
right: 0,
bottom: 0,
zoom: 0,
boundingCoords: [
[-180, 90],
[180, -90],
],
roam: false,
itemStyle: {
borderColor: "rgb(38 122 219 / 0.4)",
borderWidth: 1,
areaColor: "rgb(4 4 63 / 0.6)",
},
label: {
fontSize: 24,
},
},
series: series2d,
});
复制代码构建散点图和地球数据
let [series2d, series3d] = [[], []];
[
["重庆", this.CQDataMapItem],
["北京", this.BJDataMapItem],
["上海", this.SHDataMap],
].forEach(function (item) {
// 2d平面地图 + 散点
series2d.push(
{
type: "effectScatter",
coordinateSystem: "geo",
zlevel: 3,
rippleEffect: {
brushType: "stroke",
},
label: {
fontSize: 24,
show: true,
position: "right",
formatter: "{b}",
},
itemStyle: {
normal: {
color: "rgba(250,250,250,0.8)",
},
},
data: item[1].map(function (dataItem) {
return {
name: dataItem[1].name,
value: then.geoCoordMapItem[dataItem[1].name],
symbolSize: dataItem[1].value / 4,
};
}),
},
{
type: "effectScatter",
coordinateSystem: "geo",
zlevel: 3,
rippleEffect: {
brushType: "stroke",
},
label: {
show: true,
position: "left",
fontSize: 18,
formatter: "{b}",
},
itemStyle: {
normal: {
color: "#fff",
},
},
data: [
{
name: item[0],
value: then.geoCoordMapItem[item[0]],
symbolSize: parseInt(String(Math.random() * 20 + 10)),
label: {
position: "right",
},
},
],
}
);
\
// 3d连线
series3d.push(
{
type: "lines3D",
effect: {
show: true,
period: 3,
trailLength: 0.1,
},
lineStyle: {
color: "rgba(38 ,122, 219, 0.8)",
width: 1.5,
opacity: 0.6,
},
tooltip: {
show: false,
},
data: then.intData(item[1]),
},
{
type: "scatter3D",
name: "location",
coordinateSystem: "globe",
blendMode: "lighter",
symbolSize: 10,
itemStyle: {
color: "red",
opacity: 1,
},
label: {
show: true,
formatter: (param) => param.data.name,
},
data: [
{
name: "中国",
value: [116.4551, 40.2539, 0],
},
],
}
);
});
复制代码根据其实位置获取线的地理位置
intData(data) {
// 根据起始位置，获得线的地理位置
let res = [];
for (let i = 0; i < data.length; i++) {
let dataItem = data[i];
let [fromCoord, toCoord] = [
this.geoCoordMapItem[dataItem[1].name],
this.geoCoordMapItem[dataItem[0].name],
];
if (fromCoord && toCoord) res.push([fromCoord, toCoord]);
}
return res;
},
复制代码Vue Data的数据设置
data(){
return{
geoCoordMapItem:{
上海: [120.52, 30.4],
北京: [115.25, 39.9],
重庆: [107.7539, 30.1904],
芬兰: [24.909912, 60.169095],
美国: [-100.696295, 33.679979],
日本: [139.710164, 35.706962],
韩国: [126.979208, 37.53875],
瑞士: [7.445147, 46.956241],
德国: [13.402393, 52.518569],
英国: [-0.126608, 51.208425],
},//地球上显示的地方坐标
//下述是地球点对点的数据信息
CQDataMapItem:[
[
{
name: "重庆",
},
{
name: "英国",
value: 70,
},
],
[ { name: "重庆", }, { name: "芬兰", value: 80, }, ],
[ { name: "重庆", }, { name: "美国", value: 80, }, ],
],
BJDataMapItem:[
[
{
name: "北京",
},
{
name: "日本",
value: 30,
},
],
[ { name: "北京", }, { name: "德国", value: 80, }, ],
],
SHDataMap:[
[
{
name: "上海",
},
{
name: "韩国",
value: 80,
},
],
],
};
}
复制代码完整代码如下
<template>
<div class="hello">
<!-- <p>{{ msg }}</p> -->
<div id="charts_center"></div>
</div>
</template>
<script lang="ts">
import { Options, Vue } from "vue-class-component";
import echarts from "echarts";
import "echarts/map/js/world.js";
import "echarts-gl";
Options.prototype.$echarts = echarts;
@Options({
props: {
msg: String,
},
data() {
const item = {
date: "2016-05-02",
name: "王小虎",
address: "上海市普陀区金沙江路 1518 弄",
};
const geoCoordMap = {
上海: [120.52, 30.4],
北京: [115.25, 39.9],
重庆: [107.7539, 30.1904],
芬兰: [24.909912, 60.169095],
美国: [-100.696295, 33.679979],
日本: [139.710164, 35.706962],
韩国: [126.979208, 37.53875],
瑞士: [7.445147, 46.956241],
德国: [13.402393, 52.518569],
英国: [-0.126608, 51.208425],
};
let CQData = [
[
{
name: "重庆",
},
{
name: "英国",
value: 70,
},
],
[
{
name: "重庆",
},
{
name: "芬兰",
value: 80,
},
],
[
{
name: "重庆",
},
{
name: "美国",
value: 80,
},
],
];
let BJData = [
[
{
name: "北京",
},
{
name: "日本",
value: 30,
},
],
[
{
name: "北京",
},
{
name: "德国",
value: 80,
},
],
];
let SHData = [
[
{
name: "上海",
},
{
name: "韩国",
value: 80,
},
],
];
return {
tableData: Array(20).fill(item),
geoCoordMapItem: geoCoordMap,
CQDataMapItem: CQData,
BJDataMapItem: BJData,
SHDataMap: SHData,
};
},
mounted() {
this.chart();
},
methods: {
intData(data) {
console.log(data);
// 根据起始位置，获得线的地理位置
let res = [];
for (let i = 0; i < data.length; i++) {
let dataItem = data[i];
let [fromCoord, toCoord] = [
this.geoCoordMapItem[dataItem[1].name],
this.geoCoordMapItem[dataItem[0].name],
];
if (fromCoord && toCoord) res.push([fromCoord, toCoord]);
}
return res;
},
chart() {
var then = this;
let [series2d, series3d] = [[], []];
[
["重庆", this.CQDataMapItem],
["北京", this.BJDataMapItem],
["上海", this.SHDataMap],
].forEach(function (item) {
// 2d平面地图 + 散点
series2d.push(
{
type: "effectScatter",
coordinateSystem: "geo",
zlevel: 3,
rippleEffect: {
brushType: "stroke",
},
label: {
fontSize: 24,
show: true,
position: "right",
formatter: "{b}",
},
itemStyle: {
normal: {
color: "rgba(250,250,250,0.8)",
},
},
data: item[1].map(function (dataItem) {
return {
name: dataItem[1].name,
value: then.geoCoordMapItem[dataItem[1].name],
symbolSize: dataItem[1].value / 4,
};
}),
},
{
type: "effectScatter",
coordinateSystem: "geo",
zlevel: 3,
rippleEffect: {
brushType: "stroke",
},
label: {
show: true,
position: "left",
fontSize: 18,
formatter: "{b}",
},
itemStyle: {
normal: {
color: "#fff",
},
},
data: [
{
name: item[0],
value: then.geoCoordMapItem[item[0]],
symbolSize: parseInt(String(Math.random() * 20 + 10)),
label: {
position: "right",
},
},
],
}
);
// 3d连线
series3d.push(
{
type: "lines3D",
effect: {
show: true,
period: 3,
trailLength: 0.1,
},
lineStyle: {
color: "rgba(38 ,122, 219, 0.8)",
width: 1.5,
opacity: 0.6,
},
tooltip: {
show: false,
},
data: then.intData(item[1]),
},
{
type: "scatter3D",
name: "location",
coordinateSystem: "globe",
blendMode: "lighter",
symbolSize: 10,
itemStyle: {
color: "red",
opacity: 1,
},
label: {
show: true,
formatter: (param) => param.data.name,
},
data: [
{
name: "中国",
value: [116.4551, 40.2539, 0],
},
],
}
);
});
let chart = echarts.init(document.createElement("canvas"), null, {
width: 2596,
height:1548,
});
// 添加2d地图 + 散点图
chart.setOption({
backgroundColor: "#040438",
tooltip: {
backgroundColor: "red",
alwaysShowContent: true,
},
geo: {
type: "map",
map: "world",
left: 0,
top: 0,
right: 0,
bottom: 0,
zoom: 0,
boundingCoords: [
[-180, 90],
[180, -90],
],
roam: false,
itemStyle: {
borderColor: "rgb(38 122 219 / 0.4)",
borderWidth: 1,
areaColor: "rgb(4 4 63 / 0.6)",
},
label: {
fontSize: 24,
},
},
series: series2d,
});
// 添加地球
let option = {
backgroundColor: "transparent",
globe: {
baseTexture: chart,
top: "middle",
left: "center",
displacementScale: 0,
shading: "color",
//地球是否自己转动 autoRotate为true时自己转动
viewControl: {
distance: 190,
autoRotate: true,
},
},
roam: true,
series: series3d,
};
var myChart = echarts.init(document.getElementById("charts_center"));
myChart.setOption(option, true);
},
},
})
export default class HelloWorld extends Vue {
msg!: string;
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
margin: 40px 0 0;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
.el-header {
background-color: #b3c0d1;
color: #333;
line-height: 60px;
}
.el-aside {
color: #333;
}
#charts_center {
background: #000;
height: 500px;
width: 500px;
/* margin: 0 auto; */
}
</style>
复制代码