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 相关文章推荐
Prototype使用指南之selector.js
Jan 10 Javascript
jquery中$.post()方法的简单实例
Feb 04 Javascript
jQuery如何取id有.的值一般的方法是取不到的
Apr 18 Javascript
jquery通过closest选择器修改上级元素的方法
Mar 17 Javascript
javascript实现俄罗斯方块游戏的思路和方法
Apr 27 Javascript
第三章之Bootstrap 表格与按钮功能
Apr 25 Javascript
谈谈JavaScript的New关键字
Aug 26 Javascript
vue.js element-ui tree树形控件改iview的方法
Mar 29 Javascript
解决Mac安装thrift因bison报错的问题
May 17 Javascript
JS/HTML5游戏常用算法之碰撞检测 包围盒检测算法详解【圆形情况】
Dec 13 Javascript
vue Tab切换以及缓存页面处理的几种方式
Nov 05 Javascript
JQuery事件冒泡和默认行为代码实例
May 13 jQuery
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
Symfony2学习笔记之模板用法详解
2016/03/17 PHP
PHP实现简单计算器小程序
2020/08/28 PHP
thinkphp框架使用JWTtoken的方法详解
2019/10/10 PHP
Laravel 实现关系模型取出需要的字段
2019/10/10 PHP
PHP的图像处理实例小结【文字水印、图片水印、压缩图像等】
2019/12/20 PHP
Javascript var变量隐式声明方法
2009/10/19 Javascript
使用js判断控件是否获得焦点
2014/01/03 Javascript
jquery实现手机发送验证码的倒计时代码
2014/02/12 Javascript
Javascript中call与apply的学习笔记
2014/09/22 Javascript
JavaScript中数据结构与算法(四):串(BF)
2015/06/19 Javascript
jQuery实现的产品自动360度旋转展示特效源码分享
2015/08/21 Javascript
js实现微博发布小功能
2017/01/12 Javascript
JavaScript实现水平进度条拖拽效果
2017/01/18 Javascript
浅谈ES6新增的数组方法和对象
2017/08/08 Javascript
angularjs实现柱状图动态加载的示例
2017/12/11 Javascript
webpack+vue2构建vue项目骨架的方法
2018/01/09 Javascript
vue实现类似淘宝商品评价页面星级评价及上传多张图片功能
2018/10/29 Javascript
如何使用CSS3和JQuery easing 插件制作绚丽菜单
2019/06/18 jQuery
浅谈vue限制文本框输入数字的正确姿势
2019/09/02 Javascript
vue实现点击按钮下载文件功能
2019/10/11 Javascript
vue项目使用$router.go(-1)返回时刷新原来的界面操作
2020/07/26 Javascript
python提取内容关键词的方法
2015/03/16 Python
python中实现k-means聚类算法详解
2017/11/11 Python
python自动裁剪图像代码分享
2017/11/25 Python
Python多继承原理与用法示例
2018/08/23 Python
Python的高阶函数用法实例分析
2019/04/11 Python
centos7之Python3.74安装教程
2019/08/15 Python
python GUI库图形界面开发之PyQt5单行文本框控件QLineEdit详细使用方法与实例
2020/02/27 Python
Mac PyCharm中的.gitignore 安装设置教程
2020/04/16 Python
解决Python安装cryptography报错问题
2020/09/03 Python
人力资源专业推荐信
2013/11/29 职场文书
家庭财产分割协议范文
2014/11/24 职场文书
如何撰写创业策划书
2019/06/27 职场文书
golang 实现两个结构体复制字段
2021/04/28 Golang
mysql 生成连续日期及变量赋值
2022/03/20 MySQL
如何优化vue打包文件过大
2022/04/13 Vue.js