echarts 多个饼图套用时legend匹配问题(series中有多个数据)

置顶 已于 2022-08-31 17:05:45 修改
阅读量3.8k 收藏
点赞数
文章标签： echarts
于 2022-04-26 09:44:52 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/bobringtheboys/article/details/124420215
版权
在Echarts中实现多饼图效果时遇到图例重叠和多余图例显示的问题。在5.0以下版本，legend type设为'scroll'结合rich时会导致图例重叠。升级到5.0及以上版本，虽然样式改善，但series中的无数据项会产生额外图例。解决方案是为legend添加data属性，指定为series中特定数据的name，确保图例与数据对应。
摘要由CSDN通过智能技术生成

在这里插入图片描述
像这样要实现这样的效果时 我会使用多个饼图设置不同的radius来实现

有几个坑点
1,在echarts 5.0版本以下当给legend加入type: ‘scroll’,并且textStyle中用到了rich想要让图例实现翻页时它的legend会重叠在一起
在这里插入图片描述
像这样,当然有人会说升级不就好

2.确实升级样式起码不会有什么问题,但是会发现在使用5.0以上版本的时候加type:'scroll’之后,虽然图例显示正常但是不难发现其实 series中套用的单纯用来描绘样式的数据也会有自己的一个图例, (也就是那个小方块啦)由于没有数据没有name所以会发现就是一个单纯的小方块
在这里插入图片描述

3.解决办法就是让legend给个data属性,属性值是series中data的name数据的一个集合 当然如果你的图例描述很简单可以看看官图示例 (由于我这里还使用了rich,想要自定义图例的描述以及相应的样式,所以不能单纯的用官网示例)
官图示例

我自己都觉得罗里吧嗦 一句话总结吧
当你的echarts中series中有多个数据想要让legend用来描述特定的一个数据时候,给legend一个data属性,属性值是那个特定数据的data中的name就行啦 !

bobringtheboys
关注
echarts 多个series_基于echarts异步加载数据之多个series加载实例
weixin_39810441的博客
12-22 1203
基于本人最近在参与研究公司echarts报表部分的功能，其中遇到了不少的坑，这里将echarts异步加载 json 数据中涉及到的多个series加载实例问题解决方案做一个共享。问题描述我们在加载echarts复杂图形时，比如说折线图和柱状图结合，会涉及到多个series样式，给个例子, option = {tooltip: {trigger: 'axis',formatter: functio...
echarts的legend分多处排列
dlm_bk的博客
12-14 9652
实现legend分多处放置，分列左右，上下，不放在一起，可以将legend分多个组，然后修改其属性，以达到目标效果 将需要分离排列的legend分成两组，如下代码： legend: [                 {                     icon : 'bar',                     textStyle : {          
03、echarts 图例组件legend配置
最新发布
qq_38210427的博客
09-02 3571
默认的图例数据会从系列中获取，如果需要设置不同的图例样式或者不需要展示某个系列图例则可设置数据。图例的数据字段name必须是系列中的系列名称或数据名,测试不展示最后一项高跟鞋.并设置数据名为雪纺衫的图例图形为pinlegend: {// ...data: [name: "衬衫",},name: "羊毛衫",},name: "雪纺衫",},name: "裤子",},],},// ...七、type:scroll。
Echarts之series动态渲染多个折线图/面积图
DZQ1223的博客
05-24 3364
由于工作中遇到的图表特别多，每次用过配置项总是想不起来，在这里记录一下，希望也可以帮到路过的你。
多图表共用legend
qq_42844063的博客
05-25 2300
​ 因此独立出来的图例实际上也是一个饼图，但是只显示legend，饼图给隐藏了，然后在操作legend的时候使用bus把操作的块传给了其他饼图，并执行函数同步操作，就形成了共用legend，并可操作其他饼图。​ 这四个饼图的legend都是一样的，数据格式也是一样的，只是具体数据内容不一样。多饼图共用一个legend，并且要求legend可以控制所有饼图。​ 2.鼠标放上 饼图强调，并显示tip，移走隐藏。​ 1.legend可以控制某一块饼显隐。一、lengend和 饼图盒子代码。
echarts 实现同一组legend控制两个饼图示例
SM_Cute的博客
11-17 1019
echarts 实现同一组legend控制两个饼图示例
ECharts表格 多个表格显示在一起 多个series 对应多个legend 写法
Destiny的博客
01-13 6611
这几天在做统计方面 需要用到一些报表 用的也是ECharts，多个图表在一起显示，相当于多个option在一起显示, 一般见得多的是一个series对应一个legend或者是多个series对应一个legend， 但是现在有个需求就是多个series对应多个legend，经过尝试提供一种option写法: 先上个效果图： 直接复制到ECharts官网调试即可 option = {...
微信小程序遍历Echarts图表实现多个饼图
10-17
微信小程序遍历Echarts图表实现多个饼图的知识点主要集中在以下几个方面： 1. 微信小程序与Echarts图表的集成：微信小程序作为前端开发框架，可以嵌入Echarts图表来实现数据的可视化展示。Echarts是一个使用...
echarts 多饼图
10-23
实现多饼图的方法是在`series`配置项中添加多个饼图系列，每个系列代表一个饼图。 ```javascript var option = { tooltip: { ... }, legend: { ... }, series: [ { name: '饼图1', type: 'pie', radius: '50...
解决echarts中饼图标签重叠的问题
12-17
饼图中的series有个avoidLabelOverlap属性， avoidLabelOverlap:是否启用防止标签重叠策略，默认开启，在标签拥挤重叠的情况下会挪动各个标签的位置，防止标签间的重叠。 当avoidLabelOverlap设置为false时会出现...
echarts 3d饼图资源
05-12
3D 饼图是 ECharts 提供的一种扩展的图表类型，它在传统二维饼图的基础上增加了第三个维度，使数据可视化更具有立体感和深度，有助于用户从多个角度理解和解析数据。3D 饼图在呈现多组数据比例关系时特别有用，因为...
echarts 数据量特别大且很多数值比较相近时label覆盖，legend与饼图重叠问题，鼠标在legend图例上悬浮时，tooltie提示信息显示全部信息
扬帆前行
06-13 4793
环境 vue+element+echarts 饼图生产项目需求： 1、产生的数据在饼图都有体现，tooltie显示数值，名称，占比等信息， 2、lengend分页滚动显示内容，并且鼠标悬浮也显示tooltie信息 3、饼图展示所有的数据占比且展示的顺序按照接口返回的数据顺序展示，但是只有数量前十的会显示label和labelLine 只显示前十数据的label，需要自己计算数据 其他基本在官方文档中都有记录。 由于没有仔细查找文档导致想要在lengend显示tooltie提示信息，查找了很多时间，没
echarts 多个series_Echarts地图悬浮框显示多组series数据以及修改地图大小
weixin_39880337的博客
12-22 1701
HULUHULU全国带宽分布var myChart = echarts.init(document.getElementById('province'));var option = {title : {text: 'HULU全国带宽',subtext: '数据来自HBase',x:'center'},tooltip : {trigger: 'item',formatter:function(par...
Echarts 多环饼图实现
weixin_53858977的博客
05-11 975
经两个（或以上）的数据种类，通过radius设置图形的半径堆叠出图形，itemStyle隐藏多余图形等方式渲染出图形大致形状，按自身实际业务场景完成配置后，按对应数据结构注入相应的数据即可实现
android 多个折线图 最佳视野,echarts 一个legend控制多个折线图
weixin_42530732的博客
05-26 836
很简单按你上面的图创建两个坐标系然后把想同时显示和消失的那几项设置成相同的name就行给你个代码示例option = {legend:{show:true,data:['111','222']},xAxis: [{data: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']}, {data: ['Sun', 'Mon', 'Tue', 'Wed',...
echarts 多个series_请教：如何让echarts的地图悬浮框出现多组series数据？
weixin_39811166的博客
12-22 951
已经找到问题所在，昨天在网上查找了一下相关的资料，发现了解决方案，在此自问自答，希望能帮到有需要的朋友：1、 通过option.series获取到全部数据系列2、 在tooltip(控制悬浮框的属性)的formatter属性中使用回调来返回需要展示的字符格式3、在回调中遍历series和series.data，通过判断当前数据是否属于当前地区来拼装字符串下面是解决方案的代码：var chart =...
echarts不一样的饼图
weixin_41897680的博客
05-24 579
echarts不一样的饼图
基于echarts异步加载数据之多个series加载实例
dxyzhbb的博客
05-03 1973
前言 基于本人最近在参与研究公司echarts报表部分的功能，其中遇到了不少的坑，这里将echarts异步加载json数据中涉及到的多个series加载实例问题解决方案做一个共享。 问题描述 我们在加载echarts复杂图形时，比如说折线图和柱状图结合，会涉及到多个series样式，给个例子, ...
echarts 配置项 series 中的data 多维度
qq_32615575的博客
08-13 6166
//系列中的数据内容数组。数组项通常为具体的数据项。 //通常来说，数据用一个二维数组(arr[x][y])表示。如下，每一列被称为一个『维度』。 series: [{ data: [ // 维度X 维度Y 其他维度 ... [ 3.4, 4.5, 15, 43], //arr[0][y]一行 [ 4.2, 2.3, 20, 91], [ 10.8, 9.5, 30, 18], ...
echarts多个饼图轮播
06-06
如果你想要实现echarts多个饼图轮播的效果，可以使用setInterval()函数和echarts的API实现。具体步骤如下： 1. 首先创建一个包含多个饼图数据的数组，每个饼图数据包含饼图的名称、数据等信息。 2. 创建一个echarts实例，并设置好饼图的基本配置，例如：title、tooltip、legend等。 3. 创建一个函数，用于更新饼图的数据和option配置。在该函数内部，使用echarts提供的setOption()函数更新数据和配置。 4. 使用setInterval()函数定时调用上述函数，实现饼图轮播的效果。为了更好的体验，建议在饼图之间添加一个过渡动画效果。 下面是一个简单的实现示例代码： ```javascript var pieData = [{name: 'pie1', data: [...]}, {name: 'pie2', data: [...]}, {name: 'pie3', data: [...]}, ...]; var currentIndex = 0; var chart = echarts.init(document.getElementById('chart')); function updateChart() { currentIndex = (currentIndex + 1) % pieData.length; var pie = pieData[currentIndex]; var option = { title: {text: pie.name}, series: [{ type: 'pie', data: pie.data }] }; chart.setOption(option, true); } setInterval(updateChart, 3000); ``` 在上述代码中，我们定义了一个包含多个饼图数据的数组pieData，然后创建了一个echarts实例chart，并设置好基本配置。接着定义了一个updateChart函数，用于更新饼图数据和option配置。最后使用setInterval()函数每隔3秒调用一次updateChart函数，实现饼图轮播的效果。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值