vue用echarts 画3d地球 且画线

·  阅读 1549
vue用echarts 画3d地球 且画线

安装

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>

复制代码

图片.png

分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改