antv/g2图表自定义tooltip展示

默认图
antv/g2图表自定义tooltip展示_第1张图片

效果图
antv/g2图表自定义tooltip展示_第2张图片

需要自定义tooltip标题以及根据是字段显示名称和数值

   chart
        .interval()
        .transform({ type: 'stackY' })
        .data(dataList)
        .encode('y', 'value')
        .encode('color', 'name')
        .tooltip({
          title: (d) =>'办理状态', //标题设置
        })
        .tooltip(
          (
            d, // 每一个数据项
            index, // 索引
            data, // 完整数据
            column, // 通道
          ) => ({
            name: `${d.name}`,
            value: `${column.y.value[index]}`,
          }),
        )

你可能感兴趣的:(可视化echarts,higncharts,前端)