如何添加使用echats地图悬浮显示内容
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 | /初始化绘制全国地图配置 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' ,<br> //使用这个函数返回悬浮内容 <strong>formatter:function( params ){</strong> //定义一个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 />' ; } }<br> //市区 for ( var j=0;j<city.length;j++){ if (city[j].name== params .name){ res+=city[j].name+ ':' +city[j].value+ '<br />' ; } }<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函数返回的值
分类:
echarts.js
标签:
echarts地图省市区
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· 10年+ .NET Coder 心语 ── 封装的思维:从隐藏、稳定开始理解其本质意义
· 地球OL攻略 —— 某应届生求职总结
· 提示词工程——AI应用必不可少的技术
· Open-Sora 2.0 重磅开源!
· 周边上新:园子的第一款马克杯温暖上架