关于#前端#的问题：每个柱形图颜色不同且带图例

每个柱形图颜色不同且带图例，这个我试了很多遍，要么就是有柱状图无图例，要么就是有图例，但柱子都在第一个当中。

你去echarts里面找个这种类型 都有的 然后对比你的配置，肯定是你哪边写错了，正常不会出现这种情况的

以下内容部分参考ChatGPT模型：

---

可以通过设置每个柱子的颜色数组和图例数据，来实现每个柱形图颜色不同且带图例的效果。具体代码如下：

option = {
  legend: {
    data: ['柱子1', '柱子2', '柱子3']
  },
  color: ['#37A2DA', '#67E0E3', '#FFDB5C'], // 每个柱子的颜色数组
  xAxis: {
    type: 'category',
    data: ['一月', '二月', '三月', '四月', '五月', '六月']
  },
  yAxis: {
    type: 'value'
  },
  series: [{
    name: '柱子1',
    type: 'bar',
    data: [20, 30, 40, 50, 60, 70]
  }, {
    name: '柱子2',
    type: 'bar',
    data: [30, 40, 50, 60, 70, 80]
  }, {
    name: '柱子3',
    type: 'bar',
    data: [40, 50, 60, 70, 80, 90]
  }]
};

其中，通过设置legend属性的data数组来设置图例数据，color属性来设置每个柱子的颜色数组。具体每个柱子的颜色和名称通过series数组中的每个对象来设置。

---

如果我的建议对您有帮助、请点击采纳、祝您生活愉快

• 你可以参考下这个问题的回答, 看看是否对你有帮助, 链接: https://ask.csdn.net/questions/7555166
• 这篇博客你也可以参考下：设计一个程序，每秒统计一次当前系统的进程状况，并按照内存使用自多到少排序打印输出相关信息。
• 除此之外, 这篇博客: 【惊艳面试官】 | 如何回答一个数组去重问题，场景选择，优势比较中的 几种去重函数针对带有特殊类型的对比 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
  

• indexOf 与 Set 的一点说明：

  上面代码中console.log(NaN === NaN); // false, indexOf 底层使用的是 === 进行判断，所以使用 indexOf 查找不到 NaN 元素,NaN不能用===来判断，可以使用isNaN()

  // demo1
  var arr = [1, 2, NaN];
  arr.indexOf(NaN); // -1
  

  Set可以去重NaN类型， Set内部认为尽管 NaN === NaN 为 false，但是这两个元素是重复的。

  // demo2
  function distinct(array) {
     return Array.from(new Set(array));
  }
  console.log(unique([NaN, NaN])) // [NaN]
  

• 您还可以看一下 韦语洋（Lccee）老师的一机一码加密、被破解自动销毁随时授权回收升级系列视频课程课程中的 演示误报效果，一些被误报的特征的解除方式（重要）小节, 巩固相关知识点