Echarts绘制的xy坐标系上显示每个点坐标值

若能给你带来帮助是我莫大的荣幸，与此同时，请你不要怜惜你的赞，你的鼓励是我坚持创作的动力。

Echarts的官网没有在坐标系上显示点的坐标值的demo，所以我对这个需求的实现进行一些探索

原来的样子（客户需求是，要将这些直线上标出来的点的坐标也要显示出来）

最终效果

还是不得不说echarts结构设计中的低耦合考虑得很好，通过一个fomatter方法，用户可以自定义显示内容

上面的实现我的方法是在option中的series填了对label的处理，具体代码如下

   series: [{
            type: 'line',
            data: [],
            label: {
        
                formatter: function (params, ticket, callback) {
                    // 这里应该可以直接用一个变量即可，不需要用一个数组，因为通过debug可以发现，echarts是一个点调用一次formatter方法，params的内容是一对x、y的值，而不是所有的x、y的值
                    y_values = []
                    x_values = []
                    x_values.push(params.value[0])
                    value = params.value[1]
                    // 由于y坐标轴内容已经变化，非原来的数据，所以这边也要做相应转换才能得到与坐标轴对应的显示内容
                    if (value === 1 / 16) {
                        y_values.push('Q/16')
                    } else if (value === 1 / 8) {
                        y_values.push('Q/8')
                    } else if (value === 1 / 4) {
                        y_values.push('Q/4')
                    } else if (value === 3 / 8) {
                        y_values.push('3Q/8')
                    } else if (value === 1 / 2) {
                        y_values.push('Q/2')
                    } else if (value === 5 / 8) {
                        y_values.push('5Q/8')
                    } else if (value === 6 / 8) {
                        y_values.push('3Q/4')
                    } else if (value === 7 / 8) {
                        y_values.push('7Q/8')
                    } else if (value === 1) {
                        y_values.push('Q')
                    }
                    return "(" + x_values + ',' +  y_values+ ")"
                },
                fontSize: 16,
                fontWeight: 'bolder',
                offset: [30, 40],
                show: true
            },
            type: 'line',
            //点的大小
            symbolSize: 16,
            //数据点 以实心圆点展示
            symbol:'circle'
        }]

有关Echarts的内容，我也是处于入门阶段，有什么问题，可以多多交流！