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 相关文章推荐
JS解析XML的实现代码
Nov 12 Javascript
aspx中利用js实现确认删除代码
Jul 22 Javascript
JavaScript DOM 编程艺术(第2版)读书笔记(JavaScript的最佳实践)
Oct 01 Javascript
基于JQuery的列表拖动排序实现代码
Oct 01 Javascript
JS实现兼容火狐及IE iframe onload属性的遮罩层隐藏及显示效果
Aug 23 Javascript
微信小程序 for 循环详解
Oct 09 Javascript
微信扫码支付零云插件版实例详解
Apr 26 Javascript
详解Node项目部署到云服务器上
Jul 12 Javascript
node中的密码安全(加密)
Sep 17 Javascript
Vue-axios-post数据后端接不到问题解决
Jan 09 Javascript
Vue + element 实现多选框组并保存已选id集合的示例代码
Jun 03 Javascript
微信小程序抽奖组件的使用步骤
Jan 11 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获取淘宝分类id示例
2014/01/16 PHP
php中curl使用指南
2015/02/05 PHP
详解PHP执行定时任务的实现思路
2015/12/21 PHP
Symfony模板的快捷变量用法实例
2016/03/17 PHP
js资料toString 方法
2007/03/13 Javascript
jquery下动态显示jqGrid以及jqGrid的属性设置容易出现问题的解决方法
2010/10/22 Javascript
优化innerHTML操作(提高代码执行效率)
2011/08/20 Javascript
jquery ajax jsonp跨域调用实例代码
2013/12/11 Javascript
jquery实现非叠加式的搜索框提示效果
2014/01/07 Javascript
JavaScript打印网页指定区域的例子
2014/05/03 Javascript
用box固定长宽实现图片自动轮播js代码
2014/06/09 Javascript
Javascript 中创建自定义对象的方法汇总
2014/12/04 Javascript
纯javascript实现的小游戏《Flappy Pig》实例
2015/07/27 Javascript
jQuery实现鼠标双击Table单元格变成文本框及输入内容后更新到数据库的方法
2015/11/25 Javascript
javascript学习之json入门
2016/12/22 Javascript
初识NodeJS服务端开发入门(Express+MySQL)
2017/04/07 NodeJs
mac下的nodejs环境安装的步骤
2017/05/24 NodeJs
javascript和php使用ajax通信传递JSON的实例
2018/08/21 Javascript
爬虫利器Puppeteer实战
2019/01/09 Javascript
JavaScript数据结构与算法之检索算法实例分析【顺序查找、最大最小值、自组织查询】
2019/02/22 Javascript
基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件功能
2021/02/23 Vue.js
[03:01]完美盛典趣味短片 DOTA2年度最佳&拉胯英雄
2019/12/07 DOTA
python直接访问私有属性的简单方法
2016/07/25 Python
python使用Tkinter实现在线音乐播放器
2018/01/30 Python
Django项目中添加ldap登陆认证功能的实现
2019/04/04 Python
Python:Numpy 求平均向量的实例
2019/06/29 Python
使用python爬取抖音视频列表信息
2019/07/15 Python
Win10系统下安装labelme及json文件批量转化方法
2019/07/30 Python
html5 offlline 缓存使用示例
2013/06/24 HTML / CSS
优秀辅导员事迹材料
2014/02/16 职场文书
2014年“向国旗敬礼”网上签名寄语活动方案
2014/09/27 职场文书
正风肃纪剖析材料
2014/09/30 职场文书
2015年会计人员工作总结
2015/05/22 职场文书
据Python爬虫不靠谱预测可知今年双十一销售额将超过6000亿元
2021/11/11 Python
Python实现视频中添加音频工具详解
2021/12/06 Python
win11怎么消除图标小盾牌?win11消除图标小盾牌解决方法
2022/08/05 数码科技