🏆本文收录于《CSDN问答解惑-专业版》专栏，主要记录项目实战过程中的Bug之前因后果及提供真实有效的解决方案，希望能够助你一臂之力，帮你早日登顶实现财富自由🚀；同时，欢迎大家关注&&收藏&&订阅！持续更新中，up！up！up！！

问题描述

  为什么echarts极坐标柱形图的图形显示的特别小呢

为什么echarts极坐标柱形图的图形显示的特别小呢，改什么都没用
如果只给series的data传一组数据的话图形大小就是正常的，但是我想要legengd图例分别显示出来，只能给series多组数据
假如给data传包含所有数据对象数组 ，大小就是正常的，但是就无法达到我想要的分别显示华东华北等legend图例的效果


这是props.data.abnormals里的数据

这是出问题的数据

const getSeriesData = () => {// const series:any|[] = []const series = JSON.parse(JSON.stringify(props.data.abnormals)).map((item: any) => {return {type: 'bar',name: item.name,data: [{value:item.value}],coordinateSystem: 'polar', // 使用极坐标}})  return series
}const options = {polar: {radius: '100%'},angleAxis: {// 设置角度最大值为数据最大值的两倍，即可实现半圆效果max: '1000',startAngle: 90, // 圆弧起始角度// axisTick: {//   show: false // 隐藏坐标轴刻度// },// axisLine: {//   show: false // 隐藏坐标轴轴线// },// splitLine: {//   show: false // 隐藏区域分隔线// },// axisLabel: {//   show: false // 隐藏坐标轴刻度标签// },clockwise: false},radiusAxis: {type: 'category',min:'200',// 是否显示坐标轴刻度axisTick: {show: false},// 是否显示坐标轴轴线。axisLine: {show: false},// 是否显示刻度标签。axisLabel: {show: false,// overflow: 'truncate', // 截断，并在末尾显示ellipsis配置的文本，默认为...// interval: 0, // 不重叠展示完整标签// margin: -40,// color: '#9eb1c8'},data: props.data.abnormals.map((item: any) => {return item.name})},tooltip: {show: true,trigger: 'item',formatter: '{b}:{c}'},grid: {top: 0,right: 0,bottom: 0,left: 0,// 把标签包含进去containLabel: true},legend: {show: true,// 图例色块icon: 'circle',// 位置top: '14%',left: '60%',// 展示数据data: props.data.abnormals.map((item: any) => {return item.name}),// // 总宽度（一列）width: 5,// // 每个色块的宽itemWidth: 10,// // 每个色块的高度itemHeight: 10,// // item 间距itemGap: 5,// 展示内容formatter: function (name: any) {return '{title|' + name + '}'},// 字体配置textStyle: {rich: {title: {fontSize: 12,lineHeight: 1,color: '#fff'}}}},series:getSeriesData()

友情提示：
  如上问题有的来自我自身项目开发，有的收集网站，有的来自读者…如有侵权，立马删除。再者，针对此专栏中部分问题及其问题的解答思路或步骤等，存在少部分搜集于全网社区及人工智能问答等渠道，若最后实在是没能帮助到你，还望见谅！并非所有的解答都能解决每个人的问题，在此希望屏幕前的你能够给予宝贵的理解，而不是立刻指责或者抱怨！如果你有更优解，那建议你出教程写方案，一同学习！共同进步。

解决方案

  如下是上述问题的解决方案，仅供参考：

  在 ECharts 中，极坐标柱形图的显示大小问题可能与数据的配置和图形的缩放有关。以下是一些可能的原因和解决方案：

1. 数据量和图形大小：

   • 当你只传一组数据时，图形显示正常，但当你传多组数据时，图形可能会变小。这可能是因为 ECharts 在处理多组数据时，自动调整了图形的缩放比例以适应所有数据。

2. 极坐标系的配置：

   • 你已经在 polar 配置中设置了 radius: '100%'，这确保了极坐标系的半径是全屏的。但是，如果数据点过多或过大，可能会导致图形显示过小。

3. 数据的配置：

   • 你使用了 JSON.parse(JSON.stringify(props.data.abnormals)) 来复制数据，这可能会导致某些属性丢失或格式不正确。确保数据复制正确且格式一致。

4. 图例的配置：

   • 你希望图例能够分别显示不同的数据系列，这需要确保 series 数组中的每个对象都正确配置了 name 和 data。

5. 图形的缩放：

   • 可以尝试调整 angleAxis 和 radiusAxis 的配置，特别是 max 和 min 值，来控制图形的缩放。

以下是一些建议和修改：

• 确保数据格式正确：

  const getSeriesData = () => {const series = props.data.abnormals.map((item) => {return {type: 'bar',name: item.name,data: [item.value],coordinateSystem: 'polar', // 使用极坐标}});return series;
  }
  

• 调整极坐标系的配置：

  const options = {polar: {radius: '80%' // 尝试调整半径百分比},angleAxis: {max: '1000',startAngle: 90,clockwise: false},radiusAxis: {type: 'category',min: '200',data: props.data.abnormals.map((item) => item.name)},tooltip: {show: true,trigger: 'item',formatter: '{b}:{c}'},grid: {top: 0,right: 0,bottom: 0,left: 0,containLabel: true},legend: {show: true,icon: 'circle',top: '14%',left: '60%',data: props.data.abnormals.map((item) => item.name),width: 5,itemWidth: 10,itemHeight: 10,itemGap: 5,formatter: function (name) {return '{title|' + name + '}'},textStyle: {rich: {title: {fontSize: 12,lineHeight: 1,color: '#fff'}}}},series: getSeriesData()
  }
  

• 调整图例的显示：

  • 确保图例的 data 属性与 series 数组中的 name 属性匹配。

• 调整图形的缩放：

  • 可以尝试调整 angleAxis 的 max 和 min 值，或者 radiusAxis 的 min 值，来控制图形的缩放。

通过这些调整，你应该能够更好地控制极坐标柱形图的显示大小和图例的显示效果。如果问题仍然存在，建议检查数据的具体值和格式，或者尝试使用其他图表类型或库来实现所需的效果。

  希望如上措施及解决方案能够帮到有需要的你。

  PS：如若遇到采纳如下方案还是未解决的同学，希望不要抱怨&&急躁，毕竟影响因素众多，我写出来也是希望能够尽最大努力帮助到同类似问题的小伙伴，即把你未解决或者产生新Bug黏贴在评论区，我们大家一起来努力，一起帮你看看，可以不咯。

  若有对当前Bug有与如下提供的方法不一致，有个不情之请，希望你能把你的新思路或新方法分享到评论区，一起学习，目的就是帮助更多所需要的同学，正所谓「赠人玫瑰，手留余香」。

☀️写在最后

  ok，以上就是我这期的Bug修复内容啦，如果还想查找更多解决方案，你可以看看我专门收集Bug及提供解决方案的专栏《CSDN问答解惑-专业版》，都是实战中碰到的Bug，希望对你有所帮助。到此，咱们下期拜拜。

码字不易，如果这篇文章对你有所帮助，帮忙给 bug菌 来个一键三连(关注、点赞、收藏) ，您的支持就是我坚持写作分享知识点传播技术的最大动力。

同时也推荐大家关注我的硬核公众号:「猿圈奇妙屋」 ；以第一手学习bug菌的首发干货，不仅能学习更多技术硬货，还可白嫖最新BAT大厂面试真题、4000G Pdf技术书籍、万份简历/PPT模板、技术文章Markdown文档等海量资料，你想要的我都有！

📣关于我

我是bug菌，CSDN | 掘金 | InfoQ | 51CTO | 华为云 | 阿里云 | 腾讯云 等社区博客专家，C站博客之星Top30，华为云2023年度十佳博主，掘金多年度人气作者Top40，掘金等各大社区平台签约作者，51CTO年度博主Top12，掘金/InfoQ/51CTO等社区优质创作者；全网粉丝合计 30w+；硬核微信公众号「猿圈奇妙屋」，欢迎你的加入！免费白嫖最新BAT互联网公司面试真题、4000G PDF电子书籍、简历模板等海量资料，你想要的我都有，关键是你不来拿哇。

---