如何添加使用echats地图悬浮显示内容
2017-12-24 23:14
477 查看
/初始化绘制全国地图配置 var option = { backgroundColor: '#000', title: { text: 'Echarts3 中国地图农村金融', subtext: '三级科技下乡', link: 'http://www.cnblogs.com/sxz2008/', left: 'center', textStyle: { color: '#fff', fontSize: 16, fontWeight: 'normal', fontFamily: "Microsoft YaHei" }, subtextStyle: { color: '#ccc', fontSize: 13, fontWeight: 'normal', fontFamily: "Microsoft YaHei" } }, tooltip: { //显示悬浮窗口 trigger: 'item', //使用这个函数返回悬浮内容 formatter:function(params){ //定义一个res变量来保存最终返回的字符结果,并且先把地区名称放到里面 // var res='随机数字'+'<br />'; var res=params.name+':'+'随机数字'+'<br />'; var myseries=provinces;//省市区 for(var i=0;i<myseries.length;i++){ if(myseries[i].name==params.name){ res+=myseries[i].name+':'+myseries[i].value+'<br />'; } } //市区 for(var j=0;j<city.length;j++){ if(city[j].name==params.name){ res+=city[j].name+':'+city[j].value+'<br />'; } } //县区 for(var k=0;k<area.length;k++){ if(area[k].name==params.name){ res+=area[k].name+':'+area[k].value+'<br />'; } } return res; }, }, toolbox: { show: true, orient: 'vertical', left: 'right', top: 'center', feature: { dataView: { readOnly: false }, restore: {}, saveAsImage: {} }, iconStyle: { normal: { color: '#fff' } } }, visualMap: { type: 'continuous', // 连续型 min: 0, // 值域最小值,必须参数 max: 1200, // 值域最大值,必须参数 calculable: true, // 是否启用值域漫游 inRange: { color: ['#50a3ba', '#eac736', '#d94e5d'] // 指定数值从低到高时的颜色变化 }, textStyle: { color: '#fff' // 值域控件的文本颜色 } }, animationDuration: 1000, animationEasing: 'cubicOut', animationDurationUpdate: 1000 };
使用echarts.js 改造git项目能够省市区显示具体内容;主要是json数据和formatter函数返回的值
相关文章推荐
- 网站添加自己公司的地图(使用的百度地图)时只显示一个空白框
- 使用WindowManager.addView()方法增加的悬浮窗口,如何固定屏幕显示方向?
- 【iOS】高德地图MAMapKit的使用:地图显示、添加大头针、导航、定位功能介绍
- C# GridView 在使用分页时,如何不显示底部自动添加的分页风格
- 如何实现js展开收起(折叠)效果呢?例如:一段内容过长了,我限制他显示为20个字内,但是超出了20的就先用省略号代替,然后后面添加一个展开,点击展开后就显示所有的内容,这时候展开按钮就变成了 折叠按钮
- 关于asp.net mvc 使用ueditor添加内容 前端只显示原样标签的问题
- 如何在vue脚手架里面使用echarts 组件显示中国地图---亲测
- 地图的显示以及如何添加大头针
- PHP连接mysql数据库,调用Google Map显示不同地方地图信息,使用Javascript弹出悬浮信息窗口展示。
- 如何使用百度地图API在地图上批量添加点标注
- 如何使用JS实现页面内容随机显示
- 如何对地图服务完美的添加图层,且不影响用户的使用
- Win10如何使用禁用cleartype以清晰地显示屏幕内容
- Java Map集合使用方法介绍(1)——在字典中添加内容并显示
- 如何在TabControl中响应右键鼠标(添加一个ContextMenu就可以了),如何让在tab标签处右键菜单和在内容处右键菜单显示不同的菜单?
- 如何调用百度地图,传递经纬度,内容,在地图上显示
- 如何使用Email下发来加载显示HTML文件的内容
- 使用log4j,如何显示exception的详细内容
- 如何使用GDB显示不同C文件中的同名结构体内容
- Office 使用篇一:如何去掉 Word 文档的标记(含修订和批注)(即不显示已删除内容)