【ECharts官方示例】"北京公交路线 - 线特效" bug修正版
2016-11-23 14:58
567 查看
官方Demo地址: http://echarts.baidu.com/demo.html#lines-bmap-effect
源代码地址 : https://github.com/ecomfe/echarts/blob/master/test/lines-bus.html
下载下来以后不能运行。需要自己引入jquery,然后浏览器还会抛出异常
Uncaught TypeError: data.map is not a function,解决办法官方有人提到: https://github.com/ecomfe/echarts/issues/3821
全部修复以后代码如下:
# lines-bmap-effect.html
<!DOCTYPE html> <html style="height: 100%"> <head> <meta charset="utf-8"> </head> <body style="height: 100%; margin: 0"> <div id="container" style="height: 100%"></div> <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/jquery/jquery.js"></script> <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts-all-3.js"></script> <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/dataTool.min.js"></script> <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js"></script> <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/world.js"></script> <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=ZUONbpqGBsYGXNIYHicvbAbM"></script> <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/bmap.min.js"></script> <script type="text/javascript"> var dom = document.getElementById("container"); var myChart = echarts.init(dom); var app = {}; option = null; app.title = '北京公交路线 - 线特效'; $.getJSON('lines-bus.json', function(data) { var hStep = 300 / (data.length - 1); var busLines = [].concat.apply([], data.map(function (busLine, idx) { var prevPt; var points = []; for (var i = 0; i < busLine.length; i += 2) { var pt = [busLine[i], busLine[i + 1]]; if (i > 0) { pt = [ prevPt[0] + pt[0], prevPt[1] + pt[1] ]; } prevPt = pt; points.push([pt[0] / 1e4, pt[1] / 1e4]); } return { coords: points, lineStyle: { normal: { color: echarts.color.modifyHSL('#5A94DF', Math.round(hStep * idx)) } } }; })); myChart.setOption(option = { bmap: { center: [116.46, 39.92], zoom: 10, roam: true, mapStyle: { 'styleJson': [ { 'featureType': 'water', 'elementType': 'all', 'stylers': { 'color': '#031628' } }, { 'featureType': 'land', 'elementType': 'geometry', 'stylers': { 'color': '#000102' } }, { 'featureType': 'highway', 'elementType': 'all', 'stylers': { 'visibility': 'off' } }, { 'featureType': 'arterial', 'elementType': 'geometry.fill', 'stylers': { 'color': '#000000' } }, { 'featureType': 'arterial', 'elementType': 'geometry.stroke', 'stylers': { 'color': '#0b3d51' } }, { 'featureType': 'local', 'elementType': 'geometry', 'stylers': { 'color': '#000000' } }, { 'featureType': 'railway', 'elementType': 'geometry.fill', 'stylers': { 'color': '#000000' } }, { 'featureType': 'railway', 'elementType': 'geometry.stroke', 'stylers': { 'color': '#08304b' } }, { 'featureType': 'subway', 'elementType': 'geometry', 'stylers': { 'lightness': -70 } }, { 'featureType': 'building', 'elementType': 'geometry.fill', 'stylers': { 'color': '#000000' } }, { 'featureType': 'all', 'elementType': 'labels.text.fill', 'stylers': { 'color': '#857f7f' } }, { 'featureType': 'all', 'elementType': 'labels.text.stroke', 'stylers': { 'color': '#000000' } }, { 'featureType': 'building', 'elementType': 'geometry', 'stylers': { 'color': '#022338' } }, { 'featureType': 'green', 'elementType': 'geometry', 'stylers': { 'color': '#062032' } }, { 'featureType': 'boundary', 'elementType': 'all', 'stylers': { 'color': '#465b6c' } }, { 'featureType': 'manmade', 'elementType': 'all', 'stylers': { 'color': '#022338' } }, { 'featureType': 'label', 'elementType': 'all', 'stylers': { 'visibility': 'off' } } ] } }, series: [{ type: 'lines', coordinateSystem: 'bmap', polyline: true, data: busLines, silent: true, lineStyle: { normal: { // color: '#c23531', // color: 'rgb(200, 35, 45)', opacity: 0.2, width: 1 } }, progressiveThreshold: 500, progressive: 200 }, { type: 'lines', coordinateSystem: 'bmap', polyline: true, data: busLines, lineStyle: { normal: { width: 0 } }, effect: { constantSpeed: 20, show: true, trailLength: 0.1, symbolSize: 1.5 }, zlevel: 1 }] }); });; if (option && typeof option === "object") { myChart.setOption(option, true); } </script> </body> </html>
# lines-bus.json
可以在这里下载数据 : https://raw.githubusercontent.com/ecomfe/echarts/master/test/data/lines-bus.json相关文章推荐
- Safari 下用 "location.href = filePath" 实现下载功能的诡异 bug
- php switch case的"bug"
- 编程实现查找两个字符串的最大公共子串 示例:"aocdfe"和"pmcdfa"最大公共子串为"cfd"
- Java中关于 BigDecimal 的一个导致double精度损失的"bug"
- ECharts官方示例下载源代码简洁方法
- [Struts2]"s:optiontransferselect" 标签BUG
- BUG:Open quote is expected for attribute "{1}" associated with an element type "id".
- "必须输入正文"BUG的解决办法!
- 关于"Auto-Correct"——自动修正功能原理谈究
- STM32 USB转串口CDC官方示例程序修正
- "Issues ld: library not found for -liOS-Echarts"的第四种解决方法
- #define宏定义形式的"函数"导致的bug
- socket.io获取客户端的IP地址(修正官方1.0.4版本BUG)
- [BUG]拍照官方示例
- 必备技能之一:熟悉北京的地铁和公交行走路线
- SSIS 尝试运行官方的示例 DataCleaning.sln项目0xC0202009 at DataCleaning, Connection manager "LocalHost.AdventureWorks": An OLE DB er
- "数学口袋精灵"bug
- "Cannot convert value '0000-00-00' from column 2 to TIMESTAMP"mysql时间转换bug
- Firefox3下<object>标签导致产生空白的"bug"
- (用微信扫的静态链接二维码)微信native支付模式官方提供的demo文件中的几个bug修正