在我的博客园首页,增加了一个“足迹”菜单,这是自定义的页面,足迹页面通过编辑html源代码指向了js代码,显示了地图。进入足迹编辑页面是看不到内容的,只有点击HTML才能看到内容:

可以看到源码中定义了一块地图显示区域,地图使用的是百度的echarts,自己写了一个脚本,显示自己的足迹,脚本上传到博客园的文件中。

自己的脚本源码如下:

万码学堂,电脑培训,计算机培训,Java培训,JavaEE开发培训,青岛软件培训,软件工程师培训

 1 // Step:3 为模块加载器配置echarts的路径,从当前页面链接到echarts.js,定义所需图表路径 2 require.config({ 3     paths: { 4         //echarts: './js/echarts' 5         echarts: 'http://echarts.baidu.com/build/dist' 6     } 7 }); 8  9 // Step:4 动态加载echarts然后在回调函数中开始使用,注意保持按需加载结构定义图表路径10 require(11     [12         'echarts',13         'echarts/chart/map'14     ],15     function (ec) {16         // --- 地图 ---17         var myChart2 = ec.init(document.getElementById('mainMap'));18         myChart2.setOption({19             tooltip: {20                 trigger: 'item',21                 formatter: '{b}'22             },23             series: [24                 {25                     name: '中国',26                     type: 'map',27                     mapType: 'china',28                     selectedMode: 'multiple',29                     itemStyle: {30                         normal: {31                             borderWidth: 1,32                             borderColor: 'lightgreen',33                             color: 'orange',34                             label: {35                                 show: true36                             }37                         },38                         emphasis: {                 // 也是选中样式39                             borderWidth: 1,40                             borderColor: '#fff',41                             color: '#32cd32',42                             label: {43                                 show: true,44                                 textStyle: {45                                     color: '#fff'46                                 }47                             }48                         }49                     },50                     data: [51                        { name: '湖北', selected: true },52                         { name: '北京', selected: true },53                         { name: '黑龙江', selected: true },54                         { name: '山东', selected: true },55                         { name: '天津', selected: true },56                         { name: '河北', selected: true },57                         { name: '安徽', selected: true }],58             markPoint : {59                 symbol:'emptyCircle',60                 symbolSize : function (v){61                     return 562                 },63                 effect : {64                     show: true,65                     shadowBlur : 066                 },67                 itemStyle:{68                     normal:{69                         label:{show:false}70                     }71                 },72                         data: [73                             { name: '黄冈', geoCoord: [114.46, 29.92] },74                             { name: '荆州(2008.9)', geoCoord: [112.239741, 30.335165] },75                             { name: '武汉(2009.1)', geoCoord: [114.31, 30.52] },76                             { name: '北京(2011.7)', geoCoord: [116.46, 39.92] },77                             { name: '大庆(2011.10)', geoCoord: [125.03, 46.58] },78                             { name: '泰山(2014.6)', geoCoord: [117.13, 36.18] },79                             { name: '天津(2014.8)', geoCoord: [117.2, 39.13] },80                             { name: '北戴河(2014.8)', geoCoord: [119.57, 39.95]},81                             { name: '安庆(2015.2)', geoCoord: [116.63,30.41]}82                         ]83                     }84                 }85             ]86         });87     }88 );

万码学堂,电脑培训,计算机培训,Java培训,JavaEE开发培训,青岛软件培训,软件工程师培训

首页的足迹链接是修改首页显示,链接到这个页面的。

通过本例,可以实现自定义页面,自由实现效果。

相关文章可以参考:

修改博客园界面样式1

修改博客园界面样式2

http://www.cnblogs.com/yangtze-yufei/p/6367096.html

网友评论