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 相关文章推荐
AJAX架构之Dojo篇
Apr 10 Javascript
一个网马的tips实现分析
Nov 28 Javascript
jQuery 一个图片切换的插件
Oct 09 Javascript
js动态修改表格行colspan列跨度的方法
Mar 30 Javascript
JQuery简单实现锚点链接的平滑滚动
May 03 Javascript
jQuery移动端图片上传组件
Jun 12 Javascript
js中小数向上取整数,向下取整数,四舍五入取整数的实现(必看篇)
Feb 13 Javascript
AngularJS constant和value区别详解
Feb 28 Javascript
在node中如何使用 ES6
Apr 22 Javascript
ReactNative短信验证码倒计时控件的实现代码
Jul 20 Javascript
理解 Node.js 事件驱动机制的原理
Aug 16 Javascript
vue-cli3.X快速创建项目的方法步骤
Nov 14 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下连接mssql2005的代码
2011/01/17 PHP
php中如何判断一个网页请求是ajax请求还是普通请求
2013/08/10 PHP
php获取四位字母和数字的随机数的实现方法
2015/01/09 PHP
Ubuntu12下编译安装PHP5.3开发环境
2015/03/27 PHP
js实现的网站首页随机公告随机公告
2007/03/14 Javascript
用js 让图片在 div或dl里 居中,底部对齐
2008/01/21 Javascript
JS拖动技术 关于setCapture使用
2010/12/09 Javascript
用方法封装javascript的new操作符(一)
2010/12/25 Javascript
jquery延迟加载外部js实现代码
2013/01/11 Javascript
js判断鼠标同时离开两个div的思路及代码
2013/05/31 Javascript
点击A元素触发B元素的事件在IE8下会识别成A元素
2014/09/04 Javascript
Javascript基础教程之定义和调用函数
2015/01/18 Javascript
jquery插件bxslider用法实例分析
2015/04/16 Javascript
无刷新上传文件并返回自定义值
2015/06/11 Javascript
Google Maps基础及实例解析
2016/08/06 Javascript
JS中作用域和变量提升(hoisting)的深入理解
2016/10/31 Javascript
javascript动画系列之模拟滚动条
2016/12/13 Javascript
详解利用jsx写vue组件的方法示例
2017/07/17 Javascript
详解微信小程序调起键盘性能优化
2018/07/24 Javascript
浅谈webpack4.x 入门(一篇足矣)
2018/09/05 Javascript
解决ele ui 表格表头太长问题的实现
2019/11/13 Javascript
利用 python 对目录下的文件进行过滤删除
2017/12/27 Python
在Python中使用gRPC的方法示例
2018/08/08 Python
使用Selenium破解新浪微博的四宫格验证码
2018/10/19 Python
对Python实现简单的API接口实例讲解
2018/12/10 Python
Flask之请求钩子的实现
2018/12/23 Python
对DJango视图(views)和模版(templates)的使用详解
2019/07/17 Python
Flask框架模板渲染操作简单示例
2019/07/31 Python
python使用 request 发送表单数据操作示例
2019/09/25 Python
python读取csv文件指定行的2种方法详解
2020/02/13 Python
Python GUI库PyQt5图形和特效样式QSS介绍
2020/02/25 Python
20行Python代码实现视频字符化功能
2020/04/13 Python
Visual Studio code 配置Python开发环境
2020/09/11 Python
跑步、骑行和铁人三项的高性能眼镜和服装:ROKA
2018/07/06 全球购物
劳务派遣管理制度(样本)
2019/08/23 职场文书
Python实现信息轰炸工具(再也不怕说不过别人了)
2021/06/11 Python