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动态给table添加、删除行 改进版
Jan 19 Javascript
Javascript中的delete操作符详细介绍
Jun 06 Javascript
javascript获取dom的下一个节点方法
Sep 05 Javascript
使用正则表达式的格式化与高亮显示json字符串
Dec 03 Javascript
jQuery实现tag便签去重效果的方法
Jan 20 Javascript
AngularJS实现路由实例
Feb 12 Javascript
单击按钮发送验证码,出现倒计时的简单实例
Mar 17 Javascript
使用jQuery卸载全部事件的思路详解
Apr 03 jQuery
以BootStrap Tab为例写一个前端组件
Jul 25 Javascript
js实现rem自动匹配计算font-size的示例
Nov 18 Javascript
js构造函数constructor和原型prototype原理与用法实例分析
Mar 02 Javascript
微信小程序实现列表的横向滑动方式
Jul 15 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将向Java靠拢
2006/10/09 PHP
php学习笔记 面向对象的构造与析构方法
2011/06/13 PHP
PHP警告Cannot use a scalar value as an array的解决方法
2012/01/11 PHP
php自动识别文件编码并转换为UTF-8的方法
2014/06/12 PHP
golang与php实现计算两个经纬度之间距离的方法
2016/07/22 PHP
php获取文件名称和扩展名的方法
2017/02/07 PHP
解决laravel groupBy 对查询结果进行分组出现的问题
2019/10/09 PHP
解决Extjs4中form表单提交后无法进入success函数问题
2013/11/26 Javascript
一个不错的js html页面倒计时可精确到秒
2014/10/22 Javascript
JavaScript中的slice()方法使用详解
2015/06/06 Javascript
基于BootStrap Metronic开发框架经验小结【四】Bootstrap图标的提取和利用
2016/05/12 Javascript
javascript实现的上下无缝滚动效果
2016/09/19 Javascript
微信小程序 wxapp内容组件 progress详细介绍
2016/10/31 Javascript
Jquery给当前页或者跳转后页面的导航栏添加选中后样式的实例
2016/12/08 Javascript
使用vue实现点击按钮滑出面板的实现代码
2017/01/10 Javascript
Vue表单类的父子组件数据传递示例
2018/05/03 Javascript
在vue里使用codemirror遇到的问题
2018/11/01 Javascript
Angular2使用SVG自定义图表(条形图、折线图)组件示例
2019/05/10 Javascript
nodejs中实现用户注册路由功能
2019/05/20 NodeJs
Vue中对iframe实现keep alive无刷新的方法
2019/07/23 Javascript
[49:05]OG vs Newbee 2019DOTA2国际邀请赛淘汰赛 胜者组 BO3 第二场 8.21.mp4
2020/07/19 DOTA
在Python的Django框架中调用方法和处理无效变量
2015/07/15 Python
Python实现的文本简单可逆加密算法示例
2017/05/18 Python
python实现二维插值的三维显示
2018/12/17 Python
python实现图像拼接
2020/03/05 Python
Python3.7安装pyaudio教程解析
2020/07/24 Python
巴西美妆购物网站:Kutiz Beauté
2019/03/13 全球购物
智能钱包:Ekster
2019/11/21 全球购物
Set里的元素是不能重复的,那么用什么方法来区分重复与否呢? 是用==还是equals()? 它们有何区别?用contains来区分是否有重复的对象。还是都不用
2013/07/30 面试题
Set里的元素是不能重复的,那么用什么方法来区分重复与否呢?
2016/08/18 面试题
工商管理专业实习大学生自我鉴定
2013/09/19 职场文书
大学军训感想
2014/02/12 职场文书
宿舍保安职务说明书
2014/02/25 职场文书
党的群众路线教育实践活动动员会主持词
2014/03/20 职场文书
python lambda 表达式形式分析
2022/04/03 Python
V Rising 服务器搭建图文教程
2022/06/16 Servers