echarts 多个series图表的tooltip自定义
来源:互联网 发布:淘宝网店宝贝图片尺寸 编辑:程序博客网 时间:2024/06/05 15:15
在使用echarts制作数据图表时,由于一张图表中包含多个series并且是多种类型数据(折线图,散点图,自定义图等),最初所有数据都是在各自的series.tooltip中定义提示信息,这种情况下默认tooltip的触发方式是‘item’的方式,但是折线图在这种方式下的使用就很蛋疼了,必须要点中数据点,提示才会出来,但是数据点又比较小,很难点中,用户反馈很不好用;
为了用户体验更好,只好改代码了,本来打算只对折线图采用坐标触发(‘axis’),但是series.tooltip无法设置触发方式,只好更改option.tooptip触发方式为‘axis’,;在这里又碰到了问题,修改后的触发方式作用在所有的series上了,也就是之前自定义的series.tooltip全都无效了,查echarts官方文档才发现:series.tooltip 仅在 tooltip.trigger 为 'item' 时有效。如意算盘落空了,没法子对不同类型的图采用不同的触发方式了;
没办法,因为折线图的体验效果实在太差,必须要改,只好硬着头皮改了,所有的数据都采用‘axias’触发,然后针对不同的图表给出不同的提示,方法就是:在series.tooltip中使用formatter函数来自定义提示信息,依据params参数的seriesIndex(数据在series里位置)属性来判断图表类型;代码实现如下:
drawChart1_2() { this.chart1_2 = echarts.init(document.getElementById('chart1_2')); this.chart1_2.setOption({ tooltip:{ trigger:'axis', axisPointer:{ type:'line', lineStyle:{color:'#333',} }, backgroundColor:'#333', formatter:function(params){ let tip = auth.formatterTip(params);/*调用auth.js中的formatterTip函数,传入触发点信息参数params*/ return tip ; }, }, xAxis: [], yAxis: [], grid: this.grid, series: [/*多个series*/ { type: 'line', name:'Basal', data:this.DataBasal, }, { type: 'bar', name:'Bolus', data:this.DataBolus, }, { type: 'custom', name:'Extend bolus', data:this.extend_bolus, }, { type: 'scatter', name:'Alert', data: this.pump_alarm, symbol:'image://static/legend/Alert.png', }, ] }); },auth.js中定义函数,对不同类型数据做处理:
formatterTip(params){ // console.log(params); let that = this; let tipArray = [0,0,0,0,0,0,0,0,0],tip = '',timeDetail =''; params.map(function (e,i) { if(e.value[0]!==10){/*去除custom类型数据初始化的影响*/ let index = e.seriesIndex; let name = e.seriesName; let value = e.value[1]; let date = e.value[0]; let time = that.formatterDate5(date); let day = that.formatterDate4(date.getTime()/1000); timeDetail = day+' '+time[0]+':'+time[1]+'<br>';/*设置提示框头部时间信息*/ /*判断数据类型以及是否有数据*/ if((index===0||index===2)&&value)){ /*每一条提示前设置对应颜色的小圆点*/ let icon =" <div style='background: #00ff4c;height: 8px;width: 8px;border-radius: 8px;margin-top:7px;margin-right: 4px;float: left;display: inline-block'></div>"; tipArray[index]= icon + name+' : '+value+'U/H'; } if(index===1&&value){ let icon =" <div style='background: #ff0000;height: 8px;width: 8px;border-radius: 8px;margin-top:7px;margin-right: 4px;float: left;display: inline-block'></div>"; tipArray[1] = icon +' Manual Suspend'; } if(index===3&&value){ let icon =" <div style='background: #182f82;height: 8px;width: 8px;border-radius: 8px;margin-top:7px;margin-right: 4px;float: left;display: inline-block'></div>"; tipArray[3] = icon + name+' : '+e.value[2]+', '+value+'U'; } } }); tip =tip+timeDetail; tipArray.map(function (e,i) { if(e){ tip = tip+e+'<br>';/*组合所有提示信息*/ } }); return tip;/*返回处理好的提示*/ },
这样就完成 了echarts坐标轴触发方式下的多个series的tooltip自定义功能;上述函数中只给出了一部分series的处理方法;
完成后效果还不错,可惜没法截图;
阅读全文
0 0
- echarts 多个series图表的tooltip自定义
- 利用Echarts图表的tooltip在做一个图表
- ECharts 自定义动态tooltip
- Echarts图表中的tooltip无法显示
- echarts自定义tooltip绘制轨迹
- 多个Echarts图表浏览器自适应问题
- echarts通过timeline时间轴改变图表的数据,解决X轴,series问题
- Echarts用户自定义图表title
- echarts自定义tooltip提示框内容
- Echarts tooltip 自定义formatter设置字体颜色
- 自定义Echarts地理分布图tooltip显示内容
- echarts实现一个页面同时显示多个不同形状的图表/动态往图表中存放数据
- echarts: 图表的搬运工
- echarts图表的使用
- 5分钟上手写ECharts的第一个图表
- echarts切换tab时,第一个图表显示,第二个图表不显示的解决办法
- echarts---一个页面内创建多个图表
- Echarts 如何设置多个图表自适应窗口大小
- sigsuspend()函数作用
- 朱啸虎不投60后被怼毫无教养,投资人拿钱砸人都如此狂妄自大吗?
- Android DialogFragment在屏幕旋转之后,输入框内的文字消失的原因
- python读取Kafka
- Spring源码-IOC(三)
- echarts 多个series图表的tooltip自定义
- 7-11 畅通工程之局部最小花费问题(最小生成树+并查集)
- python 利用utf-8编码判断中文英文字符
- sql 批量插入(一个数据库的表数据,添加到另一个数据库表) 数据类型nText和varchar在运算符equals不兼容的问题解决方案
- 一些sql语句的练习题及解答
- Linux根目录下重要目录的作用
- django 分页效果实现(djangorestframework内置以及django内置方法)
- 有趣有料的英语
- HTML5 初始之旅