HTML5 echarts中国散点地图联动实例下载
2017-03-30 13:42:08 By: shinyuu
分享一个html5 echarts地图分布动画的特效、Demo是一款带有炫光效果的html5 echarts图表插件、一般用于全国的节点分部等功能、如果大家有使用过百度云加速的话、不难看出、这一款插件是模仿百度云加速的地图节点分布的、效果非常不错
使用方法分为4个步骤
1、为ECharts准备一个具备大小(宽高)的Dom-->
<div id="mainMap" style="height:400px;width: 700px;padding:10px;background:#1B1B1B"> </div>
2、引入echarts.js
<script type="text/javascript" src="js/jquery-1.8.0.js"></script> <script src="js/echarts.js" charset="UTF-8"></script> <script type="text/javascript"> $(´#document´).ready(function(){ getEcharts(); }); </script>
3、为模块加载器配置echarts的路径、从当前页面链接到echarts.js、定义所需图表路径
require.config({ paths: { echarts: ´./js´ } });
4、动态加载echarts然后在回调函数中开始使用、注意保持按需加载结构定义图表路径
require( [ ´echarts´, ´echarts/chart/map´ ], function (ec) { // --- 地图 --- var myChart2 = ec.init(document.getElementById(´mainMap´)); myChart2.setOption({ //TODO 以下是包括节点在内的代码 //TODO 可直接下载源代码查看 }); });
以上是Demo的部分代码片段以及使用方法、希望对大家有用、下面给大家贴上Demo的源代码下载
echarts 地图实例Demo源代码下载链接: echarts自定义地图 密码: zc8y
若资源对你有帮助、浏览后有很大收获、不妨小额打赏我一下、你的鼓励是维持我不断写博客最大动力
想获取DD博客最新代码、你可以扫描下方的二维码、关注DD博客微信公众号(ddblogs)
或者你也可以关注我的新浪微博、了解DD博客的最新动态:DD博客官方微博(dwtedx的微博)
如对资源有任何疑问或觉得仍然有很大的改善空间、可以对该博文进行评论、希望不吝赐教
为保证及时回复、可以使用博客留言板给我留言: DD博客留言板(dwtedx的留言板)
感谢你的访问、祝你生活愉快、工作顺心、欢迎常来逛逛
IMJMJ.COM小爱卖家 2022-12-03 08:06:04 1 评 | 回复
来这里多学习~!