echarts 折线图，除了需要展示提示框以外，还需在tooltip对角线位置出现一个DOM提示框

ECharts是一款流行的JavaScript图表库，用于创建各种可视化图表，包括折线图。默认情况下，ECharts的Tooltip（提示框）会在鼠标悬停在数据点上时显示详细信息。如果你想在提示框对角线上添加额外的DOM提示框，这通常需要自定义ECharts的配置。

首先，你需要在初始化ECharts实例时设置`custom_tooltip`属性，这是一个可以自定义内容的对象。在这个对象中，你可以定义一个新的模板或者修改原生的提示框结构。例如：

option = {
    tooltip: {
        trigger: 'item',
        formatter: function (params) { // 这里是默认的提示格式
            return '<span style="color:red;">' + params.name + '</span>: <br/>' +
                   '<span style="display:block;margin-left:10px;">' +
                       params.seriesName + ': </span>' +
                       '<span style="color:#a4c639;">' + params.value + '</span>';
        },
        // 添加新的自定义提示区域
        extraContent: function(params) {
            let dom = document.createElement('div'); // 创建一个新的DOM元素
            dom.style.position = 'absolute';
            dom.style.top = '50%'; // 对角线位置可根据需求调整
            dom.style.left = '-50%'; // 另一边对齐
            dom.style.transform = 'translate(-50%, -50%)'; // 居中对角线
            dom.innerHTML = '更多详情'; // 或者动态生成内容
            return dom;
        }
    },
    series: ... // 折线图的配置
};

然后，在ECharts的实例化过程中，将这个选项传给`echarts.init()`方法：

var myChart = echarts.init(document.getElementById('main'), null, {
    tooltip: option.tooltip
});
myChart.setOption(option);

这样，当用户悬停在折线图的数据点上时，不仅能看到默认的提示信息，还会看到在对角线位置的DOM提示框。