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 版
Mar 24 Javascript
Javascript模块模式分析
May 16 Javascript
js wmp操作代码小结(音乐连播功能)
Nov 08 Javascript
$.get获取一个文件的内容示例代码
Sep 11 Javascript
jQuery如何实现点击页面获得当前点击元素的id或其他信息
Jan 09 Javascript
javascript实现的简单的表单验证
Jul 10 Javascript
JavaScript每天必学之数组和对象部分
Sep 17 Javascript
easyUI实现(alert)提示框自动关闭的实例代码
Nov 07 Javascript
微信小程序购物商城系统开发系列-目录结构介绍
Nov 21 Javascript
ionic 3.0+ 项目搭建运行环境的教程
Aug 09 Javascript
基于复选框demo(分享)
Sep 27 Javascript
vue-router2.0 组件之间传参及获取动态参数的方法
Nov 10 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
某大型网络公司应聘时的笔试题目附答案
2008/03/27 PHP
与文件上传有关的php配置参数总结
2013/06/14 PHP
js的alert弹出框出现乱码解决方案
2013/09/02 Javascript
js 剪切板应用clipboardData详细解析
2013/12/17 Javascript
nodejs读取memcache示例分享
2014/01/02 NodeJs
Eclipse下jQuery文件报错出现错误提示红叉
2014/01/13 Javascript
深入理解JavaScript系列(48):对象创建模式(下篇)
2015/03/04 Javascript
javascript中的Base64、UTF8编码与解码详解
2015/03/18 Javascript
以Python代码实例展示kNN算法的实际运用
2015/10/26 Javascript
常用的javascript设计模式
2017/01/11 Javascript
js实现带简单弹性运动的导航条
2017/02/22 Javascript
vue-cli如何引入bootstrap工具的方法
2017/10/19 Javascript
JS实现十字坐标跟随鼠标效果
2017/12/25 Javascript
使用elementUI实现将图片上传到本地的示例
2018/09/04 Javascript
浅谈vux之x-input使用以及源码解读
2018/11/04 Javascript
nodejs微信开发之授权登录+获取用户信息
2019/03/17 NodeJs
用node.js写一个jenkins发版脚本
2019/05/21 Javascript
微信小程序服务器日期格式化问题
2020/01/07 Javascript
[01:59]深扒TI7聊天轮盘语音出处 1
2017/05/11 DOTA
Python获取apk文件URL地址实例
2013/11/01 Python
浅析Python中的多重继承
2015/04/28 Python
教你学会使用Python正则表达式
2017/09/07 Python
python获取指定字符串中重复模式最高的字符串方法
2018/06/29 Python
python判断文件夹内是否存在指定后缀文件的实例
2019/06/10 Python
对Python强大的可变参数传递机制详解
2019/06/13 Python
带你彻底搞懂python操作mysql数据库(cursor游标讲解)
2020/01/06 Python
Pytorch保存模型用于测试和用于继续训练的区别详解
2020/01/10 Python
Windows下实现将Pascal VOC转化为TFRecords
2020/02/17 Python
Python监听剪切板实现方法代码实例
2020/11/11 Python
End Clothing美国站:英国男士潮牌商城
2018/04/20 全球购物
Oracle里面常用的数据字典有哪些
2014/02/14 面试题
通用自荐信范文
2014/03/14 职场文书
超市活动计划书
2014/04/24 职场文书
机关党员三严三实心得体会
2014/10/13 职场文书
2015年主婚人婚礼致辞
2015/07/28 职场文书
初中生活随笔
2015/08/15 职场文书