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 相关文章推荐
提高 DHTML 页面性能
Dec 25 Javascript
jQuery 美元符冲突的解决方法
Mar 28 Javascript
JS 遮照层实现代码
Mar 31 Javascript
jQuery+jsp实现省市县三级联动效果(附源码)
Dec 03 Javascript
学习javascript面向对象 理解javascript对象
Jan 04 Javascript
jQuery插件FusionCharts实现的2D柱状图效果示例【附demo源码下载】
Mar 06 Javascript
angular使用bootstrap方法手动启动的实例代码
Jul 18 Javascript
tangram.js库实现js类的方式实例分析
Jan 06 Javascript
JS实现数组深拷贝的方法分析
Mar 06 Javascript
Layui 数据表格批量删除和多条件搜索的实例
Sep 04 Javascript
Vue 组件复用多次自定义参数操作
Jul 27 Javascript
vue递归获取父元素的元素实例
Aug 07 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中jsonp的跨域实例
2013/06/21 PHP
PHP中数据类型转换的三种方式
2015/04/02 PHP
改善你的jQuery的25个步骤 千倍级效率提升
2010/02/11 Javascript
JavaScript 学习初步 入门教程
2010/03/25 Javascript
js验证输入是否为手机号码或电话号码示例
2013/12/30 Javascript
JavaScript italics方法入门实例(把字符串显示为斜体)
2014/10/17 Javascript
PHP 数组current和next用法分享
2015/03/05 Javascript
javascript引用类型之时间Date和数组Array
2015/08/27 Javascript
关于Vue.js一些问题和思考学习笔记(1)
2016/12/02 Javascript
vue2.0 和 animate.css的结合使用
2017/12/12 Javascript
详解如何使用 vue-cli 开发多页应用
2017/12/16 Javascript
浅谈react-router HashRouter和BrowserRouter的使用
2017/12/29 Javascript
基于Vuex无法观察到值变化的解决方法
2018/03/01 Javascript
微信小程序车牌号码模拟键盘输入功能的实现代码
2018/11/11 Javascript
浅谈Fetch 数据交互方式
2018/12/20 Javascript
Nodejs监控事件循环异常示例详解
2019/09/22 NodeJs
[48:41]VP vs VG Supermajor小组赛 B组胜者组决赛 BO3 第二场 6.2
2018/06/03 DOTA
[01:03:22]LGD vs OG 2018国际邀请赛淘汰赛BO3 第一场 8.25
2018/08/29 DOTA
python插入数据到列表的方法
2015/04/30 Python
在Python的Django框架中生成CSV文件的方法
2015/07/22 Python
Python实现选择排序
2017/06/04 Python
Python cookbook(数据结构与算法)找出序列中出现次数最多的元素算法示例
2018/03/15 Python
python删除列表元素的三种方法(remove,pop,del)
2019/07/22 Python
python中return的返回和执行实例
2019/12/24 Python
python3+openCV 获取图片中文本区域的最小外接矩形实例
2020/06/02 Python
用python-webdriver实现自动填表的示例代码
2021/01/13 Python
对pytorch中x = x.view(x.size(0), -1) 的理解说明
2021/03/03 Python
web字体加载方案优化小结
2019/11/29 HTML / CSS
世界排名第一的运动鞋市场:Flight Club
2020/01/03 全球购物
房地产销售经理岗位职责
2014/01/01 职场文书
亲子运动会的活动方案
2014/08/17 职场文书
党员志愿者活动方案
2014/08/28 职场文书
四风问题自查自纠工作情况报告
2014/10/28 职场文书
小学教师求职信范文
2015/03/20 职场文书
2015年医务科工作总结范文
2015/05/26 职场文书
2016年小学推普宣传周活动总结
2016/04/06 职场文书