react中echarts柱状图变色

可以通过设置 ECharts 的 series.itemStyle.normal.color 属性来实现柱状图的变色。具体操作如下：

1. 在组件中引入 ECharts：

import echarts from 'echarts/lib/echarts';
import 'echarts/lib/chart/bar';
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/title';

2. 在组件中定义一个 ref，用于获取 ECharts 实例：

<div ref={this.chartRef} style={{ width: '100%', height: '400px' }}></div>

3. 在组件的 componentDidMount 生命周期中初始化 ECharts 实例，并设置柱状图的颜色：

componentDidMount() {
  const chart = echarts.init(this.chartRef.current);
  chart.setOption({
    xAxis: {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
      type: 'value'
    },
    series: [{
      data: [120, 200, 150, 80, 70, 110, 130],
      type: 'bar',
      itemStyle: {
        normal: {
          color: function(params) {
            // 设置柱状图颜色
            var colorList = ['#C1232B','#B5C334','#FCCE10','#E87C25','#27727B',
              '#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',
              '#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0'];
            return colorList[params.dataIndex];
          }
        }
      }
    }]
  });
}