Fix y position for axis pointer

[MrLiZ]

One-line summary [请问如何将十字准星的横轴固定在纵轴的某个点上，不随鼠标上下移动而移动？]

Version & Environment [版本及环境]

• ECharts version [ECharts 版本]:echarts4.0
• OS Version [操作系统类型和版本]:安卓7.1

Expected behaviour [期望结果]

十字线固定在Y轴某个点，不随鼠标上下移动

ECharts option [ECharts配置项]

option = {
    backgroundColor: '#fff',
        animation: false,
        legend: {
            bottom: 10,
            left: 'center',
            data: ['Dow-Jones index', 'MA5', 'MA10', 'MA20', 'MA30']
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross'
            },
            backgroundColor: 'rgba(245, 245, 245, 0.8)',
            borderWidth: 1,
            borderColor: '#ccc',
            padding: 10,
            textStyle: {
                color: '#000'
            },
            position: function (pos, params, el, elRect, size) {
                var obj = {top: 10};
                obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 30;
                return obj;
            }
            // extraCssText: 'width: 170px'
        },
        axisPointer: {
            link: {xAxisIndex: 'all'},
            label: {
                backgroundColor: '#777'
            }
        },
        toolbox: {
            feature: {
                dataZoom: {
                    yAxisIndex: false
                },
                brush: {
                    type: ['lineX', 'clear']
                }
            }
        },
        brush: {
            xAxisIndex: 'all',
            brushLink: 'all',
            outOfBrush: {
                colorAlpha: 0.1
            }
        },
        visualMap: {
            show: false,
            seriesIndex: 5,
            dimension: 2,
            pieces: [{
                value: 1,
                color: downColor
            }, {
                value: -1,
                color: upColor
            }]
        },
        grid: [
            {
                left: '10%',
                right: '8%',
                height: '50%'
            },
            {
                left: '10%',
                right: '8%',
                top: '63%',
                height: '16%'
            }
        ],
        xAxis: [
            {
                type: 'category',
                data: data.categoryData,
                scale: true,
                boundaryGap : false,
                axisLine: {onZero: false},
                splitLine: {show: false},
                splitNumber: 20,
                min: 'dataMin',
                max: 'dataMax',
                axisPointer: {
                    z: 100
                }
            },
            {
                type: 'category',
                gridIndex: 1,
                data: data.categoryData,
                scale: true,
                boundaryGap : false,
                axisLine: {onZero: false},
                axisTick: {show: false},
                splitLine: {show: false},
                axisLabel: {show: false},
                splitNumber: 20,
                min: 'dataMin',
                max: 'dataMax'
                // axisPointer: {
                //     label: {
                //         formatter: function (params) {
                //             var seriesValue = (params.seriesData[0] || {}).value;
                //             return params.value
                //             + (seriesValue != null
                //                 ? '\n' + echarts.format.addCommas(seriesValue)
                //                 : ''
                //             );
                //         }
                //     }
                // }
            }
        ],
        yAxis: [
            {
                scale: true,
                splitArea: {
                    show: true
                }
            },
            {
                scale: true,
                gridIndex: 1,
                splitNumber: 2,
                axisLabel: {show: false},
                axisLine: {show: false},
                axisTick: {show: false},
                splitLine: {show: false}
            }
        ],
        dataZoom: [
            {
                type: 'inside',
                xAxisIndex: [0, 1],
                start: 98,
                end: 100
            },
            {
                show: true,
                xAxisIndex: [0, 1],
                type: 'slider',
                top: '85%',
                start: 98,
                end: 100
            }
        ],
        series: [
            {
                name: 'Dow-Jones index',
                type: 'candlestick',
                data: data.values,
                itemStyle: {
                    normal: {
                        color: upColor,
                        color0: downColor,
                        borderColor: null,
                        borderColor0: null
                    }
                },
                tooltip: {
                    formatter: function (param) {
                        param = param[0];
                        return [
                            'Date: ' + param.name + '<hr size=1 style="margin: 3px 0">',
                            'Open: ' + param.data[0] + '<br/>',
                            'Close: ' + param.data[1] + '<br/>',
                            'Lowest: ' + param.data[2] + '<br/>',
                            'Highest: ' + param.data[3] + '<br/>'
                        ].join('');
                    }
                }
            },
            {
                name: 'MA5',
                type: 'line',
                data: calculateMA(5, data),
                smooth: true,
                lineStyle: {
                    normal: {opacity: 0.5}
                }
            },
            {
                name: 'MA10',
                type: 'line',
                data: calculateMA(10, data),
                smooth: true,
                lineStyle: {
                    normal: {opacity: 0.5}
                }
            },
            {
                name: 'MA20',
                type: 'line',
                data: calculateMA(20, data),
                smooth: true,
                lineStyle: {
                    normal: {opacity: 0.5}
                }
            },
            {
                name: 'MA30',
                type: 'line',
                data: calculateMA(30, data),
                smooth: true,
                lineStyle: {
                    normal: {opacity: 0.5}
                }
            },
            {
                name: 'Volume',
                type: 'bar',
                xAxisIndex: 1,
                yAxisIndex: 1,
                data: data.volumes
            }
        ]
}

[git-stf-01]

我也有这个需求。。顶一下

[Ovilia]

http://gallery.echartsjs.com/editor.html?c=xB1TbhGK2x 是这样吗？

[MrLiZ]

@Ovilia 不是这样，你这个没有十字线，只有x轴的，没有y轴的，我需要的是十字线对着Y轴的线不上下移动。

[Ovilia]

@MrLiZ 那 Y 方向上多高是由什么决定的？ 另外，具体描述下需求的使用场景？

[MrLiZ]

@Ovilia series的type，或者自定义值。比如如果是K线图，可以固定在收盘价，如果是line，可以固定在那个点，单纯的柱状图可能不需要，那就可配置不显示。最好可配置固定还是上下移动。可以参考这个的效果：https://gupiao.baidu.com/stock/sh000001.html?from=aladingpc 其实这个问题之前有人提过：https://github.com/ecomfe/echarts/issues/5229

[Ovilia]

@MrLiZ 好，我回头看下好不好实现

[MrLiZ]

@Ovilia 谢谢

[fanchaot]

想问一下 这个该怎么解决 同样的需求

[MrLiZ]

@fanchaot 好像还没有

[fanchaot]

@MrLiZ highcharts 这个可以实现

[MrLiZ]

@fanchaot 我知道highcharts可以，用过。但是highcharts很多功能都很难用，除非付费。所以最后改用echarts。

[git-stf-01]

坐等echarts更新该功能！

[MrLiZ]

@git-stf-01 知道啥时候会更新吗？

[git-stf-01]

不知道。。。 @Ovilia @pissang

[cklwblove]

这个问题怎样了？echarts 都发布4版本了

[git-stf-01]

@Ovilia @pissang 求更新这个功能啊。。。或者说有没有啥好办法可以做到呢。。

[Ovilia]

会高优支持一下这个需求。 关于这个 issue 的技术实现细节将在 https://lists.apache.org/thread.html/5485eeb1d094cf9d7f01d7d0abda20a72de734f0862987eea9c3259f@%3Cdev.echarts.apache.org%3E 讨论。

[longboy]

想问一下 这个该怎么解决 同样的需求。

[imasez]

9102年了,这个需求有人知道怎么实现吗

[mirszhao]

@Ovilia 麻烦问下这个问题新版本现在支持了吗，或者是否有其他方式可以实现

[HandsomeOrDie]

坐等这个feature

[Ovilia]

Sorry, this feature is delayed again to 4.6.0 because it's more complicated than I thought it to be. We need to consider situations with connected charts, and a comprehension list of test cases should be provided. Sorry for the delay again.

[mirszhao]

4.9的版本测试的 横线还是随着鼠标移动，该功能现在实现了吗@Ovilia

[Ovilia]

4.9的版本测试的 横线还是随着鼠标移动，该功能现在实现了吗@Ovilia

目前还没有，预计在一两月内支持。

[Justin-lu]

@Ovilia 5个月过去了