angular9使用echarts地图
2020-06-13 16:20
225 查看
echarts3D地图
新建一个angular9的工程
1.安装了@angular-cli的脚手架
2.ng -v查看版本
3. ng new my-project(项目名)
下载echarts
npm i echarts
创建容器
src/app/app.componnet.html
<div id="main" style="width:800px;height:500px"></div>
创建地图实例
src/app/app.componnet.ts
import { 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) } }
效果图片
参考资料
相关文章推荐
- Echarts地图使用扩展
- echarts地图扩展文件使用geoJson格式。
- Echarts使用二:全国地图与各省市地图联动
- 使用echarts和百度地图经纬度绘制地图
- echarts地图使用问题,下钻
- ECharts地图使用
- 微信小说分销系统设计之使用百度Echarts地图统计功能统计微信粉丝地域分布情况
- ECharts地图使用一段代码即可搞定
- 如何使用PHP+jQuery+MySQL实现异步加载ECharts地图数据(附源码下载)
- echarts地图扩展文件使用geoJson格式。
- ECHARTS-MAP的使用: 中国地图及省份边界的查看
- 关于百度echarts map地图的使用之分布图
- 使用echarts实现地图展示
- 使用射线法判断echarts上地图中的点是否在地图范围中
- React中使用ECharts地图扩展
- ECharts(中国地图)的使用 及 非空 tooltip formatter 验证
- OBIEE分析开发-使用Echarts展现地图2
- 如何在vue脚手架里面使用echarts 组件显示中国地图---亲测
- Vue项目中使用ECharts的中国地图