echarts自定义柱状图，柱不同颜色，数值右侧显示等问题

须达到的效果图：

效果图.png

1、左侧颜色渐变
2、各自柱体为不同颜色
3、右侧数字紧贴柱体

data中自定义

在data中添加如下代码：

{
            //第一个柱体
                value: 60,
                itemStyle: {
                  barBorderRadius: 0,
                  normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                      {
                        offset: 0,
                        color: "rgba(0,0,0,0)" // 0% 处的颜色
                      },
                      {
                        offset: 1,
                        color: "yellow" // 100% 处的颜色
                      }
                    ])
                  }
                }
              },
              {
            //第二个柱体
                value: 45,
                itemStyle: {
                  barBorderRadius: 0,
                  normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                      {
                        offset: 0,
                        color: "rgba(0,0,0,0)" // 0% 处的颜色
                      },
                      {
                        offset: 1,
                        color: "pink" // 100% 处的颜色
                      }
                    ])
                  }
                }
              },

修改数字位置在series中加一个与data平齐的label：

image.png

label代码如下：

label: {
              show: true, //开启显示
              position: "right", //在上方显示
              textStyle: {
                //数值样式
                color: "#fff",
                fontSize: 12
              }
            },