脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → echarts浮动显示单位

echarts浮动显示单位的实现方法示例

 更新时间：2020年12月04日 12:03:19   作者：LennieGao  
这篇文章主要给大家介绍了关于echarts浮动显示单位的实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

本文主要介绍的是利用echarts浮动显示单位的相关内容，这个显示效果对大家来说体验感还是不错的，下面话不多说了，来一起看看详细的介绍吧

例子： echarts浮动显示单位实现方法

echarts浮动显示单位，实现代码如下：

// 设置echarts中的formatter参数
   formatter: function(a) {
   let list = [];
   let listItem = "";
   for (var i = 0; i < a.length; i++) {
    if (i < 2) {
    list.push(
     '<i style="display: inline-block;width: 10px;height: 10px;background: ' +
     a[i].color +
     ';margin-right: 5px;border-radius: 50%;}"></i><span style="width:70px; display:inline-block;">' +
     a[i].seriesName +
     "</span>&nbsp&nbsp：" +
     a[i].value +
     "万"
    );
    } else {
    list.push(
     '<i style="display: inline-block;width: 10px;height: 10px;background: ' +
     a[i].color +
     ';margin-right: 5px;border-radius: 50%;}"></i><span style="width:70px; display:inline-block;">' +
     a[i].seriesName +
     "</span>&nbsp&nbsp：" +
     a[i].value +
     "%"
    );
    }
   
   }
   listItem = list.join("<br>");
   return '<div class="showBox">' + listItem + "</div>";
   },

总结

到此这篇关于echarts浮动显示单位的文章就介绍到这了,更多相关echarts浮动显示单位内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

相关文章

  • js中的preventDefault与stopPropagation详解

    js中的preventDefault与stopPropagation详解

    本篇文章主要是对js中的preventDefault与stopPropagation进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助
    2014-01-01
  • layui layer select 选择被遮挡的解决方法

    layui layer select 选择被遮挡的解决方法

    今天小编就为大家分享一篇layui layer select 选择被遮挡的解决方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • JS 实现导航栏悬停效果(续)

    JS 实现导航栏悬停效果(续)

    上次导航栏悬停的那个页面在IE上运行的时候，会出导航栏不停的抖动问题，在本文已有完美的解决方法，将导航栏的定位方式由原来的absolute改为fixed即可
    2013-09-09
  • Javascript call及apply应用场景及实例

    Javascript call及apply应用场景及实例

    这篇文章主要介绍了Javascript call及apply应用场景及实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-08-08
  • 前端使用websocket发送消息的示例代码

    前端使用websocket发送消息的示例代码

    WebSocket是一种在单个TCP连接上进行全双工通信的协议，它可以让客户端和服务器之间进行实时的双向通信，这篇文章主要介绍了前端使用websocket发送消息的示例代码,需要的朋友可以参考下
    2023-07-07
  • JavaScript控制图片加载完成后调用回调函数的方法

    JavaScript控制图片加载完成后调用回调函数的方法

    这篇文章主要介绍了JavaScript控制图片加载完成后调用回调函数的方法,实例分析了javascript回调函数的使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-03-03
  • 引入autocomplete组件时JS报未结束字符串常量错误

    引入autocomplete组件时JS报未结束字符串常量错误

    在引入jQuery的autocomplete组件时，遇到js报未结束字符串常量错误，原因及解决方法如下，大家可以参考下
    2014-03-03
  • js动态控制table的tr、td增加及删除的具体实现

    js动态控制table的tr、td增加及删除的具体实现

    这篇文章主要介绍了使用js如何动态控制table的tr，td增加及删除,需要的朋友可以参考下
    2014-04-04
  • JavaScript this 深入理解

    JavaScript this 深入理解

    一直以来，对于JavaScript 中的this的理解都是很模糊的， 特别是对函数进行apply 与 call 调用。这两个操作如果没有很好的理解 JavaScript中this的概念，会越搞越迷糊。
    2009-07-07
  • js重写alert事件（避免alert弹框标题出现网址）

    js重写alert事件（避免alert弹框标题出现网址）

    这篇文章主要给大家介绍了关于js重写alert事件的相关资料，这样可以避免alert弹框标题出现网址的情况，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-12-12

最新评论