Echarts在线免费图表

 
            const barWidth = 25;
// 柱子颜色
const barColor = ['#0B533D', '#0A4254' , '#145554', '#5C5924' ];
// 柱子背景颜色
const barShadowColor = ['#0B3F39', '#0A4254', '#1E4159', '#605D27'];
// 斜条纹颜色
const pictorialBarcolor = ['#81F0CB', '#0CE6EC', '#65D0FD', '#E9C12F'];
option = {
   backgroundColor: '#02263e',
   tooltip: {
      trigger: 'axis',
      axisPointer: {
         type: 'shadow'
      },
      backgroundColor: '#1B2C50',
      borderWidth: 0,
      padding: [12, 20, 12, 12],
      textStyle: {
        color: '#B8D7FF',
        fontSize: 14,
        align: 'left'
      },
      axisPointer: {
        shadowStyle: {
          color: 'rgba(30,63,106,0.50)'
        }
      },
      extraCssText: 'background: rgba(30,63,106,0.80);border-radius: 2px;'
   },
   grid: {
      left: 15,
      right: 15,
      bottom: 5,
      height: '85%',
      containLabel: true
   },
   legend: {
      show: false,
   },
   xAxis: [
      {
         axisTick: { show: false },
         axisLine: { show: false },
         axisLabel: {
            color: '#95BEDE',
            fontSize: 14,
            interval: 0
         },
         data: ['2019', '2020', '2021', '2022'] // 修改值
      },
      {
         type: 'category',
         show: true,
         axisLine: { show: false },
         axisTick: { show: false },
         axisLabel: {
            interval: 0,
            margin: 10,
            color: '#D7E9F8',
            fontSize: '14'
         },
         data: [12.32, 15.32, 18.32, 14.44] // 修改值
      }
   ],
   yAxis:  {
      name: '万元',
      nameLocation: 'end',
      nameTextStyle: {
        fontSize: 14,
        color: '#5C8CB2',
        align: 'right'
      },
      type: 'value',
      axisLine: {
        show: false
      },
      splitLine: {
        show: true,
        lineStyle: {
          type: 'solid',
          color: '#093E66'
        }
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        fontSize: 14,
        color: '#5C8CB2' 
      }
   }, 
   series: [
      {
         name: '税费',
         type: 'bar',
         itemStyle: {
            normal: {
               color: function (params) {
               return barShadowColor[params.dataIndex];
               }
            }
         },
         label: {
            show: true,
            position: 'top',
            distance: 0,
            formatter: function(data) {
               return [`{a${data.dataIndex}|}`]
            },
            rich: {
               a0: {
                  width: barWidth,
                  height: 2,
                  backgroundColor: '#81F0CB'
               },
               a1: {
                  width: barWidth,
                  height: 2,
                  backgroundColor: '#0CE6EC'
               },
               a2: {
                  width: barWidth,
                  height: 2,
                  backgroundColor: '#65D0FD'
               },
               a3: {
                  width: barWidth,
                  height: 2,
                  backgroundColor: '#FFD94E'
               }                
            }
         },
         barWidth: barWidth,
         data: [12.32, 15.32, 18.32, 14.44], // 修改值   
         z: 0,         
      },
      {
         // 分隔
         type: 'pictorialBar',
         tooltip: { show: false },  
         symbolRotate: '-45',
         itemStyle: {
            normal: {
               color: function (params) {
               return pictorialBarcolor[params.dataIndex];
               }
            }
         },
         symbolRepeat: 'fixed',
         symbolMargin: -8,
         symbol: 'rect',
         symbolClip: true,
         symbolSize: [2, 28],
         symbolPosition: 'start',
         symbolOffset: [-1, 10],
         data:  [12.32, 15.32, 18.32, 14.44], // 修改值   
         z: 66,
         animationEasing: 'elasticOut',
      },
      {
         name: '背景',
         type: 'bar',
         tooltip: { show: false },   
         barWidth: barWidth,
         barGap: '-100%',           
         data: [12.32, 15.32, 18.32, 14.44].map(v => 20), // 最大值
         itemStyle: {
            normal: {
               color:  function (params) {
               return barShadowColor[params.dataIndex];
               }
            }
         },
         z: -1
      }
   ]
};