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 相关文章推荐
jQuery的一些注意
Dec 06 Javascript
在Z-Blog中运行代码[html][/html](纯JS版)
Mar 25 Javascript
js活用事件触发对象动作
Aug 10 Javascript
jquery 将disabled的元素置为enabled的三种方法
Jul 25 Javascript
jQuery学习笔记 更改jQuery对象
Sep 19 Javascript
parentElement,srcElement的使用小结
Jan 13 Javascript
JS+CSS实现模仿浏览器网页字符查找功能的方法
Feb 26 Javascript
pace.js页面加载进度条插件
Sep 29 Javascript
JQuery EasyUI的使用
Feb 24 Javascript
JS设置CSS样式的方式汇总
Jan 21 Javascript
使用classList来实现两个按钮样式的切换方法
Jan 24 Javascript
对node.js中render和send的用法详解
May 14 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
全国FM电台频率大全 - 19 广东省
2020/03/11 无线电
php模板中出现空行解决方法
2011/03/08 PHP
批量去除PHP文件中bom的PHP代码
2012/03/13 PHP
php判断正常访问和外部访问的示例
2014/02/10 PHP
PHP开源开发框架ZendFramework使用中常见问题说明及解决方案
2014/06/12 PHP
php实现singleton()单例模式实例
2014/11/06 PHP
Yii2中事务的使用实例代码详解
2016/09/07 PHP
PHP call_user_func和call_user_func_array函数的简单理解与应用分析
2019/11/25 PHP
JavaScript 闭包在封装函数时的简单分析
2009/11/28 Javascript
JSON 编辑器实现代码
2009/12/06 Javascript
关于URL中的特殊符号使用介绍
2011/11/03 Javascript
如何使用jQuery Draggable和Droppable实现拖拽功能
2013/07/05 Javascript
jQuery动态添加删除select项(实现代码)
2013/09/03 Javascript
jQuery使用drag效果实现自由拖拽div
2015/06/11 Javascript
浅谈regExp的test方法取得的值变化的原因及处理方法
2017/03/01 Javascript
vue移动端实现下拉刷新
2018/04/22 Javascript
vue+axios 前端实现的常用拦截的代码示例
2018/08/23 Javascript
利用Promise自定义一个GET请求的函数示例代码
2019/03/20 Javascript
python监控网站运行异常并发送邮件的方法
2015/03/13 Python
python通过pil为png图片填充上背景颜色的方法
2015/03/17 Python
Python加pyGame实现的简单拼图游戏实例
2015/05/15 Python
python解析xml文件实例分析
2015/05/27 Python
使用sklearn之LabelEncoder将Label标准化的方法
2018/07/11 Python
python训练数据时打乱训练数据与标签的两种方法小结
2018/11/08 Python
django从后台返回html代码的实例
2020/03/11 Python
快速解决jupyter notebook启动需要密码的问题
2020/04/21 Python
python 实现非极大值抑制算法(Non-maximum suppression, NMS)
2020/10/15 Python
特步官方商城:Xtep
2017/03/21 全球购物
执行力心得体会
2013/12/31 职场文书
2014教师“四风问题”对照检查材料思想汇报
2014/09/16 职场文书
大学生国庆节65周年演讲稿范文
2014/09/25 职场文书
论群众路线学习笔记
2014/11/06 职场文书
2015大学生求职信范文
2015/03/20 职场文书
2015年国庆节标语大全
2015/07/30 职场文书
三严三实学习心得体会(精选N篇)
2016/01/05 职场文书
SQL Server数据库备份和恢复数据库的全过程
2022/06/14 SQL Server