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调用wcf并展示出数据的方法
Jul 07 Javascript
深入探讨JavaScript、JQuery屏蔽网页鼠标右键菜单及禁止选择复制
Jun 10 Javascript
jQuery中:gt选择器用法实例
Dec 29 Javascript
JavaScript实现数字数组按照倒序排列的方法
Apr 06 Javascript
javaScript中定义类或对象的五种方式总结
Dec 04 Javascript
JavaScript生成.xls文件的代码
Dec 22 Javascript
canvas 绘制圆形时钟
Feb 22 Javascript
JS实现json的序列化和反序列化功能示例
Jun 13 Javascript
vue中for循环更改数据的实例代码(数据变化但页面数据未变)
Sep 15 Javascript
深入理解React高阶组件
Sep 28 Javascript
深入研究React中setState源码
Nov 17 Javascript
微信小程序实现的点击按钮 弹出底部上拉菜单功能示例
Dec 20 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
基于Zookeeper的使用详解
2013/05/02 PHP
php中get_defined_constants函数用法实例分析
2015/05/12 PHP
PHP 获取客户端 IP 地址的方法实例代码
2018/11/11 PHP
从javascript语言本身谈项目实战
2006/12/27 Javascript
JavaScript去掉数组中的重复元素
2011/01/13 Javascript
检测jQuery.js是否已加载的判断代码
2011/05/20 Javascript
jQuery中parent()方法用法实例
2015/01/07 Javascript
使用纯javascript实现经典扫雷游戏
2015/04/23 Javascript
JavaScript自学笔记(必看篇)
2016/06/23 Javascript
js中小数向上取整数,向下取整数,四舍五入取整数的实现(必看篇)
2017/02/13 Javascript
JavaScript30 一个月纯 JS 挑战中文指南(英文全集)
2017/07/23 Javascript
javascript实现蒙版与禁止页面滚动
2020/01/11 Javascript
JavaScript实现世界各地时间显示
2020/09/07 Javascript
nodejs使用Sequelize框架操作数据库的实现
2020/10/21 NodeJs
Python translator使用实例
2008/09/06 Python
Python计算程序运行时间的方法
2014/12/13 Python
python编写的最短路径算法
2015/03/25 Python
Django框架下在视图中使用模版的方法
2015/07/16 Python
分析Python读取文件时的路径问题
2018/02/11 Python
对python 矩阵转置transpose的实例讲解
2018/04/17 Python
Python Tornado批量上传图片并显示功能
2020/03/26 Python
python3跳出一个循环的实例操作
2020/08/18 Python
python wsgiref源码解析
2021/02/06 Python
美国玛丽莎收藏奢华时尚商店:Marissa Collections
2016/11/21 全球购物
美国顶级户外凉鞋品牌:Chacos
2017/03/27 全球购物
系统管理员的职责包括那些?管理的对象是什么?
2013/01/18 面试题
广告学毕业生求职信
2014/01/30 职场文书
出纳员岗位职责风险
2014/03/06 职场文书
厨房管理计划书
2014/04/27 职场文书
经营管理策划方案
2014/05/22 职场文书
学雷锋志愿者活动方案
2014/08/21 职场文书
交通安全横幅标语
2014/10/07 职场文书
教师节主题班会方案
2015/08/17 职场文书
幼儿园园长新年寄语
2015/08/17 职场文书
请假条应该怎么写?
2019/06/24 职场文书
html5调用摄像头截图功能
2022/01/18 Javascript