银财中国网
echarts——实现3D地图+3D柱状图 效果——粗糙代码记录——技能提升
创始人
2024-02-12 21:45:59
0次

最近看到同事在弄下面的这个图，这个图是从网上看到的，是某个网站的收费项目：
在这里插入图片描述

收费模板：￥29.9元购买，且必须是高级版+尊享版才能够购买这个。。。

在这里插入图片描述
在这里插入图片描述

死贵！！！

所以，最后的决定是通过echarts中的3D地图来写。但是写出来的效果不慎好看。功能是可以实现的。

初版效果图如下：
在这里插入图片描述
带颜色的地图如下：
在这里插入图片描述

1.安装echarts和echarts-gl

npm install echarts --save
npm install echarts-gl --save

在这里插入图片描述

2.局部引入使用

直接上代码：

import * as echarts from 'echarts';
import 'echarts-gl';

3. 下载中国地图数据，存储到本地路径下

我这边是存储到当前文件夹中了。。。
稍后我会把china.js文件上传到资源中心，有需要的可以自行下载。
在这里插入图片描述

4. html模板内容

5.script内容

在这里插入图片描述
背景颜色是echarts外层的div的background来控制的，改成白色，更显眼一点。

基本布局完成！！！

多多积累，多多收货！！！

附录参考链接：
echarts实现3D地图：http://www.javashuo.com/article/p-fcfpjabz-gh.html

上一篇：省略号有哪些作用（省略号有哪些作用小学） 省略号有哪些作用 诗歌中省略号的作用

下一篇：2019 国际大学生程序设计竞赛（ICPC）亚洲区域赛（银川） 7题

相关内容

热门资讯

喜欢穿一身黑的男生性格（喜欢穿... 今天百科达人给各位分享喜欢穿一身黑的男生性格的知识，其中也会对喜欢穿一身黑衣服的男人人好相处吗进行解...
发春是什么意思（思春和发春是什... 本篇文章极速百科给大家谈谈发春是什么意思，以及思春和发春是什么意思对应的知识点，希望对各位有所帮助，...
网络用语zl是什么意思（zl是... 今天给各位分享网络用语zl是什么意思的知识，其中也会对zl是啥意思是什么网络用语进行解释，如果能碰巧...
为什么酷狗音乐自己唱的歌不能下... 本篇文章极速百科小编给大家谈谈为什么酷狗音乐自己唱的歌不能下载到本地?，以及为什么酷狗下载的歌曲不是...
华为下载未安装的文件去哪找（华... 今天百科达人给各位分享华为下载未安装的文件去哪找的知识，其中也会对华为下载未安装的文件去哪找到进行解...
家里可以做假山养金鱼吗（假山能... 今天百科达人给各位分享家里可以做假山养金鱼吗的知识，其中也会对假山能放鱼缸里吗进行解释，如果能碰巧解...
四分五裂是什么生肖什么动物（四... 本篇文章极速百科小编给大家谈谈四分五裂是什么生肖什么动物，以及四分五裂打一生肖是什么对应的知识点，希...
怎么往应用助手里添加应用（应用... 今天百科达人给各位分享怎么往应用助手里添加应用的知识，其中也会对应用助手怎么添加微信进行解释，如果能...
客厅放八骏马摆件可以吗（家里摆... 今天给各位分享客厅放八骏马摆件可以吗的知识，其中也会对家里摆八骏马摆件好吗进行解释，如果能碰巧解决你...
美团联名卡审核成功待激活（美团... 今天百科达人给各位分享美团联名卡审核成功待激活的知识，其中也会对美团联名卡审核未通过进行解释，如果能...