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 相关文章推荐
jquery实现控制表格行高亮实例
Jun 05 Javascript
Bootstrap3制作搜索框样式的方法
Jul 11 Javascript
微信小程序 页面跳转及数据传递详解
Mar 14 Javascript
jsonp跨域请求详解
Jul 13 Javascript
JS中的事件委托实例浅析
Mar 22 Javascript
浅谈webpack 自动刷新与解析
Apr 09 Javascript
Vue 使用计时器实现跑马灯效果的实例代码
Jul 11 Javascript
微信小程序实现滑动翻页效果(完整代码)
Dec 06 Javascript
JavaScript原型继承和原型链原理详解
Feb 04 Javascript
Antd的Table组件嵌套Table以及选择框联动操作
Oct 24 Javascript
react antd表格中渲染一张或多张图片的实例
Oct 28 Javascript
解决vue 使用axios.all()方法发起多个请求控制台报错的问题
Nov 09 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
wordpress自定义url参数实现路由功能的代码示例
2013/11/28 PHP
ThinkPHP框架实现的MySQL数据库备份功能示例
2018/05/24 PHP
nodejs的require模块(文件模块/核心模块)及路径介绍
2013/01/14 NodeJs
select标记美化--JS式插件、后期加载
2013/04/01 Javascript
js中自定义方法实现停留几秒sleep
2014/07/11 Javascript
javascript实现全局匹配并替换的方法
2015/04/27 Javascript
JavaScript中函数(Function)的apply与call理解
2015/07/08 Javascript
改变checkbox默认选中状态及取值的实现代码
2016/05/26 Javascript
JS中的hasOwnProperty()和isPrototypeOf()属性实例详解
2016/08/11 Javascript
jQuery实现导航滚动到指定内容效果完整实例【附demo源码下载】
2016/09/20 Javascript
Bootstrap表格使用方法详解
2017/02/17 Javascript
Nuxt.js踩坑总结分享
2018/01/18 Javascript
vue 使用Jade模板写html,stylus写css的方法
2018/02/23 Javascript
vue.js计算属性computed用法实例分析
2018/07/06 Javascript
详解Vue内部怎样处理props选项的多种写法
2018/11/06 Javascript
nodeJs的安装与npm全局环境变量的配置详解
2020/01/06 NodeJs
JavaScript闭包原理与用法学习笔记
2020/05/29 Javascript
vue中echarts引入中国地图的案例
2020/07/28 Javascript
用vue设计一个日历表
2020/12/03 Vue.js
[03:02]生活中的Dendi之野外度假篇
2016/08/09 DOTA
编写同时兼容Python2.x与Python3.x版本的代码的几个示例
2015/03/30 Python
Python向日志输出中添加上下文信息
2017/05/24 Python
机器学习python实战之手写数字识别
2017/11/01 Python
python实现点对点聊天程序
2018/07/28 Python
python画一个玫瑰和一个爱心
2020/08/18 Python
python使用 zip 同时迭代多个序列示例
2019/07/06 Python
Python代码块及缓存机制原理详解
2019/12/13 Python
python绘制雪景图
2019/12/16 Python
Python字符串的修改方法实例
2019/12/19 Python
python打印文件的前几行或最后几行教程
2020/02/13 Python
Django rest framework分页接口实现原理解析
2020/08/21 Python
幼师专业求职推荐信
2013/11/08 职场文书
群众路线剖析材料范文
2014/10/09 职场文书
2015年党小组工作总结
2015/05/26 职场文书
Docker官方工具docker-registry案例演示
2022/04/13 Servers
golang的文件创建及读写操作
2022/04/14 Golang