echarts 实现tooltip双栏效果

实现效果如下:

代码:

//option                    tooltip: {
                        trigger: ‘axis‘,
                        axisPointer: {
                            label: {
                                show: true,
                                fontSize: 15
                            }
                        },
                        formatter: this.formatter
                    }, 

  

// formatter  function
formatter (params){
        let temp=[];
        let temp2=‘‘;
        let leftSide=‘‘;
        let rightSide=‘‘;
        for( let item of params){
            temp.push({
                seriesName:item.seriesName,
                value:item.value
            })
        }
        let arr=temp.sort(this.sortValue);
        let midValue=Math.ceil(arr.length/2);
        for(let [key,item] of arr.entries()){
            item.seriesName="测试数据";
            if(key< midValue&&midValue>4){
                if(isNaN(item.value)){
                    leftSide+=`${item.seriesName}: 无数据<br>`;
                }else{
                    leftSide+=`${item.seriesName}: ${item.value}<br>`;
                }
            }else{
                if(isNaN(item.value)){
                    rightSide+=`${item.seriesName}: 无数据<br>`;
                }else{
                    rightSide+=`${item.seriesName}: ${item.value}<br>`;
                }
            }
        }
        temp2=`<div class="my-flex">
            <div>${leftSide}</div>
            <div style="margin-left:20px;">${rightSide}</div>
            </div>`;
        return temp2;
    },

  

原文地址:https://www.cnblogs.com/mlh1421/p/10042332.html

时间: 2024-10-10 20:59:47

echarts 实现tooltip双栏效果的相关文章

Web之路笔记之三 - 使用Floating实现双栏样式

2014秋季学期Web2.0课程实验 <Lab2 - Journal> 1. 对CSS的BOX MODEL进行亲密接触,理解他的用途. 2. 在float图片的时候,发现此时图片脱离了原来所在的div,如图所示. 需要注意的是,float之后的element也是从页面正常流里面移除了.极端的来说,如果一个div里面的所有element都设置为float的话,那么它的高度就为0了.此时用Chrome开发者工具查看,图片的margin和文本的content上端是水平的,可以知道他仍然是在conte

ng1中 如何用双向绑定 实现单向绑定的初始时不显示双括号效果?

ng1中 如何用双向绑定 实现单向绑定(ng-bind就可以不显示{{}})的初始时不显示双括号效果? AngularJS 实例 页面加载时防止应用闪烁: <div ng-app=""> <p ng-cloak>{{ 5 + 5 }}</p> </div> 尝试一下 » 定义和用法 ng-cloak 指令用于在 AngularJS 应用在加载时防止 AngularJS 代码未加载完而出现的问题. AngularJS 应用在加载时,文档可能

右侧扩展栏效果实现

扩展栏效果:关键逻辑:父:position:relative; display:none;  子:position:absolute; ①子元素样式.son{    padding:10px;    background-color:#003300;    color:#FFFFFF;    width:300px;    height:300px;    display:none;     position: absolute;    z-index:999;    //必须比父元素的要大  

如何使用CSS给图片添加双边框效果

如何使用CSS给图片添加双边框效果:建议:尽可能的手写代码,可以有效的提高学习效率和深度.给图片添加双边框也在实际使用中也有许多应用,可能并不频繁,在这里简单介绍一下如何实现此种效果,借以对CSS一些属性的应用加以熟练.先看一段代码实例: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="

PagerSlidingTabStrip实现网易新闻导航栏效果

PagerSlidingTabStrip实现网易新闻导航栏效果之前在项目当中有一个需求,实现类似网易新闻标题导航的效果,于是在在github搜索下,找了一个开源PagerSlidingTabStrip,研究了这个空间的使用和一些方法,在此与大家分享,希望能够帮到有需要的朋友,好了废话不多讲,直接上代码. package com.example.textpagerslidingtabstrip.activity; import com.example.textpagerslidingtabstri

LaTeX技巧 twocolumn 双栏

twocolumn状态下怎么实现onecolumn的footnote,即双栏中如何排版通栏脚注.查了些资料都没找到解决的方法,是不是有什么方便的宏包?还是要怎么设置一下就OK了?参看:http://bbs.chinatex.org/forum.php?mod=viewthread&tid=3586&page=1&extra=#pid9792问题解决方案:日本人 93 年写的宏包即:1-in-2.sty.测试文件和宏包下载地址:http://cid-3cfe530319707374.

php实现三级导航栏效果

首先看看效果图: 1.数据配置文件 db.php <?php return array( array( 'one' => '关于我们', 'two' => array( array( 'three_tit' => '公司介绍', 'three_cont' => array( '企业概况', '组织架构', '发展历程', '企业文化', '服务理念' ) ), array( 'three_tit' => '企业荣誉', 'three_cont' => array(

iOS 顶部高斯模糊导航栏 + 页面内容穿越底部导航栏效果

(1)如果是使用系统导航栏则设置其translucent属性即可: [self.navigationController.navigationBar setBackgroundImage:[UIImage new] forBarMetrics:UIBarMetricsDefault]; self.navigationController.navigationBar.shadowImage = [UIImage new]; self.navigationController.navigationB

jquery实现导航栏效果

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> </head> <div class="box"> <ul class="menu"> <li