有時(shí)候有一些稀奇古怪項(xiàng)目用了稀奇古怪的自研UI 二次封裝echarts 導(dǎo)致行內(nèi) new echarts 報(bào)錯(cuò)
設(shè)置漸變色可以這樣寫

 series: [
          {
            data: [3008, 9010, 262],
            type: 'bar',
            barWidth: '30px',
            color: {
              type: 'linear',
              // x=0,y=1,柱子的顏色在垂直方向漸變
              x: 0,
              y: 1,
              colorStops: [
                // 0%處的顏色
                {
                  offset: 0,
                  color: '#12c2e9'
                },
                // 50%處的顏色
                {
                  offset: 0.5,
                  color: '#c471ed'
                },
                // 100%處的顏色
                {
                  offset: 1,
                  color: '#f64f59'
                }
              ],
              global: false // 缺省為 false
            },
            itemStyle: {
              normal: {
                // 設(shè)置柱子的圓角
                barBorderRadius: [18, 18, 0, 0]
              }
            }
          }
        ]

縱向漸變

 series: [
          {
            data: [120, 200, 150, 80, 333],
            type: 'bar',
            barWidth: '10px',
            itemStyle: {
              // 柱狀圖的背景色
              normal: {
                // 每個(gè)柱子的顏色即為colorList數(shù)組里的每一項(xiàng),如果柱子數(shù)目多于colorList的長度，則柱子顏色循環(huán)使用該數(shù)組
                color: function (params) {
                  var index = params.dataIndex
                  var colorList = [
                    // 漸變顏色的色值和透明度
                    // 透明度從0
                    [
                      'rgba(15,235,255,0.3)',
                      'rgba(15,235,255,0.3)',
                      'rgba(15,235,255,0.3)',
                      'rgba(15,235,255,0.3)',
                      'rgba(15,235,255,0.3)',
                      'rgba(15,235,255,0.3)',
                      'rgba(15,235,255,0.3)',
                      'rgba(13,94,208,0.3)',
                      'rgba(255,155,15,0)',
                      'rgba(253,103,96,0.3)'
                    ], // 到透明度1 ,如果需要不同的顏色直接修改不同顏色即可
                    [
                      'rgba(15,235,255,0.6)',
                      'rgba(15,235,255,0.6)',
                      'rgba(15,235,255,0.6)',
                      'rgba(15,235,255,0.6)',
                      'rgba(15,235,255,0.6)',
                      'rgba(15,235,255,0.6)',
                      'rgba(15,235,255,0.6)',
                      'rgba(13,94,208,0.6)',
                      'rgba(255,155,15,0.6)',
                      'rgba(253,103,96,0.6)'
                    ]
                  ]
                  return {
                    colorStops: [
                      {
                        offset: 0.3, // 顏色的開始位置
                        color: colorList[0][index] // 0% 處的顏色
                      },
                      {
                        offset: 0.6, // 顏色的結(jié)束位置
                        color: colorList[1][index] // 100% 處的顏色
                      }
                    ]
                  }
                }
              }
            },
            showBackground: true,
            label: {
              show: true,
              position: 'right',
              valueAnimation: true
            }
          }
        ]