前端 - 我需要绘制一个能够根据不同柱子的数值配置不同颜色的柱状图，请问应该如何实现？

Question

我需要绘制一个柱状图，每个柱子能够根据不同的数据得到不同的颜色。请问应该如何实现？

Answer 1

用echarts就可以实现，举个简单的例子

// 获取容器元素const container = document.getElementById("chartContainer");// 初始化图表const chart = echarts.init(container);// 定义柱子的数值和颜色const values = [10, 20, 30, 40, 50]; // 柱子的数值const colors = ["red", "green", "blue", "yellow", "orange"]; // 对应柱子的颜色// 配置图表const options = {  xAxis: {    type: "category",    data: ["A", "B", "C", "D", "E"], // 柱子的标签  },  yAxis: {    type: "value",  },  series: [    {      type: "bar",      data: values,      itemStyle: {        color: (params) => colors[params.dataIndex], // 使用颜色数组设置每个柱子的颜色      },    },  ],};// 渲染图表chart.setOption(options);

Answer 2

可以使用 VChart 中配置柱子样式的回调来根据数据内容自定义颜色。

代码示例：

const spec = {  type: 'bar',  data: [    {      id: 'barData',      values: [        { month: 'Monday', sales: 22 },        { month: 'Tuesday', sales: 13 },        { month: 'Wednesday', sales: 25 },        { month: 'Thursday', sales: 29 },        { month: 'Friday', sales: 38 }      ]    }  ],  xField: 'month',  yField: 'sales',  bar: {    style: {      fill: (datum) => {        return datum.sales > 25 ? 'red' : 'blue';      }    }  }};const vchart = new VChart(spec, { dom: CONTAINER_ID });vchart.renderAsync();// Just for the convenience of console debugging, DO NOT COPY!window['vchart'] = vchart;

可以把代码放在 vchart 官网任何一个 demo 的 playground 里试一下，非常方便。比如下面地址就可以：https://www.visactor.io/vchart/demo/bar-chart/basic-column

图表效果：

相关资源可参考：
github：https://github.com/VisActor/VChart
barChart style spec: https://www.visactor.io/vchart/option/barChart#bar.style.fill