自定义图使用示例(仅供参考) ​

// 接口数据
        const res = {
            jsonData: [
                [0,50,97201,"0-50分钟"],
                [50,100,233992,"50-100分钟"],
                [100,150,311877,"100-150分钟"],
                [150,200,546575,"150-200分钟"],
                [200,250,591299,"200-250分钟"],
                [250,300,492462,"250-300分钟"]
            ]
        }
        // 预设的渐变样式 需要引入echarts
        const colorList = [
            new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: 'rgba(35, 213, 255, 0.8)' },
                { offset: 1, color: 'rgba(35, 213, 255, 0.2)' },
            ]),
            new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: 'rgba(36,153,255, 0.8)' },
                { offset: 1, color: 'rgba(36,153,255, 0.2)' },
            ]),
            new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: 'rgba(23, 242, 195, 0.8)' },
                { offset: 1, color: 'rgba(23, 242, 195, 0.2)' },
            ]),
            new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: 'rgba(67, 125, 255, 0.8)' },
                { offset: 1, color: 'rgba(67, 125, 255, 0.2)' },
            ]),
            new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: 'rgba(255, 240, 146, 0.8)' },
                { offset: 1, color: 'rgba(255, 240, 146, 0.2)' },
            ]),
            new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: 'rgba(254, 166, 53, 0.8)' },
                { offset: 1, color: 'rgba(254, 166, 53, 0.2)' },
            ]),
            new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: 'rgba(230, 81, 82, 0.8)' },
                { offset: 1, color: 'rgba(230, 81, 82, 0.2)' },
            ]),
        ];
        // 处理数据
        const json = res.jsonData.map((item, index) => {
            return {
              value: item,
              itemStyle: {
                color: colorList[index],
              },
            };
          });
        // 图表配置
        option = {
            title: {
              text: '',
              left: 'center',
            },
            tooltip: {
              trigger: 'axis',
              backgroundColor: 'rgba(29,30,121,0.70)',
              borderColor: 'rgba(29,30,121,0.70)',
              padding: 0,
              extraCssText: 'background: rgba(29,30,121,0.70)',
              formatter: function (params) {
                let html = ` <p style='background: #0C4D91;border-radius: 4px 4px 0 0; text-indent:9px;line-height: 30px;font-size: 16px; color: #FFFFFF;'>
              ${params[0].name}</p>`;
                params.forEach((item) => {
                  const color = item.color.colorStops ? item.color.colorStops[0].color : item.color;
                  html +=
                    '<p style="margin-left:9px;margin-right:9px;">' +
                    '<span style="display:inline-block;margin-right:4px;border-radius:50%;width:10px;height:10px;left:5px;background-color:' +
                    color +
                    '"></span>' +
                    '<span style="font-size: 16px; color: #23D5FF;">' +
                    item.name +
                    ' : </span>' +
                    '<span style="font-size: 16px; color: #ffffff;">从' +
                    item.value[0] +
                    '到' +
                    item.value[1] +
                    '分钟的处理的件数是' +
                    item.value[2] +
                    '件</span>' +
                    '</p>';
                });
                return html;
              },
            },
            xAxis: {
              scale: true,
              splitLine: {
                show: false,
              },
              axisTick: {
                show: false,
              },
              min: 0,
              // max: 100,
              interval: 50,
              axisLine: {
                show: true,
                lineStyle: {
                  color: '#979797',
                  type: 'solid',
                  width: 1,
                },
              },
              axisLabel: {
                interval: 0,
                color: '#bbbbbb',
                fontSize: 12,
              },
            },
            grid: {
              top: 60,
              bottom: 20,
              left: 80,
              right: 40,
            },
            yAxis: {
              name: '（单位：件）',
              nameTextStyle: {
                padding: [0, 0, 10, 0],
              },
              splitLine: {
                show: false,
              },
              axisTick: {
                show: false,
              },
              axisLine: {
                show: true,
                lineStyle: {
                  color: '#979797',
                  type: 'solid',
                  width: 1,
                },
              },
              axisLabel: {
                interval: 0,
                color: '#bbbbbb',
                fontSize: 12,
              },
            },
            series: [
              {
                type: 'custom',

                renderItem: function (params, api) {
                  console.log(params);
                  const yValue = api.value(2);
                  const start = api.coord([api.value(0), yValue]);
                  const size = api.size([api.value(1) - api.value(0), yValue]);
                  const style = api.style();
                  return {
                    type: 'rect',
                    shape: {
                      x: start[0],
                      y: start[1],
                      width: size[0],
                      height: size[1],
                    },
                    style: style,
                  };
                },
                label: {
                  show: true,
                  position: 'top',
                  color: '#ffffff',
                  fontWeight: 600,
                },
                dimensions: ['从', '到', '量数'],
                encode: {
                  x: [0, 1],
                  y: 2,
                  tooltip: [0, 1, 2],
                  itemName: 3,
                },
                data: json,
              },
            ],
        }