echart 写一个大屏展示圆边渐变柱状图

效果如上图所示： 

              backgroundColor: "rgba(0,0,0,0)",
              tooltip: {
                show: true,
                formatter: activeName.value == "电" ?"{b}:{c}kWh":"{b}:{c}m³",
              },
              grid: {
                left: "5%",
                top: "-6%",
                right: "15%",
                bottom: "8%",
                containLabel: true,
              },

              xAxis: {
                type: "value",
                show: false,
                position: "top",
                axisTick: {
                  show: false,
                },
                axisLine: {
                  show: false,
                  lineStyle: {
                    color: "#fff",
                  },
                },
                splitLine: {
                  show: false,
                },
              },
              yAxis: [
                {
                  type: "category",
                  axisTick: {
                    show: false,
                    alignWithLabel: false,
                    length: 5,
                  },
                  splitLine: {
                    //网格线
                    show: false,
                  },
                  inverse: "true", //排序
                  axisLine: {
                    show: false,
                    lineStyle: {
                      color: "#fff",
                    },
                  },
                  data: [
                    activeName.value == "电"
                      ? allyongdianTop5[0].mingzi
                      : allyongshuiTop5[0].mingzi,
                    activeName.value == "电"
                      ? allyongdianTop5[1].mingzi
                      : allyongshuiTop5[1].mingzi,
                    activeName.value == "电"
                      ? allyongdianTop5[2].mingzi
                      : allyongshuiTop5[2].mingzi,
                    activeName.value == "电"
                      ? allyongdianTop5[3].mingzi
                      : allyongshuiTop5[3].mingzi,
                    activeName.value == "电"
                      ? allyongdianTop5[4].mingzi
                      : allyongshuiTop5[4].mingzi,
                  ],

                  // y轴坐标字体颜色以及大小
                  axisLabel: {
                    fontSize: 14,
                    textStyle: {
                      color: function (params, Index) {
                        // 标签国家字体颜色
                        var colorarrays = [
                          "#71A7FA",
                          "#41DDC7",
                          "#C96016",
                          "#71FA96",
                          "#6688D8",
                        ];
                        return colorarrays[Index];
                      },
                    },
                  },
                },
              ],
              series: [
                {
                  type: "bar",
                  label: {
                    normal: {
                      show: true,
                      position: "right",
                      formatter: activeName.value == "电" ? "{c}kWh" : "{c}m³",
                      textStyle: {
                        color: "#fff",
                        fontSize: "10",
                      },
                    },
                  },
                  itemStyle: {
                    normal: {
                      show: true,
                      color: function (params) {
                        let num = colorArray.length;
                        return {
                          type: "linear",
                          colorStops: [
                            {
                              offset: 0,
                              color: colorArray[params.dataIndex % num].bottom,
                            },
                            {
                              offset: 1,
                              color: colorArray[params.dataIndex % num].top,
                            },
                          ],
                        };
                      },
                      barBorderRadius: 70,
                      borderWidth: 10,
                    },
                  },
                  barGap: "0%",
                  barCategoryGap: "60%",
                  data: [
                    activeName.value == "电"
                      ? allyongdianTop5[0].value
                      : allyongshuiTop5[0].value,
                    activeName.value == "电"
                      ? allyongdianTop5[1].value
                      : allyongshuiTop5[1].value,
                    activeName.value == "电"
                      ? allyongdianTop5[2].value
                      : allyongshuiTop5[2].value,
                    activeName.value == "电"
                      ? allyongdianTop5[3].value
                      : allyongshuiTop5[3].value,
                    activeName.value == "电"
                      ? allyongdianTop5[4].value
                      : allyongshuiTop5[4].value,
                  ],
                },
              ],