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之小练习代码
Oct 12 Javascript
Jquery 弹出层插件实现代码
Oct 24 Javascript
JavaScript中的私有/静态属性介绍
Jul 26 Javascript
jQuery快速上手:写jQuery与直接写JS的区别详细解析
Aug 26 Javascript
javascript汉字拼音互转的简单实例
Oct 09 Javascript
微信小程序(三):网络请求
Jan 13 Javascript
javascript input输入框模糊提示功能的实现
Sep 25 Javascript
react-native 圆弧拖动进度条实现的示例代码
Apr 12 Javascript
通过jquery获取上传文件名称、类型和大小的实现代码
Apr 19 jQuery
使用vue2.6实现抖音【时间轮盘】屏保效果附源码
Apr 24 Javascript
vue spa应用中的路由缓存问题与解决方案
May 31 Javascript
vue响应式原理与双向数据的深入解析
Jun 04 Vue.js
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自动获取关键字的方法
2015/01/06 PHP
PHP微信红包API接口
2015/12/05 PHP
PHP实现将几张照片拼接到一起的合成图片功能【便于整体打印输出】
2017/11/14 PHP
php支付宝系列之电脑网站支付
2018/05/30 PHP
PHP实现小程序批量通知推送
2018/11/27 PHP
Laravel框架实现定时Task Scheduling例子
2019/10/22 PHP
扩展jquery实现客户端表格的分页、排序功能代码
2011/03/16 Javascript
jquery 读取页面load get post ajax 四种方式代码写法
2011/04/02 Javascript
jquery ajax应用中iframe自适应高度问题解决方法
2014/04/12 Javascript
jquery append()方法与html()方法的区别及使用介绍
2014/08/01 Javascript
ANGULARJS中用NG-BIND指令实现单向绑定的例子
2014/12/08 Javascript
使用Plupload实现直接上传附件至七牛云存储
2014/12/26 Javascript
jQuery中unbind()方法用法实例
2015/01/19 Javascript
jQuery遍历DOM节点操作之filter()方法详解
2016/04/14 Javascript
jQuery基于函数重载实现自定义Alert函数样式的方法
2016/07/27 Javascript
vue中使用refs定位dom出现undefined的解决方法
2017/12/21 Javascript
微信小程序实现图片上传放大预览删除代码
2020/06/28 Javascript
Mint-UI时间组件起始时间问题及时间插件使用
2018/08/20 Javascript
简单了解JavaScript弹窗实现代码
2020/05/07 Javascript
原生js实现贪吃蛇游戏
2020/10/26 Javascript
简单谈谈offsetleft、offsetTop和offsetParent
2020/12/04 Javascript
javascript中闭包closure的深入讲解
2021/03/03 Javascript
Python itertools模块详解
2015/05/09 Python
编写Python脚本抓取网络小说来制作自己的阅读器
2015/08/20 Python
Python 文件管理实例详解
2015/11/10 Python
详解Python之unittest单元测试代码
2018/01/24 Python
python pip如何手动安装二进制包
2020/09/30 Python
英国足球店:UK Soccer Shop
2017/11/19 全球购物
Gretna Green中文官网:苏格兰格林小镇
2019/10/16 全球购物
大学军训感言200字
2014/02/26 职场文书
民族学专业职业生涯规划范文:积跬步以至千里
2014/09/11 职场文书
领导班子四风对照检查材料范文
2014/09/27 职场文书
红色经典电影观后感
2015/06/18 职场文书
2016大一新生军训感言
2015/12/08 职场文书
护士自荐信范文(2016推荐篇)
2016/01/28 职场文书
《只有一个地球》教学反思
2016/02/16 职场文书