php使用echartsmap,浅谈使用angular9+echarts绘制3D地图

本篇文章给大家分享一下angular中echarts的用法,介绍绘制3D地图的方法。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

006dec0a1056cffb0673d7cb235940fd.png

新建一个angular9的工程

1、安装了@angular-cli的脚手架

2、ng -v查看版本

3、ng new my-project(项目名)

下载echartsnpm i echarts

创建容器

src/app/app.componnet.html

创建地图实例

src/app/app.componnet.tsimport { Component } from '@angular/core';

import * as echarts from "echarts";

import 'echarts/map/js/china.js'

@Component({

selector: 'app-root',

templateUrl: './app.component.html',

styleUrls: ['./app.component.scss']

})

export class AppComponent {

option = {

title: {

top: 10,

text: '3D中国地图',

left: 'center',

textStyle: {

color: '#fff'

}

},

backgroundColor: 'rgba(0, 10, 52, 1)',

geo: {

map: 'china',

aspectScale: 0.75,

layoutCenter: ["50%", "51.5%"], //地图位置

layoutSize: '118%',

roam: true,

itemStyle: {

normal: {

borderColor: 'rgba(147, 235, 248, 1)',

borderWidth: 0.5,

color: {

type: 'linear-gradient',

x: 0,

y: 1500,

x2: 2500,

y2: 0,

colorStops: [{

offset: 0,

color: '#009DA1' // 0% 处的颜色

}, {

offset: 1,

color: '#005B9E' // 50% 处的颜色

}],

global: true // 缺省为 false

},

opacity: 0.5,

},

emphasis: {

areaColor: '#2a333d'

}

},

regions: [{

name: '南海诸岛',

itemStyle: {

areaColor: 'rgba(0, 10, 52, 1)',

borderColor: 'rgba(0, 10, 52, 1)'

},

emphasis: {

areaColor: 'rgba(0, 10, 52, 1)',

borderColor: 'rgba(0, 10, 52, 1)'

}

}],

z: 2

},

series: [{

type: 'map',

map: 'china',

tooltip: {

show: false

},

label: {

show: true,

color: '#FFFFFF',

fontSize: 16

},

aspectScale: 0.75,

layoutCenter: ["50%", "50%"], //地图位置

layoutSize: '118%',

roam: true,

itemStyle: {

normal: {

borderColor: 'rgba(147, 235, 248, 0.6)',

borderWidth: 0.8,

areaColor: {

type: 'linear-gradient',

x: 0,

y: 1200,

x2: 1000,

y2: 0,

colorStops: [{

offset: 0,

color: '#009DA1' // 0% 处的颜色

}, {

offset: 1,

color: '#005B9E' // 50% 处的颜色

}],

global: true // 缺省为 false

},

},

emphasis: {

areaColor: 'rgba(147, 235, 248, 0)'

}

},

zlevel: 1

}]

};

ngOnInit(){

let dom = document.getElementById('main')

let myChart = echarts.init(dom)

myChart.on('georoam', function(params) {

var option = myChart.getOption(); //获得option对象

if (params.zoom != null && params.zoom != undefined) { //捕捉到缩放时

option.geo[0].zoom = option.series[0].zoom; //下层geo的缩放等级跟着上层的geo一起改变

option.geo[0].center = option.series[0].center; //下层的geo的中心位置随着上层geo一起改变

} else { //捕捉到拖曳时

option.geo[0].center = option.series[0].center; //下层的geo的中心位置随着上层geo一起改变

}

myChart.setOption(option); //设置option

});

myChart.setOption(this.option)

}

}

效果图片

d47c9890796f9091841b6330df4327fa.png

更多编程相关知识,请访问:编程视频!!

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值