四种为 echarts 条形图柱子设置不同颜色的方法，总有一款适合你 |
您所在的位置：网站首页 › 柱状图显示不出颜色 › 四种为 echarts 条形图柱子设置不同颜色的方法，总有一款适合你 |
四种为 echarts 条形图柱子设置不同颜色的方法，总有一款适合你
|
直接在 data 中设置
可以在 series 的 data 数组中，为每个数据项指定一个对象，该对象除了包含 value 外，还可以包含一个 itemStyle 属性来指定颜色。比较常用，例如： series: [ { type: 'bar', data: [ { value: 100, itemStyle: { color: 'red' } }, { value: 200, itemStyle: { color: 'blue' } }, { value: 300, itemStyle: { color: 'green' } }, ], } ]效果图： 利用 itemStyle.color 属性的回调函数功能，根据数据项的索引或值来动态设置颜色。个人来说非常推荐这种写法，因为我们通常拿到的是后端的一组数据,代码简洁性和可复用性很高，例如： series: [ { type: 'bar', data: [100, 200, 300, 400], itemStyle: { color: function (params) { // 根据params的 const colorsMap = [ '#ff0000', '#00ff00', '#0000ff', '#ffff00'] return colorsMap[params.dataIndex]; } } } ]效果图： 官方文档 如果需要每个柱子有渐变色，可以在 itemStyle 中使用 color 属性设置渐变颜色，并且通过回调函数确保每个柱子的渐变色不同。例如： series: [ { type: "bar", data: [100, 200, 300], itemStyle: { color: function (params) { // 动态生成渐变色或者根据条件返回预设的渐变色 const gradientColors = [ { // 线性渐变，前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1， // 相当于在图形包围盒中的百分比 x: 0, y: 0, x2: 0, y2: 1, type: "linear", colorStops: [ { offset: 0, color: "red" }, { offset: 1, color: "blue" } ] }, { x: 1, y: 0, x2: 0, y2: 0, type: "linear", colorStops: [ { offset: 0, color: "red" }, { offset: 1, color: "blue" } ] }, // 径向渐变，前三个参数分别是圆心 x, y 和半径，取值同线性渐变 { type: "radial", x: 0.5, y: 0.5, r: 1, colorStops: [ { offset: 0, color: "red" // 0% 处的颜色 }, { offset: 1, color: "blue" // 100% 处的颜色 } ] } ]; return gradientColors[params.dataIndex]; } } } ]效果图：
这种一般是用在动态展示不同关键词的时候，比如说关键词云图(echarts-wordcloud)，首先是定义一个生成随机颜色的函数 const randomRGB = () => { const r = Math.floor(Math.random() * 255); const g = Math.floor(Math.random() * 255); const b = Math.floor(Math.random() * 255); return `rgb(${r},${g},${b})`; };使用的时候直接在 color 调用即可 // 例如 textStyle: { color: randomRGB; } //完整的series配置 series: [ { type: "wordCloud", sizeRange: [8, 46], rotationRange: [0, 0], gridSize: 0, layoutAnimation: true, textStyle: { color: randomColor }, emphasis: { testStyle: { fontWeight: "bold", color: "#ffffff" } }, data: props.data.datas } ];效果图：
综上所述，主要通过直接赋值、回调函数静态映射和回调函数动态生成（包括渐变色）这几种方式来设置不同柱子的不同颜色。具体采用哪种方法取决于需求的复杂度和个性化程度，我相信总有一款适合你。 最后，推荐一个前端实用的网站CSS 可视化，好多实用工具，就配色而言推荐一个他的配色方案 不同颜色。具体采用哪种方法取决于需求的复杂度和个性化程度，我相信总有一款适合你。 |
【本文地址】