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 相关文章推荐
JSONP 跨域访问代理API-yahooapis实现代码
Dec 02 Javascript
js/jQuery对象互转(快速操作dom元素)
Feb 04 Javascript
中文字符串截取的js函数代码
Apr 17 Javascript
JS中FRAME的操作问题实例分析
Oct 21 Javascript
初步使用Node连接Mysql数据库
Mar 03 Javascript
微信小程序使用for循环动态渲染页面操作示例
Dec 25 Javascript
jQuery实现表格的增、删、改操作示例
Jan 27 jQuery
Vue项目路由刷新的实现代码
Apr 17 Javascript
JQuery事件委托原理与用法实例分析
May 13 jQuery
json 带斜杠时如何解析的实现
Aug 12 Javascript
vue使用require.context实现动态注册路由
Dec 25 Vue.js
JavaScript实现两个数组的交集
Mar 25 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
phpfans留言版用到的install.php
2007/01/04 PHP
神盾加密解密教程(一)PHP变量可用字符
2014/05/28 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(四)
2014/06/23 PHP
php常用数学函数汇总
2014/11/21 PHP
php数组冒泡排序算法实例
2016/05/06 PHP
PHP命名空间namespace用法实例分析
2016/09/27 PHP
针对thinkPHP5框架存储过程bug重写的存储过程扩展类完整实例
2018/06/16 PHP
PHP实现微信提现功能(微信商城)
2019/11/21 PHP
gearman管理工具GearmanManager的安装与php使用方法示例
2020/02/27 PHP
Javascript与vbscript数据共享
2007/01/09 Javascript
JQuery 返回布尔值Is()条件判断方法代码
2012/05/14 Javascript
nodejs中exports与module.exports的区别详细介绍
2013/01/14 NodeJs
Jquery 模拟用户点击超链接或者按钮的方法
2013/10/25 Javascript
Jquery 点击按钮自动高亮实现原理及代码
2014/04/25 Javascript
配置Grunt的Task时通配符支持和动态生成文件名问题
2015/09/06 Javascript
原生js实现手风琴功能(支持横纵向调用)
2017/01/13 Javascript
解决vue更新路由router-view复用组件内容不刷新的问题
2019/11/04 Javascript
vue 取出v-for循环中的index值实例
2019/11/09 Javascript
vue+ESLint 配置保存 自动格式化代码
2020/03/17 Javascript
[05:15]DOTA2英雄梦之声_第16期_灰烬之灵
2014/06/21 DOTA
简单实现python进度条脚本
2017/12/18 Python
Python把csv数据写入list和字典类型的变量脚本方法
2018/06/15 Python
python实现C4.5决策树算法
2018/08/29 Python
python bmp转换为jpg 并删除原图的方法
2018/10/25 Python
利用python在excel里面直接使用sql函数的方法
2019/02/08 Python
python实现图书借阅系统
2019/02/20 Python
用Python实现将一张图片分成9宫格的示例
2019/07/05 Python
python动态视频下载器的实现方法
2019/09/16 Python
Python开发企业微信机器人每天定时发消息实例
2020/03/17 Python
详解pycharm连接远程linux服务器的虚拟环境的方法
2020/11/13 Python
css3使用animation属性实现炫酷效果(推荐)
2020/02/04 HTML / CSS
英国珠宝钟表和家居礼品精品店:David Shuttle
2018/02/24 全球购物
2014年学校工作总结
2014/11/20 职场文书
安徽导游词
2015/02/12 职场文书
解决numpy数组互换两行及赋值的问题
2021/04/17 Python
教你用python实现一个无界面的小型图书管理系统
2021/05/21 Python