echarts chart gradient color + different color settings for each column

In the echarts histogram, all columns are the same color by default, and the display effect is unsatisfactory. This article introduces how to modify it to add different colors to each column, and how to add gradient colors to enrich the display of the chart. Let’s look at the effect first:

Each column has a different color 

 

 Each column has its own gradient color

1. Set different colors for the pillars

Method 1: The data attribute in the series is set to an object, and value represents the value. itemStyle.color can set different styles for each sub-item. The complete code:

import * as echarts from 'echarts';

var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;

option = {
  tooltip: {},
  legend: {},
  xAxis: {
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {},
  series: [
    {
      name: 'Sale',
      type: 'bar',
      data: [
        {
          value: 5,
          itemStyle: {
            color: '#FA897B'
          }
        },
        {
          value: 20,
          itemStyle: {
            color: '#D0E6A5'
          }
        },
        {
          value: 36,
          itemStyle: {
            color: '#4675C0'
          }
        },
        {
          value: 10,
          itemStyle: {
            color: '#86E3CE'
          }
        },
        {
          value: 10,
          itemStyle: {
            color: '#64A4D6'
          }
        },
        {
          value: 20,
          itemStyle: {
            color: '#bdc2e8'
          }
        },
        {
          value: 4,
          itemStyle: {
            color: '#FFA876'
          }
        }
      ]
    }
  ]
};

//5, 20, 36, 10, 10, 20, 4

option && myChart.setOption(option);

 

 

Method 2: There is an itemStyle attribute in the series, which supports the use of a callback function and returns a color string. The complete code:

import * as echarts from 'echarts';

var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;

option = {
  tooltip: {},
  legend: {},
  xAxis: {
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {},
  series: [
    {
      name: 'Sale',
      type: 'bar',
      data: [5, 20, 36, 10, 10, 20, 4],
      itemStyle: {
        normal: {
          color: function (params) {
            let colorList = [
              '#FA897B',
              '#FFDD94',
              '#D0E6A5',
              '#FFDD94',
              '#4675C0',
              '#B8BFD6',
              '#FFA876'
            ];
            let colorItem = colorList[params.dataIndex];
            return colorItem;
          }
        }
      }
    }
  ]
};

option && myChart.setOption(option);

  

2. Gradient color settings

There is still an itemStyle attribute in the series, which supports the use of callback functions and returns related objects using the gradient object that comes with echarts. Complete code:

import * as echarts from 'echarts';

var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;

option = {
  tooltip: {},
  legend: {},
  xAxis: {
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {},
  series: [
    {
      name: 'Sale',
      type: 'bar',
      data: [5, 20, 36, 10, 10, 20, 4],
      itemStyle: {
        normal: {
          color: function (params) {
            let colorList = [
              ['#FA897B', '#FFDD94'],
              ['#D0E6A5', '#FFDD94'],
              ['#4675C0', '#B8BFD6'],
              ['#86E3CE', '#CCABD8'],
              ['#64A4D6', '#C782C2'],
              ['#bdc2e8', '#e6dee9'],
              ['#FFA876', '#FF5B00']
            ];
            let colorItem = colorList[params.dataIndex];
            return new echarts.graphic.LinearGradient(0,0,0,1, //y->y2
              [
                {
                  offset: 0,
                  color: colorItem[0]
                },
                {
                  offset: 1,
                  color: colorItem[1]
                }
              ],
              false
            );
          }
        }
      }
    }
  ]
};

option && myChart.setOption(option);

The first four parameters in LinearGradient represent:

• x: from left to right 1 ——> 0
• y: from top to bottom 1 ——> 0
• x2: from right to left 1 ——> 0
• y2: from bottom to top 1 ——> 0

If you want the gradient of the left and right effects, then just modify x->x2

return new echarts.graphic.LinearGradient(0, 0, 1, 0, [{ // x->x2
                              offset: 0,
                              color: colorItem[0]
                          },
                          {
                              offset: 1,
                              color: colorItem[1]
                          }
                      ], false);