Echarts渐变内置生成器

芋圆社区 > 编程 > Echarts > Echarts渐变内置生成器

227

2022-09-06

2022-10-13

Hey、小怪兽

生成器介绍

• Echarts渐变内置生成器基础形式如下，包含5个参数，其中abcd是渐变的方向，只输入01，arr输入一个数组

new echarts.graphic.LinearGradient(a,b,c,d,arr)

• 以柱状图为例，abcd所代表的的是：
- a为1代表arr中的颜色从右到左
- b为1代表arr中的颜色从下到上
- c为1代表arr中的颜色从左到右
- d为1代表arr中的颜色从上到下
• 可以去Echarts官网编辑器去试试：

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',
      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: '#ff0000' },
          { offset: 1, color: '#3333ff' }
        ])
      }
    }
  ]
};

• arr这个参数里面需要包含多个对象，对象格式为：

// offset取值0-1，color代表颜色
{ offset: x, color: xxx }

• arr里的对象可以多个，如果需要多种颜色的话：

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',
      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: '#ff0000' },
          { offset: 0.25, color: '#000033' },
          { offset: 0.5, color: '#00cc66' },
          { offset: 0.75, color: '#ffffff' },
          { offset: 1, color: '#3333ff' }
        ])
      }
    }
  ]
};

• 最简单的渐变柱状图在上面已经贴了代码，下面将介绍另外的2个渐变的例子：渐变折线图，渐变堆叠横向柱状图

渐变折线图

• 折线图和柱状图有些不同，只有一条线渐变看不出什么，所以希望渐变的是它的areaStyle
• 如果Echarts版本较低的话，可以在series里itemStyle-normal-areaStyle里写：

option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [150, 230, 224, 218, 135, 147, 260],
      type: 'line',
      itemStyle: {
        normal: {
          color: '#32A8FF',
          lineStyle: {
            color: '#32A8FF'
          },
          areaStyle: {
            type: 'default',
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: 'rgba(80,141,255,0.39)' },
              { offset: 0.5, color: 'rgba(56,155,255,0.25)' },
              { offset: 1, color: 'rgba(38,197,254,0)' }
            ])
          }
        }
      }
    }
  ]
};

• 怎么判断Echarts版本是不是低，当写好这个图表的时候，可以打开控制台，如果控制台报警告的话就说明要换写法了，如图解释：
• 它的意思是不要再用itemStyle.normal.xxx这样的写法了，4.0以后的版本normal已经被删除了，所有样式属性现在都直接在areaStyle中配置，这只是不推荐使用，要用还是可以
• 最新写法就是将lineStyle和areaStyle从itemStyle里拿出来，把normal删了，这样就不会报警告了：

option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [150, 230, 224, 218, 135, 147, 260],
      type: 'line',
      itemStyle: {
        color: '#32A8FF'
      },
      lineStyle: {
        color: '#32A8FF'
      },
      areaStyle: {
        type: 'default',
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: 'rgba(80,141,255,0.39)' },
          { offset: 0.34, color: 'rgba(80,141,255,0.25)' },
          { offset: 1, color: 'rgba(80,141,255,0.05)' }
        ])
      }
    }
  ]
};

渐变堆叠横向柱状图

• 像这样的堆叠横向柱状图要改成渐变注意两个点：
• 第一点就是abcd值，这是横向的柱状图所以选择的是让c成为1，颜色从左到右渐变

new echarts.graphic.LinearGradient(0,0,1,0,arr)

• 第二点就是不能简单地写arr的值，如果直接写渐变，如图显示，堆叠的柱体就会进行2段渐变，而不是从左到右1段渐变
• 这里就可以想到取个中间值，也就是深蓝色#3A6FFA和浅蓝色#08B0C6的中间值#5c83e6（随便去颜色表找一个就可以了）
• 用中间值替代第一个柱体的尾部offset为1的颜色和第二个柱体的头部offset为0的颜色：

option = {
  xAxis: {
    type: 'value'
  },
  yAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed']
  },
  series: [
    {
      type: 'bar',
      stack: 'total',
      barWidth: 50,
      data: [320, 302, 301],
      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
          { offset: 0, color: '#3A6FFA' },
          { offset: 1, color: '#5c83e6' }
        ])
      }
    },
    {
      type: 'bar',
      stack: 'total',
      data: [120, 132, 101],
      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
          { offset: 0, color: '#5c83e6' },
          { offset: 1, color: '#08B0C6' }
        ])
      }
    }
  ]
};

上一篇：Echarts常用修改总结

下一篇：多列柱状图重叠

Echarts渐变内置生成器

生成器介绍

渐变折线图

渐变堆叠横向柱状图

Comment

Message Board