生成器介绍

• • 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' }
          ])
        }
      }
    ]
  };