echarts [Feature] How to obtain the pixel point at the center of the highest point of each grouping column

qltillow 于 4个月前发布在 Echarts

关注(0)|答案(3)|浏览(42)

What problem does this feature solve?

我想要拿到每一个分组柱状图的最高点的中心点, 打算拿graphic实现现在拿不到每一组最高点的x,y的坐标像素点想要加标签

What does the proposed API look like?

option = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  legend: {},
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: [
    {
        "type": "category",
        "position": "bottom",
        "data": [
            "Alipay+",
            "",
            ""
        ],
        "axisLabel": {
            "color": "#ffffff",
            "fontSize": 12,
            "lineHeight": 16
        }
    },
    {
        "type": "category",
        "position": "bottom",
        "data": [
            "",
            "WF",
            ""
        ],
        "axisLabel": {
            "color": "#ffffff",
            "fontSize": 12,
            "lineHeight": 16
        }
    },
    {
        "type": "category",
        "position": "bottom",
        "data": [
            "",
            "",
            "HK Biz"
        ],
        "axisLabel": {
            "color": "#ffffff",
            "fontSize": 12,
            "lineHeight": 16
        }
    }
],
  yAxis: [
    {
      type: 'value'
    }
  ],
  series:[
    {
        "name": "USD",
        "type": "bar",
        "barWidth": 22,
        "xAxisIndex": 0,
        "data": [
            1000000000015.99
        ]
    },
    {
        "name": "USD",
        "type": "bar",
        "barWidth": 22,
        "xAxisIndex": 1,
        "data": [
            "",
            999999999999.99
        ]
    },
    {
        "name": "USD",
        "type": "bar",
        "barWidth": 22,
        "xAxisIndex": 2,
        "data": [
            "",
            "",
            999999999999.99
        ]
    },
    {
        "name": "EUR",
        "type": "bar",
        "barWidth": 22,
        "xAxisIndex": 0,
        "data": [
            1080699999999.91
        ]
    },
    {
        "name": "CNY",
        "type": "bar",
        "barWidth": 22,
        "xAxisIndex": 1,
        "data": [
            "",
            1408400000000
        ]
    },
    {
        "name": "CNY",
        "type": "bar",
        "barWidth": 22,
        "xAxisIndex": 2,
        "data": [
            "",
            "",
            1408400000000
        ]
    },
    {
        "name": "Others(US $)",
        "type": "bar",
        "barWidth": 22,
        "xAxisIndex": 1,
        "data": [
            "",
            2115000000000
        ]
    }
]
};

echarts

来源：https://github.com/apache/echarts/issues/19934

3条答案

按热度按时间

imzjd6km1#

尝试了convertToPixel方法拿不到返回为NaN

// 假设 myChart 是您的 ECharts 实例
// 您需要等待 chart 完成渲染
myChart.on('finished', function () {
    
    // 假设我们要获取第二个 X 轴（xAxisIndex: 1）第二个柱子（dataIndex: 1）的顶点坐标
    var xAxisIndex = 1;
    var dataIndex = 1;
    var series = myChart.getOption().series;
    var seriesUsingXAxisIndex = series.filter(function(serie) {
      return serie.xAxisIndex === xAxisIndex;
    });

    // 找到最高柱子顶部的像素坐标
    var highestBarPixelCoord = null;
    var highestYValue = 0;
    
    seriesUsingXAxisIndex.forEach(function(serie, index) {
        var barTopValue = serie.data[dataIndex];
        if(barTopValue > highestYValue) {
            highestYValue = barTopValue;
            // 柱子顶部的像素坐标
            highestBarPixelCoord = myChart.convertToPixel({
                seriesIndex: serie.seriesIndex  // 或者使用 seriesId
            }, [dataIndex, barTopValue]);
        }
    });

    if (highestBarPixelCoord) {
        console.log('Highest bar pixel coordinates:', highestBarPixelCoord);
    } else {
        console.error('Failed to convert data point to pixel coordinate');
    }
});

赞(0）回复(0）举报 4个月前

xzlaal3s2#

拿中心像素点放标签

赞(0）回复(0）举报 4个月前

ccrfmcuu3#

I tried this and can get the pixels position correctly:

myChart.convertToPixel(
    {
      seriesIndex: 0
    },
    ['Alipay+', 1000000000015.99]
  )

赞(0）回复(0）举报 4个月前

我来回答

echarts [Feature] How to obtain the pixel point at the center of the highest point of each grouping column

What problem does this feature solve?

What does the proposed API look like?

3条答案

相关问题

热门标签

最新问答