Echarts自定义系列类型添加滚动条

Question

我创建了一个自定义系列类型来在 Y 轴上显示标签。当标签很大时，文本会与主网格重叠。我需要剪辑重叠的文本，还需要提供滚动条来显示剩余的文本。请参阅下图以更好地理解我的问题。

options = {
  .......
  grid: {
    height: 250
  },
  yAxis: {
    axisTick: { show: false },
    splitLine: { show: false },
    axisLine: { show: false },
    axisLabel: { show: false },
    min: 0,
    max: this.labelData.length + 1,
  },
  series: [{
    type: 'custom',  // This is for rendering the main content (Gantt Chart)
    renderItem: this.renderGanttItemClosure(),
    itemStyle: {
      opacity: 0.8
    },
    encode: {
      x: [1, 2],
      y: 0,
    },
    data: this.data
  },
  {
    type: 'custom',  // This is for rendering the label
    renderItem: this.renderAxisLabelItem,
    itemStyle: {
      opacity: 0.8
    },
    encode: {
      x: -1,
      y: 0,
    },
    data: this.labelData,
  }]
};

function renderAxisLabelItem(params: any, api: any) {
  var categoryLevel = api.value(0);
  var start = api.coord([0, categoryLevel]);
  var barHeight = api.size([0, 1])[1] * 0.6;
  var y = start[1];
  if (y < params.coordSys.y + 5) {
    return;
  }

  // M0,0 L0,150 L200,75 Z - Right arrow
  // M0,0 L75,200 L150,0 Z - Down arrow
  const labelItem = {
    type: 'group',
    position: [
      10,
      y
    ],
    children: [] as any[]
  };

  var isExpanded = api.value(3);
  const labelExpandIndicator = {
    type: 'path',
    shape: {
      d: isExpanded ? 'M0,0 L75,200 L150,0 Z' : 'M0,0 L0,150 L200,75 Z',
      x: 0,
      y: -5,
      width: 10,
      height: 10,
      layout: 'cover'
    },
    style: {
      fill: '#000'
    }
  };
  var hasChildren = api.value(2);
  if (hasChildren) {
    labelItem.children.push(labelExpandIndicator);
  }

  const hierarchyLevel = api.value(4);
  const labelText = {
    type: 'text',
    style: {
      x: 20 + (hierarchyLevel * 20),
      y: 7,
      text: api.value(1),
      textVerticalAlign: 'bottom',
      textAlign: 'left',
      textFill: '#000'
    }
  };
  labelItem.children.push(labelText);

  return labelItem;
}

演示代码

下面是完整的演示代码。只需将以下代码复制粘贴到 eCharts Editor

中

labelData = [{
    name: "Application A to B",
    value: [
        2,  // Category Level. Higher is on top.
        "Application A to Application B",  // Label Name
        true,  // Is there children
        true,  // Is expanded
        0  // Hierarchy level
    ]
}, {
    name: "Application B to Cosmos",
    value: [
        1,
        "Application B to Cosmos",
        false,
        false,
        1
    ]
}];
data = [{
    name: "Application A to B",
    value: [
        2,
        100,
        1000,
        1000
    ],
    itemStyle: {
        normal: {
            color: '#7b9ce1'
        }
    }
}, {
    name: "Application B processing",
    value: [
        1,
        200,
        700,
        500
    ],
    itemStyle: {
        normal: {
            color: '#bd6d6c'
        }
    }
}];
option = {
    title: {
        text: 'Dependency',
        left: 'center'
    },
    tooltip: {
        confine: true,
        formatter: function (params) {
            return params.marker + params.name + ': ' + params.value[3] + ' ms';
        }
    },
    dataZoom: [{
        type: 'slider',
        filterMode: 'weakFilter',
        showDataShadow: false,
        top: 360,
        labelFormatter: ''
    }, {
        type: 'inside',
        filterMode: 'weakFilter'
    },
    {
        type: 'slider',
        zoomLock: true,
        width: 10,
        right: 10,
        top: 70,
        bottom: 20,
        start: 95,
        end: 100,
        handleSize: 0,
        showDetail: false,
    }],
    grid: {
        height: 250
    },
    xAxis: {
        min: 100,
        scale: true,
        axisLabel: {
            formatter: function (val) {
                return val + ' ms';
            }
        }
    },
    yAxis: {
        axisTick: { show: false },
        splitLine: { show: false },
        axisLine: { show: false },
        axisLabel: { show: false },
        min: 0,
        max: labelData.length + 1,
    },
    series: [{
        type: 'custom',
        renderItem: renderGanttItem,
        itemStyle: {
            opacity: 0.8
        },
        encode: {
            x: [1, 2],
            y: 0,
        },
        data: this.data,
        zlevel: 10
    },
    {
        type: 'custom',
        renderItem: renderAxisLabelItem,
        itemStyle: {
            opacity: 0.8
        },
        encode: {
            x: -1,
            y: 0,
        },
        data: this.labelData,
        zlevel: 5
    }]
};
merge = {};
mergeData = {};


function renderAxisLabelItem(params, api) {
    var categoryLevel = api.value(0);
    var start = api.coord([0, categoryLevel]);
    var barHeight = api.size([0, 1])[1] * 0.6;
    var y = start[1];
    if (y < params.coordSys.y + 5) {
        return;
    }

    // M0,0 L0,150 L200,75 Z - Right arrow
    // M0,0 L75,200 L150,0 Z - Down arrow
    const labelItem = {
        type: 'group',
        position: [
            10,
            y
        ],
        children: []
    };

    var isExpanded = api.value(3);
    const labelExpandIndicator = {
        type: 'path',
        shape: {
            d: isExpanded ? 'M0,0 L75,200 L150,0 Z' : 'M0,0 L0,150 L200,75 Z',
            x: 0,
            y: -5,
            width: 10,
            height: 10,
            layout: 'cover'
        },
        style: {
            fill: '#000'
        }
    };
    var hasChildren = api.value(2);
    if (hasChildren) {
        labelItem.children.push(labelExpandIndicator);
    }

    const hierarchyLevel = api.value(4);
    const labelText = {
        type: 'text',
        style: {
            x: 20 + (hierarchyLevel * 20),
            y: 7,
            text: api.value(1),
            textVerticalAlign: 'bottom',
            textAlign: 'left',
            textFill: '#000'
        }
    };
    labelItem.children.push(labelText);

    return labelItem;
}


function renderGanttItem(params, api) {
    var categoryIndex = api.value(0);
    var start = api.coord([api.value(1), categoryIndex]);
    var end = api.coord([api.value(2), categoryIndex]);

    var coordSys = params.coordSys;

    var barLength = end[0] - start[0];
    // Get the heigth corresponds to length 1 on y axis.
    var barHeight = api.size([0, 1])[1] * 0.6;
    var x = start[0];
    var y = start[1] - barHeight / 2;

    var rectNormal = echarts.graphic.clipRectByRect({
        x: x, y: y, width: barLength, height: barHeight
    }, {
        x: params.coordSys.x,
        y: params.coordSys.y,
        width: params.coordSys.width,
        height: params.coordSys.height
    });

    return {
        type: 'group',
        children: [{
            type: 'rect',
            shape: rectNormal,
            style: api.style()
        }]
    };
}

Answer 1

获取标签的最大长度并计算一些填充值，如下所示，我为左侧指定了常量 200。

grid: {
        height: 250,
        left: 200 (Instead of constant 200, calculate your value)
    },