ECharts 饼图 legend 样式修改

在移动端展示一个数据很多的饼图的时候,首先看一下效果。ECharts legend 配置项


1 legend 让它在右面竖着显示。

		    legend: {type: 'scroll',orient: 'vertical',	show: true,right: 0,top: 20,bottom: 20,textStyle: {fontSize: 7},	formatter: function (name) {		return (name.length > 8 ? (name.slice(0,8)+"...") : name ); },data: []},

我这里用到的ECharts 是 3.5 版本的,如果你的legend特别多,右面的显示应该是分页状态,这个是在3.7版本上加进去的, 可以看EChatrs日志,效果是这样的

我这里formatter 这个作用是 当文字大于8个字符的时候,之后的字符显示"...",

另外一个就是修改 series 的label ,让饼图的扇叶区内显示百分比,

		            label: {normal: {show: true,position: 'inner',formatter: '{d}',fontSize: 7}},


本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/553622.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

怎么设置火狐浏览器自动刷新 火狐浏览器自动刷新图文教程

火狐浏览器怎么设置自动刷新?火狐浏览器为用户提供最新的搜索、网址导航、新闻资讯、网络购物等服务。还有对用户的隐私保护,个性化设置、更快的上网速度等功能,火狐浏览器要怎么设置自动刷新呢,下面就给大家分享具体步骤。 1、首先打开火狐…

C3 粒子闪烁效果

<!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>闪烁</title><style>body {background-color: #000;}.bim-flash-circle {width: 10px;height: 10px;position: absolute;left: 50%;top: 5…

qq浏览器如何关闭广告推荐

浏览器对于用户的生活使用会带来非常大的帮助&#xff0c;让用户在需要搜索的时候更加的方便&#xff0c;但是一般页面都会出现一些广告推荐&#xff0c;很多用户都很不喜欢这些广告&#xff0c;那么用户要如何才能进行关闭呢?对这个服务感兴趣的用户就来一起看看是如何设置的…

ECharts 仪表盘的轴线宽度修改

今天修改仪表盘的轴线宽度&#xff0c; 配置项链接。修改的是下图中线框标注地方的宽度。 下面看一下配置项 option {tooltip : {formatter: "{a} <br/>{b} : {c}%"},toolbox: {feature: {restore: {},saveAsImage: {}}},series: [{name: 业务指标,type: gau…

edge浏览器字体模糊乱码怎么办

最近有用户反映在使用win10edge浏览器的时候出现了一堆乱码的现象&#xff0c;看又看不懂&#xff0c;那到底是字体的问题还是浏览器出现了问题呢?我们又该怎么解决该问题呢?下面小编就给大家介绍win10edge浏览器字体乱码解决教程。 edge浏览器字体设置 edge浏览器字体模糊乱…

CSS 让数字滑动显示

最近在做一个数据展示的页面&#xff0c;老板想要的效果是数字滑动的显示。 所以想了一下实现了老板想要的效果。代码如下。 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>number</title><…

积米浏览器如何阻止弹窗

日常使用浏览器的时候&#xff0c;最烦人也最经常出现的情况也就是各种各样的弹窗广告了&#xff0c;就算当下立即点击关闭&#xff0c;但是不用多久弹窗还是会继续出现。其实&#xff0c;这样的情况点击关闭是没有用的&#xff0c;需要从浏览器设置里关闭。那么&#xff0c;积…

Status Code:200 OK (from disk cache)和304的区别,以及怎么禁止缓存

有时候缓存是 200 OK (from disk cache)有时候会是 304 ? 看运维是否移除了 Entity Tag。移除了&#xff0c;就总是 200 OK (from cache)。没有移除&#xff0c;就两者交替出现。 他们两个的区别是 200 OK (from disk cache) 是浏览器没有跟服务器确认&#xff0c; 就是它直接…

观察者模式和js自定义事件

事件是一种叫做观察者的设计模式,观察者模式由两类对象组成&#xff1a;主体和观察者。主体负责发布事件&#xff0c;同时观察者通过订阅这些事件来观察该主体。拿DOM来说&#xff0c;DOM就是主体&#xff0c;事件处理代码便是观察者。 下面是一个自定义事件&#xff0c; func…

windows7自带录制屏幕怎么用

现在还有许多用户使用的都是windows7旗舰版系统&#xff0c;有时候在使用时会需要用到屏幕录制。那我们要怎么操作呢?可能对于不是太熟悉电脑的朋友来讲&#xff0c;会比较困难。没关系&#xff0c;下面小编为大家分享的就是windows7自带录制屏幕怎么用的方法介绍啦。 window…

米侠浏览器如何添加脚本 米侠浏览器中添加脚本的具体操作步骤

1、想要在米侠浏览器里添加脚本的话&#xff0c;用户们应该先点击页面下方的横杠按钮&#xff0c;打开功能列表找到“脚本”功能进行设置。 米侠浏览器如何添加脚本 米侠浏览器中添加脚本的具体操作步骤 2、接下来通过脚本的功能弹窗&#xff0c;点击其中的“新增”选项&…

js 排序

冒泡排序 var dataStore [ 72 , 1 , 68 , 95 , 75 , 54 , 58 , 10 , 35 , 6 , 28 , 45 , 69 , 13 , 88 , 99 , 24 , 28 , 30 , 31 , 78 , 2 , 77 , 82 , 72 ];var t bubbleSort(dataStore);console.log(t);function bubbleSort(data) {var temp 0;for (var i 0; i < dat…

优酷视频如何意见反馈?优酷视频怎么意见反馈

01、 我们打开优酷视频APP。 优酷视频如何意见反馈&#xff1f;优酷视频怎么意见反馈 02、 在视频的首页&#xff0c;我们点击下方最右侧的那个“我的”。 优酷视频如何意见反馈&#xff1f;优酷视频怎么意见反馈 03、 我们接着在我的页面&#xff0c;选择下“意见反馈”。…

js 类型判断

说到js的类型判断很容易想到的是 typeof、instanceof等。 typeof 有个缺点就是引用类型的结果值都是object 所以就要说一下这些类型是怎么判断的。在说类型判断之前先介绍个东西 Object.prototype.toString 可以查看链接 翻译过来就是 当 toString 方法被调用的时候&#xf…

win11文件夹怎么放到文件栏

Windows11系统桌面相对于win10系统来看&#xff0c;具有很大的变化&#xff0c;其中关于文件的设置具有很大的改变。其中关于文件的文件栏放置和删除是不少网友们关注的问题&#xff0c;下面一起来看看了解一下吧! win11文件夹怎么放到文件栏 win11文件夹需要权限删除怎么办 …

cordova报错“No installed build tools found. Install the Android build tools version - ”

在cordova 里面添加一个安卓平台后&#xff0c;用android studio打开安装gradle后&#xff0c;然后开始构建项目&#xff0c;这个时候在控制台上会报错 这个时候看到对应的文件下报错信息。 然后我们打开这个文件后&#xff0c; 发现这个 if else 判断走了 else 里面的代码&a…

Win7系统不能录音怎么办

目前Win7系统已经逐渐成为了最常使用的系统之一&#xff0c;但有一些小伙伴在使用Win7系统的过程中却发现录制音频功能无法录音&#xff0c;那么遇到这种问题应该怎么办呢?下面就和小编一起来看看Win7系统不能录音的解救方法吧。 Win7系统不能录音怎么办 1、既然是录音问题那…

Win7系统还原声音图标的方法

任务栏声音图标不见了?这是什么情况?任务栏声音图标不见了是我们经常遇到的问题&#xff0c;那么遇到这种情况我们该怎么办呢?下面小编给大家整理了Win7系统还原声音图标的方法&#xff0c;当你遇到win7任务栏声音图标消失不见时&#xff0c;可参照以下的操作方法进行解决。…

Vim 常用命令总结

vi 命令编辑器有三种模式&#xff1a;命令模式&#xff0c;编辑模式和末行模式。 命令模式&#xff1a;键盘的任意一个键都可以当成“编辑命令”。 编辑模式&#xff1a;键盘的任意一个键都当成“文本内容”。 末行模式&#xff1a;键盘的任意一个键都当成“文本管理命令”。…

Python数据结构与算法(一)--算法和时间复杂度

最近下班一直在学习和总结Python&#xff0c;最近在整理数据结构和算法这方面的知识&#xff0c;虽然大学的时候也学过数据结构(c语言版本)&#xff0c;但是工作这几年一直在做前端所以&#xff0c;这方面的知识也忘了差不多&#xff0c;所以就想整理一下&#xff0c;方便以后自…