立体柱状-带预警echarts pictorialBar配置项内容和展示

      xData = ['比率1', '比率2', '比率3'];
yData = [23.42, 12.3, 42.5];
yMaxData = [100, 100, 100];
yjNum = 20;
option = {
    backgroundColor: '#061326',
    grid: {
        top: '25%',
        left: '-5%',
        bottom: '5%',
        right: '5%',
        containLabel: true,
    },
    tooltip: {
        show: true,
    },
    animation: false,
    xAxis: [
        {
            type: 'category',
            data: xData,
            axisTick: {
                alignWithLabel: true,
            },
            nameTextStyle: {
                color: '#82b0ec',
            },
            axisLine: {
                show: false,
                lineStyle: {
                    color: '#82b0ec',
                },
            },
            axisLabel: {
                textStyle: {
                    color: '#fff',
                },
                margin: 30,
            },
        },
    ],
    yAxis: [
        {
            show: false,
            type: 'value',
            axisLabel: {
                textStyle: {
                    color: '#fff',
                },
            },
            splitLine: {
                lineStyle: {
                    color: '#0c2c5a',
                },
            },
            axisLine: {
                show: false,
            },
        },
    ],
    series: [
        {
            name: '顶',
            type: 'pictorialBar',
            symbolSize: [40, 10],
            symbolOffset: [0, -6],
            symbolPosition: 'end',
            z: 12,
            label: {
                normal: {
                    show: true,
                    position: 'top',
                    formatter: '{c}%',
                    fontSize: 15,
                    fontWeight: 'bold',
                    color: '#34DCFF',
                },
            },
            data: yData.map((item) => {
                return {
                    value: item,
                    itemStyle: {
                        color:
                            item < yjNum
                                ? '#f00'
                                : new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                      { offset: 1, color: 'rgba(31,208,242,1)' },
                                      { offset: 0, color: 'rgba(11,61,117,1)' },
                                  ]),
                    },
                    label:{
                        color:item < yjNum? '#f00':'#34DCFF'
                    }
                };
            }),
        },
        {
            name: '底圆',
            type: 'pictorialBar',
            symbolSize: [40, 10],
            symbolOffset: [0, 7],
            // "barWidth": "20",
            z: 12,
            data: yData.map((item) => {
                return {
                    value: item,
                    itemStyle: {
                        color: item < yjNum ? '#f00' : 'rgba(31,208,242,.8)',
                    },
                };
            }),
        },
        {
            name: '底环小',
            type: 'pictorialBar',
            symbolSize: [50, 15],
            symbolOffset: [0, 12],
            z: 10,
            data: yData.map((item) => {
                return {
                    value: item,
                    itemStyle: {
                        color: 'transparent',
                        borderType: 'solid',
                        borderWidth: 2,
                        borderColor: item < yjNum ? '#f00' : 'rgba(31,208,242,1)',
                    },
                };
            }),
        },
        {
            name: '底环大',
            type: 'pictorialBar',
            symbolSize: [70, 20],
            symbolOffset: [0, 18],
            z: 10,
            data: yData.map((item) => {
                return {
                    value: item,
                    itemStyle: {
                        color: 'transparent',
                        borderType: 'solid',
                        borderWidth: 2,
                        borderColor: item < yjNum ? '#f00' : 'rgba(31,208,242,1)',
                    },
                };
            }),
        },
        {
            name: '柱状',
            type: 'bar',
            //silent: true,
            barWidth: '40',
            barGap: '10%', // Make series be overlap
            barCateGoryGap: '10%',
            data: yData.map((item) => {
                return {
                    value: item,
                    itemStyle: {
                        color:
                            item < yjNum
                                ? '#f00'
                                : new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                                      {
                                          offset: 0,
                                          color: 'rgba(20,105,184,0.89)',
                                      },
                                      {
                                          offset: 0.25,
                                          color: 'rgba(37,205,238,0.89)',
                                      },
                                      {
                                          offset: 0.5,
                                          color: 'rgba(34,102,215,0.89)',
                                      },
                                      {
                                          offset: 0.75,
                                          color: 'rgba(65,189,241,0.89)',
                                      },
                                      {
                                          offset: 1,
                                          color: 'rgba(25,116,221,0.89)',
                                      },
                                  ]),
                        opacity: 0.8,
                    },
                };
            }),
        },
        {
            name: '柱状背景',
            type: 'bar',
            //silent: true,
            barWidth: '40',
            barGap: '-100%', // Make series be overlap
            barCateGoryGap: '10%',
            itemStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                        {
                            offset: 0,
                            color: 'rgba(20,105,184,0.89)',
                        },
                        {
                            offset: 0.5,
                            color: 'transparent',
                        },

                        {
                            offset: 1,
                            color: 'rgba(25,116,221,0.89)',
                        },
                    ]),
                    opacity: 0.8,
                },
            },
            data: yMaxData.map((item, i) => {
                return {
                    value: item,
                    itemStyle: {
                        color:
                            yData[i] < yjNum
                                ? new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                                      {
                                          offset: 0,
                                          color: '#f00',
                                      },
                                      {
                                          offset: 0.5,
                                          color: 'transparent',
                                      },

                                      {
                                          offset: 1,
                                          color: '#f00',
                                      },
                                  ])
                                : new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                                      {
                                          offset: 0,
                                          color: 'rgba(20,105,184,0.89)',
                                      },
                                      {
                                          offset: 0.5,
                                          color: 'transparent',
                                      },

                                      {
                                          offset: 1,
                                          color: 'rgba(25,116,221,0.89)',
                                      },
                                  ]),
                        opacity: 0.8,
                    },
                };
            }),
        },
        {
            name: '柱状背景顶',
            type: 'pictorialBar',
            symbolSize: [40, 10],
            symbolOffset: [0, -6],
            symbolPosition: 'end',
            z: 12,
            label: {
                show: false,
            },
            data: yMaxData.map((item, i) => {
                return {
                    value: item,
                    itemStyle: {
                        color:
                            yData[i] < yjNum
                                ? {
                                      type: 'radial',
                                      x: 0.5,
                                      y: 0.5,
                                      r: 0.5,
                                      colorStops: [
                                          {
                                              offset: 0,
                                              color: 'transparent',
                                          },

                                          {
                                              offset: 1,
                                              color: '#f00',
                                          },
                                      ],
                                      global: false, // 缺省为 false
                                  }
                                : {
                                      type: 'radial',
                                      x: 0.5,
                                      y: 0.5,
                                      r: 0.5,
                                      colorStops: [
                                          {
                                              offset: 0,
                                              color: 'transparent',
                                          },

                                          {
                                              offset: 1,
                                              color: 'rgba(25,116,221,1)',
                                          },
                                      ],
                                      global: false, // 缺省为 false
                                  },
                    },
                };
            }),
        },
        {
            name: '柱状背景顶小',
            type: 'pictorialBar',
            symbolSize: [20, 5],
            symbolOffset: [0, -4],
            symbolPosition: 'end',
            z: 12,
            label: {
                show: false,
            },
            data: yMaxData.map((item, i) => {
                return {
                    value: item,
                    itemStyle: {
                        color:
                            yData[i] < yjNum
                                ? {
                                      type: 'radial',
                                      x: 0.5,
                                      y: 0.5,
                                      r: 0.5,
                                      colorStops: [
                                          {
                                              offset: 0,
                                              color: 'transparent',
                                          },

                                          {
                                              offset: 1,
                                              color: 'rgba(255,0,0,.5)',
                                          },
                                      ],
                                      global: false, // 缺省为 false
                                  }
                                : {
                                      type: 'radial',
                                      x: 0.5,
                                      y: 0.5,
                                      r: 0.5,
                                      colorStops: [
                                          {
                                              offset: 0,
                                              color: 'transparent',
                                          },

                                          {
                                              offset: 1,
                                              color: 'rgba(25,116,221,1)',
                                          },
                                      ],
                                      global: false, // 缺省为 false
                                  },
                    },
                };
            }),
        },
    ],
};