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


Posted in Javascript onDecember 04, 2020

本文主要介绍的是利用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>  :" +
     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>  :" +
     a[i].value +
     "%"
    );
    }
   
   }
   listItem = list.join("<br>");
   return '<div class="showBox">' + listItem + "</div>";
   },

总结

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

Javascript 相关文章推荐
JS网络游戏-(模拟城市webgame)提供的一些例子下载
Oct 14 Javascript
让div层随鼠标移动的实现代码 ie ff
Dec 18 Javascript
对table和ul实现js分页示例分享
Feb 24 Javascript
经过绑定元素时会多次触发mouseover和mouseout事件
Feb 28 Javascript
js面向对象编程之如何实现方法重载
Jul 02 Javascript
javascript获取select值的方法分析
Jul 02 Javascript
jQuery实现仿百度帖吧头部固定导航效果
Aug 07 Javascript
基于javascript实现最简单的选项卡切换效果
May 16 Javascript
js仿新浪微博消息发布功能
Feb 17 Javascript
用Vue-cli搭建的项目中引入css报错的原因分析
Jul 20 Javascript
vue如何进行动画的封装
Sep 26 Javascript
详解小程序开发经验:多页面数据同步
May 18 Javascript
JavaScript中条件语句的优化技巧总结
Dec 04 #Javascript
三剑客:offset、client和scroll还傻傻分不清?
Dec 04 #Javascript
简单谈谈offsetleft、offsetTop和offsetParent
Dec 04 #Javascript
HTML元素拖拽功能实现的完整实例
Dec 04 #Javascript
解决Vue-cli3没有vue.config.js文件夹及配置vue项目域名的问题
Dec 04 #Vue.js
vue基于Echarts的拖拽数据可视化功能实现
Dec 04 #Vue.js
addEventListener()和removeEventListener()追加事件和删除追加事件
Dec 04 #Javascript
You might like
用PHP实现弹出消息提示框的两种方法
2013/12/17 PHP
thinkphp实现上一篇与下一篇的方法
2014/12/08 PHP
PHP单例模式详解及实例代码
2016/12/21 PHP
php mysql PDO 查询操作的实例详解
2017/09/23 PHP
thinkphp5+layui实现的分页样式示例
2019/10/08 PHP
jquery ajax 登录验证实现代码
2009/09/23 Javascript
JS动态创建DOM元素的方法
2015/06/09 Javascript
JQuery Dialog对话框 不能通过Esc关闭的原因分析及解决办法
2017/01/18 Javascript
js + css实现标签内容切换功能(实例讲解)
2017/10/09 Javascript
最新Javascript程序员面试试题和解题方法
2017/11/23 Javascript
JS+CSS实现滚动数字时钟效果
2017/12/25 Javascript
用ES6的class模仿Vue写一个双向绑定的示例代码
2018/04/20 Javascript
微信小程序实现留言板
2018/10/31 Javascript
微信小程序使用Vant Weapp组件库的方法步骤
2019/08/01 Javascript
JS回调函数深入理解
2019/10/16 Javascript
vue中@change兼容问题详解
2019/10/25 Javascript
JS字符串补全方法padStart()和padEnd()
2020/05/27 Javascript
JavaScript WeakMap使用详解
2021/02/05 Javascript
python引用DLL文件的方法
2015/05/11 Python
对Python 2.7 pandas 中的read_excel详解
2018/05/04 Python
python使用tcp实现局域网内文件传输
2020/03/20 Python
python生成器用法实例详解
2019/11/22 Python
python GUI库图形界面开发之PyQt5表单布局控件QFormLayout详细使用方法与实例
2020/03/06 Python
你应该知道的Python3.6、3.7、3.8新特性小结
2020/05/12 Python
python 引用传递和值传递详解(实参,形参)
2020/06/05 Python
Python执行时间的几种计算方法
2020/07/31 Python
Python3+PyCharm+Django+Django REST framework配置与简单开发教程
2021/02/16 Python
pandas统计重复值次数的方法实现
2021/02/20 Python
关键字final的用法
2013/10/02 面试题
北京鼎普科技股份有限公司软件测试面试题
2012/04/07 面试题
常见的软件开发流程有哪些
2015/11/14 面试题
基层党员公开承诺书
2014/05/29 职场文书
政府会议通知范文
2015/04/15 职场文书
Linux安装Nginx步骤详解
2021/03/31 Servers
CSS3实现三角形不断放大效果
2021/04/13 HTML / CSS
看看如何用Python绘制小米新版天价logo
2021/04/20 Python