Echarts进度条柱状图

1.效果

• x轴的坐标是写的html和css样式不是echarts
• y轴可以根据数据动态变化

2.代码

export function Progress(){
  return {
    tooltip: {},
    yAxis: {
        max: 2000,
        splitLine: {
            show: false
        },
        offset: 10,
        axisTick: {
            show: false
        },
       
        axisLine: {
            show: false
        },
        axisLabel: {
            show: false
        }
    },
    xAxis: [{
        type: "category",
        inverse: false,
        position: 'top',
        axisLine: {
            show: false
        },
        axisTick: {
            show: false
        },
        axisLabel: {
            show: false
        }
    }, ],
    grid: {
        top: '30%',
        left: '1%',
        // right: 100
        bottom:'3%'
    },
    series: [
        {
            // current data
            type: 'pictorialBar',
            symbol: 'rect',
            symbolRepeat: 'fixed',
            symbolMargin: '30%',//缝隙
            symbolClip: true,
            symbolSize: [40, 5],//图形宽度
            symbolBoundingData: 2000,
            label: {
                normal: {
                    show: true,
                    position: 'top',
                    offset: [0, 0],
                    textStyle: {
                        color: '#fff',
                        fontSize: 28
                    }
                }
            },
            data: [{
                    "value": 900,
                    'itemStyle': { //图形样式。
                      'normal': {
                        'color': {
                          // 'type': 'linear',
                          'x': 0,
                          'y': 0,
                          'x2': 1,
                          'y2': 1,
                          'colorStops': [{
                            'offset': 0,
                            'color':'#00f6ff'
                          }, {
                            'offset': 1,
                            'color':'#19abff'
                          }]
                        }
                      }
                    },
                },
                {
                    "value": 1820,
                    'itemStyle': { //图形样式。
                      'normal': {
                        'color': {
                          // 'type': 'linear',
                          'x': 0,
                          'y': 0,
                          'x2': 1,
                          'y2': 1,
                          'colorStops': [{
                            'offset': 0,
                            'color':'#82ff51'
                          }, {
                            'offset': 1,
                            'color':'#5be28e'
                          }]
                        }
                      }
                    },
                },
                {
                    "value": 1660,
                    'itemStyle': { //图形样式。
                      'normal': {
                        'color': {
                          // 'type': 'linear',
                          'x': 0,
                          'y': 0,
                          'x2': 1,
                          'y2': 1,
                          'colorStops': [{
                            'offset': 0,
                            'color':'#e785ff'
                          }, {
                            'offset': 1,
                            'color':'#a359ff'
                          }]
                        }
                      }
                    },
                }
               
            ],
            animationEasing: 'elasticOut',
            animationDelay: function(dataIndex, params) {
                return params.index * 30;
            }
        }, 
       
    ]
  }
}