柱状圆柱图

 option: {

        tooltip: {

          trigger: 'axis',

          confine: true,

          axisPointer: { type: 'none' },

          textStyle: {

            fontSize: 12, fontWeight: 500,

          },

          formatter (params) {

            // 只展示柱子对应的内容，把顶部底部的 tooltip 过滤掉

            return params.reduce((pre, i) => {

              if (i.componentSubType === 'bar') {

                i.marker = i.marker.replace(/\[object Object\]/, i.color.colorStops[1].color);

                i.value = `<span style="flex: 1; text-align: right; margin-left: 16px;">${i.value}</span>`;

                const current = `<div style="display: flex; align-items: center; height: 26px;">${i.marker}${i.axisValue}${i.value}</div>`;

                return `${pre}${current}`;

              }

              return pre;

            }, '');

          },

        },

        textStyle: {

          fontSize: 11,

          color: '#ffffff'

        },

        grid: { left: '3%', right: '4%', bottom: '5%', containLabel: true },

        xAxis: {

          type: 'category',

          color: '#fff',

          data:[1111,11111,11111,13213]

          axisLine: { lineStyle: { color: '#F2F4F7' } },

          axisTick: { show: false },

          axisLabel: {

            interval: 0,

            rotate: 40,

            color: '#fff'

          },

        },

        yAxis: {

          splitLine: {

            lineStyle: {

              color: 'rgba(255, 255, 255, .1)'

            }

          },

        },

        series: [

          {

           

            type: 'bar',

            barWidth: 24,

            barCategoryGap: 12,

            data: ['56.1131', '23.6478', '56.1131', '23.6478', '23.6478', '56.1131', '23.6478', '23.6478', '56.1131', '23.6478', '23.6478', '56.1131', '23.6478', '23.6478'],

            itemStyle: {

              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [

                {

                  offset: 0,

                  color: '#057BAE',

                },

                {

                  offset: 1,

                  color: '#58F0F5',

                },

              ])

            },

          },

          {

            

            type: 'pictorialBar',

            symbolSize: [24, 6],

            symbolOffset: [0, -5],

            z: 18,

            itemStyle: { color: '#58F0F5' },

            symbolPosition: 'end',

            data: ['56.1131', '23.6478', '56.1131', '23.6478', '23.6478', '56.1131', '23.6478', '23.6478', '56.1131', '23.6478', '23.6478', '56.1131', '23.6478', '23.6478'],

          },

          {

            

            type: 'pictorialBar',

            symbolSize: [24, 6],

            symbolOffset: [0, 4],

            z: 12,

            itemStyle: { color: '#58F0F5' },

            symbolPosition: 'start',

            data: ['56.1131', '23.6478', '56.1131', '23.6478', '23.6478', '56.1131', '23.6478', '23.6478', '56.1131', '23.6478', '23.6478', '56.1131', '23.6478', '23.6478'],

          },

        ],

        // legend 对应的 color，实际上柱状图的颜色都是在 itemStyle 里定义的

        color: ['#C65FF9', '#FF704C', '#2872FC'],

      },