echarts浮动显示单位的实现方法示例
更新时间:2020年12月4日 17:45 点击:2131
本文主要介绍的是利用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浮动显示单位内容请搜索猪先飞以前的文章或继续浏览下面的相关文章希望大家以后多多支持猪先飞!
上一篇: 可拖拽组件slider.js使用方法详解
下一篇: js实现复制粘贴的两种方法
相关文章
- 这篇文章主要介绍了解决echarts 一条柱状图显示两个值,类似进度条的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-20
- 这篇文章主要为大家详细介绍了jQuery实现广告显示和隐藏动画,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-07-05
- 为了网站的安全性,很多朋友都把密码设的比较复杂,但是如何密码不能明显示,不知道输的是对是错,为了安全起见可以把密码显示的,那么基于js代码如何实现的呢?下面通过本文给大家介绍JavaScript实现表单密码的隐藏和显示,需要的朋友参考下...2016-03-03
详解在IDEA中将Echarts引入web两种方式(使用js文件和maven的依赖导入)
这篇文章主要介绍了在IDEA中将Echarts引入web两种方式(使用js文件和maven的依赖导入),本文通过图文并茂的形式给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2020-07-11- 想在网页中动态地显示当前系统的时间,找了好多,不过都是一些停在那里不动的。。。不过皇天不负有心人,终于让我找到了...2020-06-25
- 这篇文章主要介绍了基于Ionic3实现选项卡切换并重新加载echarts,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-09-24
- 这篇文章主要介绍了C#实现动态显示及动态移除图片方法,对于C#的初学者了解图像操作有一定的帮助,需要的朋友可以参考下...2020-06-25
- 这篇文章主要介绍了详解Javascript利用echarts画空气质量地图,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-10-11
- 这篇文章主要介绍了解决druid监控页面SQL不显示的问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教...2021-06-19
- 众所周知echarts是一个纯JavaScript的图标库,下面这篇文章主要给大家介绍了关于Echarts实例之树形图表的实现方法,需要的朋友可以参考下...2021-08-06
echarts实现获取datazoom的起始值(包括x轴和y轴)
这篇文章主要介绍了echarts实现获取datazoom的起始值(包括x轴和y轴),具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-20在echarts中图例legend和坐标系grid实现左右布局实例
这篇文章主要介绍了在echarts中图例legend和坐标系grid实现左右布局实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-05-17- 这篇文章主要介绍了javascript点击按钮实现隐藏显示切换效果,以一个完整的实例为大家分析了js点击按钮实现隐藏显示切换的功能,感兴趣的小伙伴们可以参考一下...2016-02-05
- 最近要做个网页图片批量下载工具,然后需要一个页面显示网页上的所有图片供用户勾选,再根据勾选的内容来下载指定图片,其中就涉及到要到同时显示多张图片,本文就来介绍一下...2021-06-11
如何使用PHP+jQuery+MySQL实现异步加载ECharts地图数据(附源码下载)
ECharts地图主要用于地理区域数据的可视化,展示不同区域的数据分布信息,通过本文给大家介绍如何使用PHP+jQuery+MySQL实现异步加载ECharts地图数据,需要的朋友参考下吧...2016-02-26- 这篇文章主要介绍了R语言-在一张图上显示多条线的实现,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2021-05-06
- 这篇文章主要介绍了C#实现让窗体永远在窗体最前面显示,功能非常实用,需要的朋友可以参考下...2020-06-25
- 本篇文章是对c#中任务栏隐藏与显示的实现方法进行了详细的分析介绍,需要的朋友参考下...2020-06-25
android中ToolBar设置NavigationIcon图标不显示、失败、没反应,绝对管用
ToolBar工具昨天介绍过相关的教程今天我们来看看关于android中ToolBar设置NavigationIcon图标不显示、失败、没反应,绝对管用问题的解决办法。 最近开发android ap...2016-10-02- 下面小编就为大家分享一篇C#实现将一个字符串进行翻转显示的6种方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-06-25