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 相关文章推荐
破除网页鼠标右键被禁用的绝招大全
Dec 27 Javascript
解决表单中第一个非隐藏的元素获得焦点的一个方案
Oct 26 Javascript
ExtJS Store的数据访问与更新问题
Apr 28 Javascript
JQuery实现简单时尚快捷的气泡提示插件
Dec 20 Javascript
JavaScript实现动画打开半透明提示层的方法
Apr 21 Javascript
实例详解jQuery的无new构建
Aug 02 Javascript
ion content 滚动到底部会遮住一部分视图的快速解决方法
Sep 06 Javascript
JS如何实现在页面上快速定位(锚点跳转问题)
Aug 14 Javascript
layui使用label标签的方法
Sep 14 Javascript
JavaScript enum枚举类型定义及使用方法
May 15 Javascript
Vue this.$router.push(参数)实现页面跳转操作
Sep 09 Javascript
详解JavaScript中的数据类型,以及检测数据类型的方法
Sep 17 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
ThinkPHP实例化模型的四种方法概述
2014/08/22 PHP
thinkPHP中分页用法实例分析
2015/12/26 PHP
小程序微信支付功能配置方法示例详解【基于thinkPHP】
2019/05/05 PHP
thinkphp 5框架实现登陆,登出及session登陆状态检测功能示例
2019/10/10 PHP
js异或加解密效果代码
2008/06/25 Javascript
JavaScript中为元素加上name属性的方法
2011/05/09 Javascript
js中字符替换函数String.replace()使用技巧
2011/08/14 Javascript
JavaScript数组常用方法
2015/03/02 Javascript
jQuery实现Flash效果上下翻动的中英文导航菜单代码
2015/09/22 Javascript
jQuery 中ajax异步调用的四种方式
2016/06/28 Javascript
BootStrap table表格插件自适应固定表头(超好用)
2016/08/24 Javascript
在js中实现邮箱格式的验证方法(推荐)
2016/10/24 Javascript
Jquery通过ajax请求NodeJS返回json数据实例
2016/11/08 NodeJs
微信小程序左滑删除效果的实现代码
2017/02/20 Javascript
详解AngularJS脏检查机制及$timeout的妙用
2017/06/19 Javascript
详解在Vue中如何使用axios跨域访问数据
2017/07/07 Javascript
使用Dropzone.js上传的示例代码
2017/10/10 Javascript
浅谈如何通过node.js对数据进行MD5加密
2018/05/16 Javascript
Nautil 中使用双向数据绑定的实现
2019/10/02 Javascript
vue动态路由:路由参数改变,视图不更新问题的解决
2019/11/05 Javascript
vue 接口请求地址前缀本地开发和线上开发设置方式
2020/08/13 Javascript
python学习必备知识汇总
2017/09/08 Python
python实现滑雪者小游戏
2020/02/22 Python
python+requests接口压力测试500次,查看响应时间的实例
2020/04/30 Python
python框架flask入门之环境搭建及开启调试
2020/06/07 Python
Python大批量搜索引擎图像爬虫工具详解
2020/11/16 Python
解决pycharm不能自动保存在远程linux中的问题
2021/02/06 Python
CSS3 Backgrounds属性相关介绍
2011/05/11 HTML / CSS
.net工程师笔试题
2012/06/09 面试题
师德学习感言
2014/01/31 职场文书
2014年消防工作实施方案
2014/02/20 职场文书
文秘应届生求职信
2014/07/05 职场文书
学校领导四风问题整改措施思想汇报
2014/10/09 职场文书
2014年党的群众路线活动个人整改措施
2014/10/28 职场文书
2015年世界急救日宣传活动方案
2015/05/06 职场文书
拉贝日记观后感
2015/06/05 职场文书