All Projects → dongkelun → echarts-map

dongkelun / echarts-map

Licence: other
Echarts中国地图三级钻取

Programming Languages

javascript
184084 projects - #8 most used programming language
HTML
75241 projects
CSS
56736 projects

Labels

Projects that are alternatives of or similar to echarts-map

Chronus
🕐 一款能帮助管理生活目标的微信小程序
Stars: ✭ 195 (+214.52%)
Mutual labels:  echarts
Echarts Php
Echarts-PHP a PHP library that works as a wrapper for the Echarts js library
Stars: ✭ 253 (+308.06%)
Mutual labels:  echarts
echarts-handbook
Apache ECharts Handbook
Stars: ✭ 59 (-4.84%)
Mutual labels:  echarts
Vue Questionnaire
使用 Vue + CI 开发的简易问卷调查系统,演示账户:admin / admin
Stars: ✭ 220 (+254.84%)
Mutual labels:  echarts
Node Echarts
Generate chart by echarts in nodejs.
Stars: ✭ 242 (+290.32%)
Mutual labels:  echarts
server-monitor-ui
Server Operation Monitor
Stars: ✭ 17 (-72.58%)
Mutual labels:  echarts
Jest Canvas Mock
🌗 A module used to mock canvas in Jest.
Stars: ✭ 189 (+204.84%)
Mutual labels:  echarts
echarts-www
Source of Apache ECharts website
Stars: ✭ 59 (-4.84%)
Mutual labels:  echarts
Bbs admin
vue+ElementUI+axios 接入数据,仿segmentfault,做相关的后台管理系统 https://lyh.red/admin/
Stars: ✭ 252 (+306.45%)
Mutual labels:  echarts
jeecg
JEECG是一款基于代码生成器的J2EE快速开发平台,开源界“小普元”超越传统商业企业级开发平台。引领新的开发模式(Online Coding模式(自定义表单) - > 代码生成器模式 - > 手工MERGE智能开发), 可以帮助解决Java项目90%的重复工作,让开发更多关注业务逻辑。既能快速提高开发效率,帮助公司节省人力成本,同时又不失灵活性。具备:表单配置能力(无需编码)、移动配置能力、工作流配置能力、报表配置能力(支持移动端)、插件开发能力(可插拔)
Stars: ✭ 2,090 (+3270.97%)
Mutual labels:  echarts
Bbs Ssm
南生论坛基于SSM框架,自适应手机端和电脑端,界面简洁美观,功能完善。演示地址:http://www.nanshengbbs.top
Stars: ✭ 221 (+256.45%)
Mutual labels:  echarts
Jh flutter demo
a flutter demo
Stars: ✭ 229 (+269.35%)
Mutual labels:  echarts
ngx-echarts
Apache ECharts component for Angular(基于 Angular 的 Apache ECharts 组件)
Stars: ✭ 82 (+32.26%)
Mutual labels:  echarts
Python Wechat Itchat
微信机器人,基于Python itchat接口功能实例展示:01-itchat获取微信好友或者微信群分享文章、02-itchat获取微信公众号文章、03-itchat监听微信公众号发送的文章、04 itchat监听微信群或好友撤回的消息、05 itchat获得微信好友信息以及表图对比、06 python打印出微信被删除好友、07 itchat自动回复好友、08 itchat微信好友个性签名词云图、09 itchat微信好友性别比例、10 微信群或微信好友撤回消息拦截、11 itchat微信群或好友之间转发消息
Stars: ✭ 216 (+248.39%)
Mutual labels:  echarts
Lidea
大型分布式系统实时监控平台
Stars: ✭ 28 (-54.84%)
Mutual labels:  echarts
Vue Echarts
A simple yet flexible custom directive for using Echarts in Vue.js(v2.x.x) apps.
Stars: ✭ 193 (+211.29%)
Mutual labels:  echarts
echarty
Minimal R/Shiny Interface to ECharts.js
Stars: ✭ 49 (-20.97%)
Mutual labels:  echarts
Admin-Frame-Vue3
基于Vue3 + Element-Plus + Vite 开发的中/后台管理系统
Stars: ✭ 181 (+191.94%)
Mutual labels:  echarts
echarts-for-svelte
📈 Baidu Echarts(v3.0 & v4.0) components for Svelte wrapper.
Stars: ✭ 25 (-59.68%)
Mutual labels:  echarts
ng-sunPawd
基于ng-zorro实现的Angular后台基础框架
Stars: ✭ 43 (-30.65%)
Mutual labels:  echarts

Echarts实现中国地图三级钻取

1、只是实现了基本功能,没有其他复杂绚丽的实现

2、演示地址

暂时在没有下级地图的时候会直接返回到第一级中国地图,后面可能改为:提示没有下级地图,然后增加一个回到一级地图的按钮

http://front-end.dongkelun.com/echarts-map

3、动图演示

一张一张的截图,图片太多了,就先学了一下录制gif

4、代码

其中地图的json数据是同事之前下载的(可能不全,几个没用的Json没有去掉),在别人的GitHub上也可以找到

代码已上传到GitHub:https://github.com/dongkelun/echarts-map

5、部署

本项目为静态网页,但由于需要获取.json文件的数据,所以不能直接打开index.html(会报js的错误,可以自己试试)

将本项目复制到服务器下,如tomcat的webapps目录下,启动tomcat,然后在浏览器里输入http://localhost:8080/echarts-map即可

因为自己在学Vue,后面可能会用Vue重新实现一下,并添加一些相对复杂的功能,比如添加数据,使每个省的颜色不一样,更多样化一些。 之所以没有先用Vue实现,也没有实现比较复杂的效果,是因为考虑到不是每个人都会Vue,所以用最简单的静态html+css+js实现,这样能使每个人都能看懂,而且可以最基础的地图钻取的模版。后面如果用Vue实现的话,会新建一个项目并上传到GitHub。

6、博客地址

https://dongkelun.com/2018/11/27/echartsChinaMap/

7、Vue版本(更新于2019.02.20)

https://github.com/dongkelun/vue-echarts-map

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].