echarts中formatter修改鼠标悬浮事件信息操作、echarts地图块、散点区分触发点击事件 只触发散点问题详解
这里写目录标题
- 1、实例
- 2、案例详解
1、实例
这次我拿echarts中 地图组合散点图的实例
!!!实现效果:滑到散点显示不同于地图块的信息 及 formatter 提示窗自定义!!!
这个显示项目名称为"文昌小学校节能项目" , 地图块为"阿城区" 防止重复触发代码:【重点是silent: true】
var mapInit = () =>$.get(mapname,function(yCjson){echarts.registerMap('haerbin', yCjson, {});var option = { // echarts 配置tooltip: {trigger: 'item',// 提示框formatter:function(params){let text = params.name + "<br>位置信息:" + params.value return text},},geo: { // 地图配置show: true,map: 'haerbin', label: {normal: {show: false},emphasis: {show: false}},roam: false,itemStyle: {normal: {borderColor: '#2AB8FF', // 边borderWidth: 1.5,areaColor: '#12235c' // 里},emphasis: {areaColor: '#2AB8FF',borderWidth: 0,}},zoom: 1.2,silent: true, // 遮罩一层 !!!},series: [ { // 散点配置name: '项目坐标',type: 'effectScatter',coordinateSystem: 'geo',data: geoCoordMap,symbolSize: 15, // 点的大小showEffectOn: 'emphasis', // 特效渲染前提设置rippleEffect: {brushType: 'stroke' // 特效波纹渲染},hoverAnimation: true,label: {normal: {formatter: '{b}', // 右侧文字position: 'right',show: false},emphasis: {show: true}},itemStyle: {normal: {color: '#ff8003'}}},]};myCharts.setOption(option);});// 散点触发myCharts.on('click', function (e) {window.location.href="./indexChild.html";});mapInit();
这里用到了两次 formatter 第一个在trigger中为正常显示的提示框 默认黑底白字的 第二个在label中
可以理解为是散点的“特色”
调用{a}{b}{c}方法详见官方文档
还有一处自定义是我把地图的series数据删掉了 否则与散点的silent冲突 而且此需求地图的意义用geo引入进来即可 应用散点还是靠坐标位置来衡量geo
2、案例详解
formatter一般用于格式化鼠标悬浮时间的信息,如果数据是JSON数组格式,那么不必这样判断扇形图的 ticket值,使用 formatter 的 callback 时间即可自行对应
formatter: function (params, ticket, callback) {console.log(params);
console.log(ticket);
var str = '明细:<br/>';
if(ticket == 'item_操作概况_0'){for(var i in data.mustMod){str += "模块:" + data.mustMod[i].MODULE_NAME +" "+data.mustMod[i].TOTAL +"("+data.mustMod[i].precentAcccess+"%)" + "<br/> " ;
}
//alert(data.lessMod[data.lessMod.length-1].totalAccess);
str += "总数:"+ data.must.totalAccess + " " +"("+ data.must.totalPrecent+"%)" + "<br/> ";
}
if(ticket == 'item_操作概况_1'){for(var i in data.moreMod){str += "模块:" + data.moreMod[i].MODULE_NAME +" "+data.moreMod[i].TOTAL +"("+data.moreMod[i].precentAcccess+"%)" + "<br/> " ;
}
//alert(data.lessMod[data.lessMod.length-1].totalAccess);
str += "总数:"+ data.more.totalAccess + " " +"("+ data.more.totalPrecent+"%)" + "<br/> ";
}
if(ticket == 'item_操作概况_3'){for(var i in data.lessMod){str += "模块:" + data.lessMod[i].MODULE_NAME +" "+data.lessMod[i].TOTAL +"("+data.lessMod[i].precentAcccess+"%)" + "<br/> " ;
}
//alert(data.lessMod[data.lessMod.length-1].totalAccess);
str += "总数:"+ data.less.totalAccess + " " +"("+ data.less.totalPrecent+"%)" + "<br/> ";
}
if(ticket == 'item_操作概况_2'){for(var i in data.normalMod){str += "模块:" + data.normalMod[i].MODULE_NAME +" "+data.normalMod[i].TOTAL +"("+data.normalMod[i].precentAcccess+"%)" + "<br/> " ;
}
//alert(data.lessMod[data.lessMod.length-1].totalAccess);
str += "总数:"+ data.normal.totalAccess + " " +"("+ data.normal.totalPrecent+"%)" + "<br/> ";
}
//callback(ticket, str);
return str;
}
},
补充知识: echarts点击柱状图事件, 点 echarts柱状图悬浮展示相应的信息, echarts柱状图柱头展示信息
悬浮显式在tooltip中设置formatter
柱状图中的表头显式在series下的itemStyle下的normal下的label下的formatter中设置
点击事件就是:【先获取柱状图的div 然后和 对象.on() 】
var myChart = echarts.init(document.getElementById('main'));
myChart.on('click', function (params) {});
ajax:
$.ajax({url: "../../basexxxx/getxxxxxxx",
type: "post",
data: {param: param
},
success: function (data) {option.series[0].data = xxxxxxxxxxx;//百分比
// option.series[1].data = xxxxxxxxxxx;
option.xAxis[0].data = xxxxxxxxxxxx;//项点名称
riskNames = xxxxxxxxxx;
//违反次数
breakCount = xxxxxxxxx;//xx次数
//检查次数
checkCount = xxxxxxxxxx;
//描述
riskLevelDetails = xxxxxxxxxxx;
//项点id集合
riskIds = data.xxxxxxxxx;
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
}
});
HTML:
<div style="margin: 0;padding: 5px; max-width:100%;width: 100%;overflow-x: auto;">
<div id="main" style="width: 350%;height:500px;"></div>
</div>
Option:
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
var breakCount = [];
var checkCount = [];
var riskLevelDetails = [];
var riskNames = [];
var riskIds = [];
var option = {color: ['#3398DB'],
tooltip: {trigger: 'axis',
axisPointer: { // 坐标轴指示器,坐标轴触发有效
type: 'shadow' // 默认为直线,可选为:'line' | 'shadow'
},
//悬浮提示
formatter: function (params) {for (var i = 0, l = option.xAxis[0].data.length; i < l; i++) {if (option.xAxis[0].data[i] == params[0].name) {var val3 = riskLevelDetails[i] || 0;
// toFixed(1)精确小数点
return '项点名称:' + riskNames[i] + '<br>'
+ '违反占比:' + option.series[0].data[i].toFixed(1) +'%'+ '<br>'
+ riskLevelDetails[i];
}
}
}
},
grid: {left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [{type: 'category',
data: [],
axisTick: {alignWithLabel: true
},
axisLabel: {interval: 0,
rotate: 40
}
}],
yAxis: [{type: 'value'
}],
series: [{name: '违反占比',
type: 'bar',
barWidth: '60%',
itemStyle: {normal: {//可根据柱状图量的大小进行判断变换颜色
color: function (params) {if (params.data < 60) {return 'green'
} else {return '#c23531'
}
return '#ccc'
},
label: {show: true,
position: 'top',
formatter: function (params) {//单个柱状图表头展示
for (var i = 0, l = option.xAxis[0].data.length; i < l; i++) {if (option.xAxis[0].data[i] == params.name) {var val1 = breakCount[i] || 0;
var val2 = checkCount[i] || 0;
return '{color1|' + val1 + '}/{color2|' + val2 + '}';
}
}
},
rich: {color1: {color: '#c23531'
},
color2: {color: '#42a1fe'
}
},
textStyle: {color: '#333'
}
}
}
},
data: []
}
]
};
然后柱状图的点击事件
//点击事件
myChart.on('click', function (params) {console.log(params);
var index = params.dataIndex;
console.log("下标:"+xxx);
console.log("项点id:"+xxxx);
console.log("名称:"+params.name);
console.log("南京东机务段单位代码:"+xxxxx);
});
echarts中formatter修改鼠标悬浮事件信息操作、echarts地图块、散点区分触发点击事件 只触发散点问题详解相关推荐
- echart移上去显示内容_echarts 使用formatter 修改鼠标悬浮事件信息操作
formatter 一般用于格式化鼠标悬浮时间的信息,如果你的数据是JSON数组格式,那么不必和我这样一一判断扇形图的 ticket 值,使用 formatter 的 callback 时间即可自行对 ...
- eclipse中如何开启关闭鼠标悬浮和修改鼠标悬浮响应时间
^^eclipse中如何开启关闭鼠标悬浮和修改鼠标悬浮响应时间 **1.在eclipse中,鼠标悬浮开启或关闭,处理办法如下: ** · 操作过程:eclipse ---- windows - Jav ...
- Winform中设置ZedGraph鼠标悬浮显示线上的点的坐标并自定义显示的内容
场景 Winform中设置ZedGraph鼠标悬浮显示距离最近曲线上的点的坐标值和X轴与Y轴的标题: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article ...
- html引入echart地图点击,基于echarts实现3D地图的定时高亮和点击事件
技术选型 文章所选技术栈:vue.echarts.echarts-gl 安装Vue和echarts 1.安装echarts和echarts-alnpm i echarts --save npm i e ...
- Mint-ui中loadmore(上拉加载下拉刷新)组件在ios中滑动会触发点击事件的解决方法...
bug说明: Mint-ui中loadmore(上拉加载下拉刷新)组件 在 使用fastclick的情况下 ,在ios设备中滑动会触发点击事件: 解决方法: 我是按需引入,去项目中找到loadmore ...
- css隐藏元素 触发点击事件,css隐藏元素的几种方法中可以触发点击事件的是?...
css隐藏元素的几种方法中可以触发点击事件的是 是opacity设置为0的方法. css隐藏元素的方式: 1.display:none;.box{ display: none; } 最简单也最粗暴的方 ...
- html 隐藏元素点击事件,css隐藏元素的几种方法中可以触发点击事件的是?
css隐藏元素的几种方法中可以触发点击事件的是 是opacity设置为0的方法. css隐藏元素的方式: 1.display:none;.box{ display: none; } 最简单也最粗暴的方 ...
- 解决datetimepicker不能触发点击事件,日期插件位置偏移,日期范围限制的问题
最初的问题: 一开始所遇到的问题是相对简单的,就是今天的日期是3-20,但是却可以选择20号之后的日期. html代码: <form action="web?module=stwmgr ...
- 微信小程序长按事件触发点击事件的BUG处理
微信小程序开发说实话还是有点糟心的,经过事件冒泡的坑之后,又遇到了长按事件(longtap)必触发点击事件(tap)的BUG 实例代码 wxml <view class="contai ...
最新文章
- MPB:湖南师大尹佳组-​乳酸菌益生菌表面粘附能力的检测
- 基于python的scrapy爬虫抓取京东商品信息
- HD_2037今年暑假不AC
- [转载]FPGA/CPLD重要设计思想及工程应用(时序及同步设计)
- 如何高效的编写与同步博客 (.NET Core 小工具实现)
- Tomcat内存释放不了、Tomcat内存溢出原因
- Kafka会不会丢消息
- 《Android Studio开发实战 从零基础到App上线》源码运行问题解答
- Nginx 配置生成自签证书
- DSP实验二c语言程序,实验1.2:编写一个以C语言为基础的DSP程序
- 企业软件是最难编写的软件
- php寻仙记,寻仙记文字游戏完整实测源码 - 下载 - 搜珍网
- python和java md5加密,如何将javamd5加密代码移植到Python中?
- 国家集训队论文99~08年全版
- 【毕业设计】基于大数据的电影数据爬取分析可视化系统
- iomega ix2 Android,Lenovo Iomega ix2系统安装
- Prisma 与瘦后端
- php融云开发文档,融云公众服务
- “寒江独钓”错误列表
- WCF:学习Artech大哥的入门程序
热门文章
- 微服务:全链路压测和容量规划
- Typescript No definition found
- 卸载 Creative Cloud 桌面应用程序
- Android——Fragment懒加载
- 快递拒收件怎么批量查往回返的物流信息
- python程序下载是免费的吗_python软件都是免费的吗
- 网线传输速度测试_家中重新布了网线,要测试有没有达到千兆的网速,应该怎么做?...
- AUTOCAD学习笔记2:样板文件的区分
- python hackrf_GnuRadio在HackRF打开的情况下无法运行OS X 10.9.4
- 即便学会了Markdown,也没想到还可以这么干 —> 学会==提高效率