echarts立柱图

function rongmeiBars() {
  var myChart = echarts.init(document.getElementById('echartsBar'));
  var data = 53; //百分比
  var b = 28;
  var c = 26;
  var a = 26;
option = {
    backgroundColor: 'transparent',
    // tooltip: {
    //     trigger: 'item',
    //     backgroundColor: 'rgba(0,0,0,0.5)',
    //     borderColor: 'rgba(89,211,255,1)',
    //     borderWidth: 2,
    //     padding: 5,
    //     textStyle: {
    //         color: "rgba(89,211,255,1)",
    //         fontSize: 18,
    //         width: 300,
    //         height: 40,
    //     },
    //     formatter: '{c}' + '%',
    //     extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);'
    //     // 悬浮 自定义的 CSS 样式
    // },
    grid: {
        top: 30,
        left: 50,
        bottom: 40
    },
    xAxis: {
        data: ["已上报", "已受理", "已处理", "未处理"],
        axisTick: {
            show: false
        },
        axisLine: {
            show: false
        },
        axisLabel: {
            show: true,
            textStyle: {
                color: '#fff',
                fontSize: 16,
            },
             margin: 20, //刻度标签与轴线之间的距离。
        }
    },
    yAxis: {
        splitLine: {
            show: false
        },
        axisTick: {
            show: false
        },
        axisLine: {
            show: false
        },
        axisLabel: {
            show: false
        }
    },
    series: [
        // 头
        {
            name: "",
            type: "pictorialBar",
            symbolSize: [25, 8],
            symbolOffset: [0, -5],
            z: 12,
            itemStyle: {
              normal: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1,
                      [{
                              offset: 0,
                              color: "rgba(14,65,125)"
                          },
                          {
                              offset: 1,
                              color: "rgba(14,65,125)"
                          }
                      ],
                      false
                  ),
              }
            },
            data: [
                  {
                      name: "",
                      value: 100,
                      symbolPosition: "end",
                  },
                  {
                    name: "",
                    value: 100,
                    symbolPosition: "end",
          
                },
                {
                    name: "",
                    value: 100,
                    symbolPosition: "end",
                      
                },
                {
                  name: "",
                  value: 100,
                  symbolPosition: "end",
            
              },
    ]
      },
        //底部立体柱
        {
            name: "vvvv",
            stack: '1',
            type: 'bar',               
            silent: true,
            barWidth: 25,
            barGap: '-100%', // Make series be overlap
            data: [{
                      value: data,
                      itemStyle: {
                        normal: {
                            color: {
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                type: "linear",
                                global: false,
                                colorStops: [{ //第一节下面
                                    offset: 0,
                                    color: "rgba(233,220,50,0.8)"
                                }, {
                                    offset: 1,
                                    color: "#FF8002"
                                }]
                            }
                        }
                    },
                }, {
                      value: b,
                      itemStyle: {
                        normal: {
                            color: {
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                type: "linear",
                                global: false,
                                colorStops: [{ //第er节下面
                                    offset: 0,
                                    color: "rgba(20,211,213, 0.8)"
                                }, {
                                    offset: 1,
                                    color: "#022DFF"
                                }]
                            }
                        }
                    },
                }, {
                      value: c,
                      itemStyle: {
                        normal: {
                            color: {
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                type: "linear",
                                global: false,
                                colorStops: [{ //第3节下面
                                    offset: 0,
                                    color: "rgba(56,255,125,0.8)"
                                }, {
                                    offset: 1,
                                    color: "#1EBD29"
                                }]
                            }
                        }
                    },
                },{
                      value: a,
                      itemStyle: {
                        normal: {
                            color: {
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                type: "linear",
                                global: false,
                                colorStops: [{ //第4节下面
                                    offset: 0,
                                    color: "rgba(228,126,43,.8)"
                                }, {
                                    offset: 1,
                                    color: "#ED1816"
                                }]
                            }
                        }
                    },
            }],
        },
        //三个最低下的圆片
        // {
        //     name: "",
        //     type: "pictorialBar",
        //     symbolSize: [25, 12],
        //     symbolOffset: [0, -5],
        //     z: 12,
        //     itemStyle: {
        //             normal: {
        //                 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
        //                         offset: 0,
        //                         color: "rgba(89,211,255,1)"
        //                     },
        //                     {
        //                         offset: 1,
        //                         color: "rgba(23,237,194,1)"
        //                     }
        //                 ])
        //             }
        //         },
        //     data: [{
        //         name: "",
        //         value: "100",
        //         itemStyle: {
        //           normal: {
        //               color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
        //                       offset: 0,
        //                       color: "rgba(89,211,255,1)"
        //                   },
        //                   {
        //                       offset: 1,
        //                       color: "rgba(23,237,194,1)"
        //                   }
        //               ])
        //           }
        //       },
                
        //     }, {
        //         name: "",
        //         value: "100",
        //         itemStyle: {
        //           normal: {
        //               color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
        //                       offset: 0,
        //                       color: "rgba(89,211,255,1)"
        //                   },
        //                   {
        //                       offset: 1,
        //                       color: "rgba(23,237,194,1)"
        //                   }
        //               ])
        //           }
        //       },
           
        //     }, {
        //         name: "",
        //         value: "100",
        //         itemStyle: {
        //           normal: {
        //               color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
        //                       offset: 0,
        //                       color: "rgba(89,211,255,1)"
        //                   },
        //                   {
        //                       offset: 1,
        //                       color: "rgba(23,237,194,1)"
        //                   }
        //               ])
        //           }
        //       },
            
        //     }]
        // },
        // 中间圆片
        {
            name: "",
            type: "pictorialBar",
            symbolSize: [25, 12],
            symbolOffset: [0, -5],
            z: 12,
            data: [
              {
                name: "",
                value: data,
                symbolPosition: "end",
                itemStyle: {
                  normal: {
                      color: new echarts.graphic.LinearGradient(0, 0, 0, 1,
                          [{
                                  offset: 0,
                                  color: "rgba(233,220,50,0.8)"
                              },
                              {
                                  offset: 1,
                                  color: "#FF8002"
                              }
                          ],
                          false
                      ),
                  }
                },
               
              }, {
                name: "",
                value: b,
                symbolPosition: "end",
                itemStyle: {
                  normal: {
                      color: new echarts.graphic.LinearGradient(0, 0, 0, 1,
                          [{
                                  offset: 0,
                                  color: "rgba(20,211,213,0.8)"
                              },
                              {
                                  offset: 1,
                                  color: "#022DFF"
                              }
                          ],
                          false
                      ),
                  }
                },
             }, 
             {
                name: "",
                value: c,
                symbolPosition: "end",
                itemStyle: {
                  normal: {
                      color: new echarts.graphic.LinearGradient(0, 0, 0, 1,
                          [{
                                  offset: 0,
                                  color: "rgba(56,255,125,0.8)"
                              },
                              {
                                  offset: 1,
                                  color: "#1EBD29"
                              }
                          ],
                          false
                      ),
                  }
             },
               
          }, {
            name: "",
            value: a,
            symbolPosition: "end",
            itemStyle: {
              normal: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1,
                      [{
                              offset: 0,
                              color: "rgba(228,126,43,0.8)"
                          },
                          {
                              offset: 1,
                              color: "#ED1816"
                          }
                      ],
                      false
                  ),
              }
            },
          }]
        },
        //上部立体柱
        {
            //上部立体柱
            stack: '1',
            type: 'bar',
            itemStyle: {
                normal: {
                    color: 'RGB(6,13,71,.4)',
                }
            },
            label: {
                show: true,
                position: 'top', 
                distance: 8,
                color: "#fff",
                fontSize: 18,
                formatter: function(item){
                    let a=100
                    return a-item.value+'%'
                }
            },
            silent: true,
            barWidth: 150,
            barGap: '-100%', // Make series be overlap
            data: [{
                name: "a",
                value: 100 - data
            }, {
                name: "b",
                value: 100 - b
            }, {
                name: "c",
                value: 100 - c
            }, {
              name: "a",
              value: 100 - a
            }]
        },
        //底部圆圈
        {
          name: '第一圈',
          type: 'pictorialBar',
          symbolSize: [30, 10],
          symbolOffset: [0, 2],
          z: 0,
          itemStyle: {
            normal: {
              color: 'transparent',
              borderColor: "transparent",
              borderWidth: 2
            }
          },
          data: [{
                  name: "a",
                  value: 1,
                  itemStyle: {
                    normal: {
                      color: 'transparent',
                      borderColor: "#FF8002",
                      borderWidth: 4
                    }
                  },
              }, {
                  name: "b",
                  value: 1,
                  itemStyle: {
                    normal: {
                      color: 'transparent',
                      borderColor: "#022DFF",
                      borderWidth: 4
                    }
                  },
              }, {
                  name: "c",
                  value: 1,
                  itemStyle: {
                    normal: {
                      color: 'transparent',
                      borderColor: "#1EBD29",
                      borderWidth: 4
                    }
                  },
              },
              {
                name: "c",
                value: 1,
                itemStyle: {
                  normal: {
                    color: 'transparent',
                    borderColor: "#ED1816",
                    borderWidth: 4
                  }
                },
            }]
        },
        {
          name: '第二圈',
          type: 'pictorialBar',
          symbolSize: [28, 8],
          symbolOffset: [0, 0],
          z: 1,
          itemStyle: {
            normal: {
              color: 'transparent',
              borderColor: "transparent",
              borderWidth: 2
            }
          },
          data: [{
                  name: "a",
                  value: 1,
                  itemStyle: {
                    normal: {
                      color: 'transparent',
                      borderColor: "rgba(233,220,50,0.8)",
                      borderWidth: 0.5
                    }
                  },
              }, {
                  name: "b",
                  value: 1,
                  itemStyle: {
                    normal: {
                      color: 'transparent',
                      borderColor: "rgba(20,211,213, 0.8)",
                      borderWidth: 0.5
                    }
                  },
              }, {
                  name: "c",
                  value: 1,
                  itemStyle: {
                    normal: {
                      color: 'transparent',
                      borderColor: "rgba(56,255,125,0.8)",
                      borderWidth: 0.5
                    }
                  },
              },
              {
                name: "c",
                value: 1,
                itemStyle: {
                  normal: {
                    color: 'transparent',
                    borderColor: "rgba(228,126,43,.8)",
                    borderWidth: 0.5
                  }
                },
            }]

        },
        {
          name: '第三圈',
          type: 'pictorialBar',
          symbolSize: [45, 15],
          symbolOffset: [0, 4],
          z: 1,
          itemStyle: {
            normal: {
              color: 'transparent',
              borderColor: "transparent",
              borderWidth: 2
            }
          },
          data: [{
                  name: "a",
                  value: 1,
                  itemStyle: {
                    normal: {
                      color: 'transparent',
                      borderColor: "rgba(233,220,50,0.8)",
                      borderWidth: 0.5
                    }
                  },
              }, {
                  name: "b",
                  value: 1,
                  itemStyle: {
                    normal: {
                      color: 'transparent',
                      borderColor: "rgba(20,211,213, 0.8)",
                      borderWidth: 0.5
                    }
                  },
              }, {
                  name: "c",
                  value: 1,
                  itemStyle: {
                    normal: {
                      color: 'transparent',
                      borderColor: "rgba(56,255,125,0.8)",
                      borderWidth: 0.5
                    }
                  },
              },
              {
                name: "c",
                value: 1,
                itemStyle: {
                  normal: {
                    color: 'transparent',
                    borderColor: "rgba(228,126,43,.8)",
                    borderWidth: 0.5
                  }
                },
            }]

        }
    ]
};
    
 
  myChart.setOption(option)
}

![在这里插入图片描述](https://img-blog.csdnimg.cn/20210311094556700.png#pic_center)