Vue3 + Echarts 5 绘制带有立体感流线中国地图
本文绘制的地图效果图如下:
一、Echarts 使用五部曲
1、下载并引入 echarts
Echarts 已更新到了 5.0 版本,安装完记得检查下自己的版本是否是 5.0 。
npm install echarts --save
下载地图的 json 数据
可以下载中国以及各个省份地图数据。免费的文件下载地址:
http://datav.aliyun.com/portal/school/atlas/area_selector#&lat=30.332329214580188&lng=106.72278672066881&zoom=3.5
记得收藏哦!免得浪费加班时间。
引入:
import * as echarts from "echarts"
import chinaJSON from '../../assets/json/china.json'
2、准备容器
给元素定义宽高确定的容器用来装地图。
<template><div id="chinaMap"></div>
</template>
3、实例化 echarts 对象
import * as echarts from 'echarts'
import chinaJson from '../../assets/json/china.json'
var myChart = echarts.init(document.getElementById('chinaMap'))
// 创建了一个 myChart 对象
4、指定配置项和数据
var option = {// 存放需要绘制图片类型,以及样式设置
}
5、给 echarts 对象设置配置项
myChart.setOption(option)
就这么简单几步还用你告诉我吗?不瞒你说,官网也有这东东。虽然这些你都知道,但是并不影响你还是不知道流线图是怎么绘制出来的。下面我们看看是如何绘制的。
二、开始绘制流线中国地图
第一步:先绘制一个中国地图
import * as echarts from 'echarts'
import chinaJson from '../../assets/json/china.json'
import { onMounted, ref } from 'vue'
const chinaMap = ref()
onMounted(() => {drawChina()
})
function drawChina() {var myChart = echarts.init(chinaMap.value)echarts.registerMap('china', chinaJson) //注册可用的地图var option = {geo: {show: true,//设置中心点center: [105.194115019531, 35.582111640625],map: 'china',roam: true, //是否允许缩放,拖拽zoom: 1, //初始化大小//缩放大小限制scaleLimit: {min: 0.1, //最小max: 12, //最大},//各个省份模块样式设置itemStyle: {normal: {areaColor: '#3352c7',//背景色color: 'red',//字体颜色borderColor: '#5e84fd',borderWidth: 2,},},//高亮状态emphasis: {itemStyle: {areaColor: '#ffc601',},label: {show: true,color: '#fff',},},// 显示层级z: 10,},}myChart.setOption(option)
}
一个简单的地图就绘制好了,继续研究如何添加流线。
第二步:添加流线
通过 series 属性来设置发色点的样式,接受点的样式,以及线条和线条上的动画。
设置 series 的值:
// 中国地理坐标图
var chinaGeoCoordMap: Object = {西安: [108.906866, 34.162109],拉萨: [91.140856, 29.645554],
}
//发射点
var chinaDatas = [[{name: '拉萨',value: 2,},],
]
//投射点
const scatterPos = [108.906866, 34.162109]
// 数据转换
var convertData = function (data: any) {var res = []for (var i = 0; i < data.length; i++) {var dataItem = data[i]var fromCoord = chinaGeoCoordMap[dataItem[0].name]var toCoord = scatterPosif (fromCoord && toCoord) {res.push([{coord: fromCoord,value: dataItem[0].value,},{coord: toCoord,},])}}return res
}var series: Array<any> = []
;[['西安', chinaDatas]].forEach(function (item, i) {series.push(//设置指向箭头信息{type: 'lines',zlevel: 2,effect: {show: true,period: 4, //箭头指向速度,值越小速度越快trailLength: 0.02, //特效尾迹长度[0,1]值越大,尾迹越长重symbol: 'arrow', //箭头图标symbolSize: 8, //图标大小},lineStyle: {normal: {color: '#adffd0',width: 1, //尾迹线条宽度opacity: 1, //尾迹线条透明度curveness: 0.3, //尾迹线条曲直度},},data: convertData(item[1]),},// 发射点位置涟漪等效果{type: 'effectScatter',coordinateSystem: 'geo',zlevel: 2,rippleEffect: {//涟漪特效period: 4, //动画时间,值越小速度越快brushType: 'stroke', //波纹绘制方式 stroke, fillscale: 4, //波纹圆环最大限制,值越大波纹越大},label: {normal: {show: true,position: 'right', //显示位置offset: [5, 0], //偏移设置formatter: function (params) {//圆环显示文字return params.data.name},fontSize: 13,},emphasis: {show: true,},},symbol: 'circle',symbolSize: function (val: Array<any>) {return 5 + val[2] * 5 //圆环大小},itemStyle: {normal: {show: false,color: '#f8f9f5',},},data: item[1].map(function (dataItem: any) {return {name: dataItem[0].name,value: chinaGeoCoordMap[dataItem[0].name].concat([dataItem[0].value]),}}),},//被攻击点{type: 'effectScatter',coordinateSystem: 'geo',zlevel: 2,rippleEffect: {//涟漪相关period: 2,brushType: 'stroke',scale: 5,},label: {normal: {show: true,position: 'right',color: '#0f0',formatter: '{b}',textStyle: {color: '#fff',fontSize: 12,},},emphasis: {show: true,color: '#f60',},},itemStyle: {normal: {color: '#f00',},},symbol: 'circle',symbolSize: 10, //圆圈大小data: [{name: item[0],value: chinaGeoCoordMap[item[0]].concat([10]),},],},)
})
给上边的 option 添加 series 属性。
第三步:添加立体投影
添加立体投影的时候,由于并没有这样的属性,所以需要通过设置边框投影,再加一个偏移。
实现原理:绘制两个地图,设置中心点是一样的,然后一个设置边框投影+偏移,它的层级设置小一点,上边再绘制一个地图不设置投影,这样就能够实现上述效果。
// series 添加一个对象,绘制新地图
{//绘制一个新地图type: 'map',map: 'china',zoom: 1,center: [105.194115019531, 35.582111640625],z: -1,aspectScale: 0.75, //itemStyle: {normal: {areaColor: '#f00',borderColor: '#090438',borderWidth: '2',shadowColor: '#090438',shadowOffsetX: 0,shadowOffsetY: 15,},},
}
上述效果的完整源码:
<template><div>首页<divref="chinaMap"class="chinaMap"style="height: 800px;border: solid 1px red;width: 100%;background: #0b0873;">地图1</div></div>
</template>
<style scoped>
.chinaMap {transform: rotate3d(1, 0, 0, 35deg);
}
</style>
<script lang="ts" setup>
import * as echarts from 'echarts'
import chinaJson from '../../assets/json/china.json'
import { onMounted, ref } from 'vue'
const chinaMap = ref()
onMounted(() => {drawChina()
})
/**************************** series start ************************************/
//中国地理坐标图
var chinaGeoCoordMap: Object = {西安: [108.906866, 34.162109],柯桥区: [120.476075, 30.078038],拉萨: [91.140856, 29.645554],沈阳: [123.431474, 41.805698],新疆: [87.627704, 43.793026],台湾: [121.508903, 25.044319],
}
var chinaDatas = [[{name: '柯桥区',value: 0,},],[{name: '拉萨',value: 2,},],[{name: '沈阳',value: 1,},],[{name: '新疆',value: 1,},],[{name: '台湾',value: 1,},],
]
//设置投射点
const scatterPos = [108.906866, 34.162109]var convertData = function (data: any) {var res = []for (var i = 0; i < data.length; i++) {var dataItem = data[i]var fromCoord = chinaGeoCoordMap[dataItem[0].name]var toCoord = scatterPosif (fromCoord && toCoord) {res.push([{coord: fromCoord,value: dataItem[0].value,},{coord: toCoord,},])}}console.log('res', res)return res
}var series: Array<any> = []
;[['西安', chinaDatas]].forEach(function (item, i) {console.log(item, item[0])series.push({//绘制一个新地图type: 'map',map: 'china',zoom: 1,center: [105.194115019531, 35.582111640625],z: -1,aspectScale: 0.75, //itemStyle: {normal: {areaColor: '#f00',borderColor: '#090438',borderWidth: '2',shadowColor: '#090438',shadowOffsetX: 0,shadowOffsetY: 15,},},},//设置指向箭头信息{type: 'lines',zlevel: 2,effect: {show: true,period: 4, //箭头指向速度,值越小速度越快trailLength: 0.02, //特效尾迹长度[0,1]值越大,尾迹越长重symbol: 'arrow', //箭头图标symbolSize: 8, //图标大小},lineStyle: {normal: {color: '#adffd0',width: 1, //尾迹线条宽度opacity: 1, //尾迹线条透明度curveness: 0.3, //尾迹线条曲直度},},data: convertData(item[1]),},// 发射点位置涟漪等效果{type: 'effectScatter',coordinateSystem: 'geo',zlevel: 2,rippleEffect: {//涟漪特效period: 4, //动画时间,值越小速度越快brushType: 'stroke', //波纹绘制方式 stroke, fillscale: 4, //波纹圆环最大限制,值越大波纹越大},label: {normal: {show: true,position: 'right', //显示位置offset: [5, 0], //偏移设置formatter: function (params) {//圆环显示文字return params.data.name},fontSize: 13,},emphasis: {show: true,},},symbol: 'circle',symbolSize: function (val: Array<any>) {return 5 + val[2] * 5 //圆环大小},itemStyle: {normal: {show: false,color: '#f8f9f5',},},data: item[1].map(function (dataItem: any) {return {name: dataItem[0].name,value: chinaGeoCoordMap[dataItem[0].name].concat([dataItem[0].value]),}}),},//被攻击点{type: 'effectScatter',coordinateSystem: 'geo',zlevel: 2,rippleEffect: {//涟漪相关period: 2,brushType: 'stroke',scale: 5,},label: {normal: {show: true,position: 'right',// offset:[5, 0],color: '#0f0',formatter: '{b}',textStyle: {color: '#fff',fontSize: 12,},},emphasis: {show: true,color: '#f60',},},itemStyle: {normal: {color: '#f00',},},symbol: 'circle',symbolSize: 10, //圆圈大小data: [{name: item[0],value: chinaGeoCoordMap[item[0]].concat([10]),},],},)
})/****************************************************************/
function drawChina() {var myChart = echarts.init(chinaMap.value)echarts.registerMap('china', chinaJson) //注册可用的地图var option = {tooltip: {trigger: 'item',backgroundColor: 'rgba(166, 200, 76, 0.82)',borderColor: '#FFFFCC',showDelay: 0,hideDelay: 0,enterable: true,transitionDuration: 0,extraCssText: 'z-index:100',formatter: function (params, ticket, callback) {//根据业务自己拓展要显示的内容var res = ''var name = params.namevar value = params.value[params.seriesIndex + 1]res = "<span style='color:#fff;'>" + name + '</span><br/>数据:' + valuereturn res},},geo: {show: true,center: [105.194115019531, 35.582111640625],map: 'china',roam: true, //是否允许缩放,拖拽zoom: 1, //初始化大小//缩放大小限制scaleLimit: {min: 0.1, //最小max: 12, //最大},//设置中心点//center: [95.97, 29.71],//省份地图添加背景//regions: regions,itemStyle: {normal: {areaColor: '#3352c7',color: 'red',borderColor: '#5e84fd',borderWidth: 2,},},label: {color: 'rgba(255,255,255,0.5)',show: false,},//高亮状态emphasis: {itemStyle: {areaColor: '#ffc601',},label: {show: true,color: '#fff',},},z: 10,},//配置属性series: series,}myChart.setOption(option)
}
</script>
Vue3 + Echarts 5 绘制带有立体感流线中国地图相关推荐
- 使用matlab和GMT联合绘制带有省界的中国地图
使用matlab和GMT联合绘制带有省界的中国地图 1下载省级边界数据,地址:http://nfgis.nsdi.gov.cn/nfgis/chinese/c_xz.htm 网站存储有多级边界数据以及 ...
- Vue+Vuex+Axios+ECharts 画一个动态更新的中国地图
一.生成项目及安装插件 # 安装 Vue Cli npm install vue-cli -g# 初始化项目 vue init webpack vue-china-map# 切到目录下 cd vue- ...
- 基于Echarts实现可视化数据大屏中国地图城市区块选择代码
前言
- vue中用echarts 绘制geo 中国地图
前言 由于5.X版本的echarts没有了map包,因此我先安装了5.1.1版本,再安装了4.9版本,并将4.9版本中的map包复制到了5.1.1版本里. 绘制效果如下: 1.省份根据数据值,展示不同 ...
- [Echarts可视化] 一.入门篇之简单绘制中国地图和贵州地区
最近发生了很多事情,去到了一个新环境学习.但是不论在哪里,我都需要不忘初心,坚持做自己喜欢的事情,在CSDN写博客.教学.爱娜.生活等等. 这篇文章主要是通过Echarts可视化介绍入 ...
- 使用Echarts完成对中国地图的绘制
目录 前言 1.什么是Echarts插件 2.如何在vue中使用Echarts 3.中国地图的具体样式 4.如何使用Echarts来完成中国地图的绘制 5.总结 前言 我们在使用代码绘画地图的时候通常 ...
- vue使用echarts来绘制中国地图下钻省市区县级地图
文章目录 前言 一.echarts 二.使用步骤 1.vue安装.引入echarts 2.使用echarts 总结 前言 公司需要一个中国地图点击可进入省市区县级,但是在我使用echarts绘制中国地 ...
- Echarts实现中国地图线路图特效(一对多发射点)
1.效果图 2.完整配置代码 可以把代码直接贴到官网测试效果: https://www.echartsjs.com/examples/zh/editor.html?c=map-polygon // 中 ...
- python绘制一份完美的中国地图
本文章小编将带你学会使用python绘制一份完美的中国地图~ 昨日,突地被一大早的微博热搜 #自然资源部核查处理问题中国地图# 刷屏,恍惚中看到了近日在追的<亲爱的,热爱的>.小编还沉浸在 ...
最新文章
- 用 jQuery Masonry 插件创建瀑布流式的页面(转)
- GNU C之__attribute__
- php添加开机启动脚本_centos 7.2 添加php7 的 php-fpm 开机启动
- 爬虫 spider10——搭建elk平台,开发服务提供者
- lichee linux nfs,SPI Flash 系统编译
- 1090. Highest Price in Supply Chain (25) dfs
- 背景复合写法(HTML、CSS)
- 时序分析基本概念介绍——时钟sdc
- comsol固体传热_参与介质中辐射传热的 4 种计算方法
- android pickerview 多行,Android PickerView 自定义条件选择器 联动
- 在ubuntu中安装DroidCam
- js 金额转中文大写格式
- 计算机硬盘有坏道,电脑硬盘有坏道怎么办
- win7上怎么安装linux系统安装教程,怎么装系统双系统安装教程 win7 linux
- flutter打包安卓问题
- RuntimeError: Could not find GCC executable.
- 「镁客早报」三星第十一代商务旗舰W2019发布;美国实现120KW无线充电
- activiti 撤销
- 疯狂的架构,BAT加华为、联想、新浪公司组织结构图一览
- 一幅长文细学华为MRS大数据开发(四)——HBase
热门文章
- 北理工计算机组成原理在线作业,北理工19秋《计算机组成原理》在线作业(满分)...
- SSM+手机销售网站 毕业设计-附源码161043
- html背景视频模糊效果,视频背景如何模糊效果 ae视频模糊效果怎么做
- Spring Boot教程(二十五)返回JSON格式
- 图片如何缩小不降低清晰度?
- 七夕情人节520程序员表白html网页源码送女友男友礼物
- 行业分析-全球与中国AI支援X光影像解决方案市场现状及未来发展趋势
- 机器学习深度学习数据集大汇总
- unity3d摄像机
- xa 全局锁_索尼Sony Xperia X/Performance/XA解锁教程及解锁码