您的位置:

echarts柱状图渐变色详解

一、设计理念

echarts是一款开源的,基于Javascript的可视化界面库,用于在Web页面中炫酷的呈现数据。和大多数js图表库不同的是,echarts将图形和数据分离,将数据和图形传递给图形组件,使用option设置组件的各种属性、数据和交互事件。echarts主要包括直观的数据管理、主题可配置、快速绘制及海量数据展示等功能。在数据展示方面,通过柱状图、折线图、散点图、饼状图、地图等多种图表,可满足各种复杂数据展示方案。

关于柱状图渐变色的设计理念,设计师们的灵感来源于色彩的变化和变幻,它的设计思路就是渐变色,将色彩渐变过程当成柱状图的高度与数据的关系,通过饱和度和亮度变化,表现出不同的数据层次感。

二、基础柱状图

首先我们需要通过option设置series中的data数据,data是一个数组,在数组中包含多个对象,在对象中设置name和value属性。


option = {
  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'
  }]
};

以上代码显示的柱状图是一种基础形式,仅仅展现了数据和柱形的关系,而没有任何装饰和美化。下面,我们将在基础柱状图的基础上,实现各种渐变色效果。

三、单一渐变色

单一渐变色简单易实现,仅需要设置color属性为渐变色即可。在series的data属性中,加入color属性,如下所示:


option = {
  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',
    color: new echarts.graphic.LinearGradient(
      0, 0, 0, 1,
      [
        { offset: 0, color: '#00ffe0' },
        { offset: 1, color: '#007fd6' }
      ]
    )
  }]
};

其中,color属性的值为一个echarts.graphic.LinearGradient类型的渐变对象,它接收四个参数,分别表示渐变的方向和起始终止坐标,最后一个参数是数组,表示在该渐变坐标系内,渐变的色值可以设多个颜色值,做出更复杂的渐变效果。

四、多重混合色

多重混合色是将多个颜色和谐混合在一起,呈现出一种新的颜色感觉。通过echarts.graphic.LinearGradient接收的color数组,我们可以设置多个颜色值,如下代码:


option = {
  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',
    color: new echarts.graphic.LinearGradient(
      0, 0, 0, 1,
      [
        { offset: 0, color: '#d70934' },
        { offset: 0.1, color: '#e8336b' },
        { offset: 0.3, color: '#f6c8a1' },
        { offset: 0.6, color: '#cab3e9' },
        { offset: 1, color: '#8c7ae6' }
      ]
    )
  }]
};

在颜色对象中,通过offset属性设置不同的色值渐变区段,使得颜色更加和谐。

五、动态渐变色

动态渐变色是一种流动的渐变感,柱形的高度跟随渐变的颜色依次变化,呈现出一种时尚 stylish 的效果。这个效果的实现,需要有随着柱状图的高度逐渐变化的渐变色。


option = {
  xAxis: {
    type: 'value',
    max: 100,
    min: 0
  },
  yAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  series: [{
    name: '销量',
    type: 'bar',
    data: [46, 50, 24, 18, 64, 80, 55],
    itemStyle: {
      normal: {
        color: function(params) {
          var colorList = [
            [
              '#E8B0D6',
              '#ffa750'
            ],
            [
              '#C6C8F3',
              '#F4E8C1'
            ],
            [
              '#97B5F1',
              '#FEC074'
            ],
            [
              '#V94F87',
              '#E32F46'
            ],
            [
              '#00c2ff',
              '#ffb30f'
            ],
            [
              '#AEE0FB',
              '#FF9F7F'
            ],
            [
              '#74ABE2',
              '#EFE994'
            ]
          ];
          var index = params.dataIndex;
          if (params.type == 'bar') {
            return {
              type: 'linear',
              colorStops: [{
                offset: 0,
                color: colorList[index][0]
              }, {
                offset: 1,
                color: colorList[index][1]
              }]
            }
          }
        }
      }
    }
  }]
};

对比上面的代码,可以看到,我们通过设置itemStyle的normal属性为动态渐变色,color属性接收了一个匿名函数,该函数接受params,返回一个类型为‘linear’渐变对象,渐变对象中,通过colorStops数组,设置渐变的色值区间。

六、反向渐变色

反向渐变色与单一渐变色的实现类似,只需颜色设置相反即可。


option = {
  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',
    color: new echarts.graphic.LinearGradient(
      0, 0, 0, 1,
      [
        { offset: 0, color: '#007fd6' },
        { offset: 1, color: '#00ffe0' }
      ]
    )
  }]
};

从横向对比角度看,反向渐变色的柱形图和单一渐变色的柱形图相比,显得更加突出。

七、总结

以上就是对于echarts柱状图渐变色的详细讲解,通过单一渐变色、多重混合色、动态渐变色和反向渐变色等多种方案,实现了不同风格的图表色彩更加突出,展示数据更加生动的效果。在实际开发中,可以根据不同的需求选择相应的渐变方案,来呈现出更加优美、丰富、时尚的数据图表。