折线图+圆点拖拽echarts 折线配置项内容和展示

图展示通过拖拽修改...

      let listN = '温度';
let unit = '°C';
let xAxisData = ['30/01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '31/00']
let yAxisData = [20, 21, 20, 23, 26, 25, 26, 25, 28, 29, 30, 29, 28, 27, 26, 25, 24, 23, 23, 21, 20, 21, 22, 23]

option = {
    grid: {
        left: '10%',
        top: '30%',
        right: '10%',
        bottom: '30%'
    },
    tooltip: {
        triggerOn: 'none',
        formatter: function(params) {
            return 'X: ' + params.name + '<br>Y: ' + params.data;
        }
    },
    dataZoom: {
        bottom: '20%',
        end: 50
    },
    xAxis: {
        type: 'category',
        data: xAxisData
    },
    yAxis: {
        type: 'value',
        name: `${listN}${unit}`,
        nameGap: 35,
        splitLine: {
            lineStyle: {
                color: '#DBDBDB',
                type: 'dashed'
            }
        },
        axisLine: {
            show: false
        },
        axisTick: {
            show: false
        }
    },
    series: [{
        id: 'aaa',
        name: listN,
        type: 'line',
        color: '#EC5176',
        smooth: true,
        symbolSize: 10,
        areaStyle: {
            color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                    offset: 0,
                    color: 'rgba(235, 81, 118, 0.3)'
                }, {
                    offset: 1,
                    color: 'rgba(235, 81, 118,0)'
                }],
                globalCoord: false
            }
        },
        data: yAxisData
    }]
}

// 拖拽
setTimeout(function() {
    myChart.setOption({
        graphic: echarts.util.map(yAxisData, function(item, dataIndex) {
            let position = myChart.convertToPixel({ seriesIndex: 0 }, [dataIndex, item]);
            return {
                id: dataIndex,
                type: 'circle',
                position: position,
                shape: {
                    r: 5
                },
                invisible: true,
                draggable: true,
                ondrag: echarts.util.curry(onPointDragging, dataIndex),
                onmousemove: echarts.util.curry(showTooltip, dataIndex),
                onmouseout: echarts.util.curry(hideTooltip, dataIndex),
                ondragend: echarts.util.curry(onPointDragEnd, dataIndex),
                z: 100
            };
        })
    });
}, 0);
window.addEventListener('resize', updatePosition);
myChart.on('dataZoom', updatePosition);

function updatePosition() {
    myChart.setOption({
        graphic: echarts.util.map(yAxisData, function(item, dataIndex) {
            return {
                position: myChart.convertToPixel({ seriesIndex: 0 }, [dataIndex, item])
            };
        })
    });
}

function showTooltip(dataIndex) {
    myChart.dispatchAction({
        type: 'showTip',
        seriesIndex: 0,
        dataIndex: dataIndex
    });
}

function hideTooltip(dataIndex) {
    myChart.dispatchAction({
        type: 'hideTip'
    });
}

function onPointDragging(dataIndex, dx, dy) {
    yAxisData[dataIndex] = myChart.convertFromPixel({ seriesIndex: 0 }, this.position)[1];
    myChart.setOption({
        series: [{
            id: 'aaa',
            data: yAxisData
        }]
    });
}

function onPointDragEnd(dataIndex, dx, dy) {
    myChart.setOption({
        graphic: echarts.util.map(yAxisData, function(item, dataIndex) {
            return {
                id: dataIndex,
                position: myChart.convertToPixel({ seriesIndex: 0 }, [dataIndex, item])
            }
        })
    })
}