折线图：拖动绘制echarts value配置项内容和展示

鼠标拖动绘制折线图

      var yValue;

var colors = ['#FF6347', '#28b283', '#1e90ff', '#FFB74D', '#AB47BC', '#00BCD4',
    '#26A69A', '#43A047', '#F06292', '#CDDC39', '#B2FF59'];


var xTime = ["00:15", "00:30", "00:45", "01:00", "01:15", "01:30", "01:45", "02:00", "02:15", "02:30", "02:45",
    "03:00", "03:15", "03:30", "03:45", "04:00", "04:15", "04:30", "04:45", "05:00", "05:15", "05:30",
    "05:45", "06:00", "06:15", "06:30", "06:45", "07:00", "07:15", "07:30", "07:45", "08:00", "08:15",
    "08:30", "08:45", "09:00", "09:15", "09:30", "09:45", "10:00", "10:15", "10:30", "10:45", "11:00",
    "11:15", "11:30", "11:45", "12:00", "12:15", "12:30", "12:45", "13:00", "13:15", "13:30", "13:45",
    "14:00", "14:15", "14:30", "14:45", "15:00", "15:15", "15:30", "15:45", "16:00", "16:15", "16:30",
    "16:45", "17:00", "17:15", "17:30", "17:45", "18:00", "18:15", "18:30", "18:45", "19:00", "19:15",
    "19:30", "19:45", "20:00", "20:15", "20:30", "20:45", "21:00", "21:15", "21:30", "21:45", "22:00",
    "22:15", "22:30", "22:45", "23:00", "23:15", "23:30", "23:45", "00:00"
];

var testData = ["2303.919189", "2298.294189", "2271.010742", "2269.136963", "2229.262695", "2193.777588", "2186.874756",
    "2214.519043", "2152.452148", "2120.546387", "2129.670166", "2115.335938", "2148.326172", "2059.723389",
    "2114.228516", "2058.182129", "2092.915527", "2123.392090", "2120.652588", "2077.362793", "2153.993652",
    "2146.980469", "2184.089111", "2196.852783", "2229.521973", "2232.976562", "2348.711182", "2385.382324",
    "2438.028076", "2503.221924", "2512.029053", "2585.123291", "2428.706299", "2517.018311", "2576.363037",
    "2529.282227", "2638.641113", "2554.374268", "2589.215820", "2633.936279", "2619.419678", "2667.637207",
    "2610.165771", "2584.413574", "2589.185547", "2642.727051", "2585.325928", "2541.016846", "2632.318359",
    "2594.940430", "2579.554199", "2601.381836", "2588.979248", "2571.882080", "2621.009766", "2584.821045",
    "2641.357910", "2657.470215", "2631.524414", "2704.409668", "2686.755371", "2715.500732", "2752.691406",
    "2832.326416", "2794.819336", "2915.458252", "2881.480957", "2920.371338", "2814.635254", "2864.710449",
    "2849.554932", "2880.986328", "3005.198730", "2993.877930", "2967.949219", "3043.469727", "3103.958008",
    "3118.357178", "3076.303467", "3241.974854", "3255.103760", "3189.283936", "3194.858154", "3150.529297",
    "3172.161133", "3097.908203", "3090.968262", "3037.488037", "2991.255615", "2963.332031", "2908.150391",
    "2828.677246", "2816.274414", "2733.020752", "2638.262939", "2597.798096"
];

var dragFlag = false;

document.onmousedown = function (ev) {
        dragFlag = true;
    };

    document.onmouseup = function (ev) {
        dragFlag = false;
    
    };

option = {
    title: {
        show: true,
        text: '',
        left: 'center',
        top: 10
    },
    tooltip: {
        trigger: 'axis',
        showContent: true,
        axisPointer: {
            type: 'cross',
            axis: 'x',
            label: {
                backgroundColor: '#283b56',
                formatter: function(params) {
                    if (params.seriesData.length === 0) {
                        yValue = params.value;
                        var temp = parseFloat(yValue).toFixed(4);
                        return temp;
                    }
                }
            }
        },
        formatter: function(params) {
            if (dragFlag) {
                dragRefresh(params[0].dataIndex, yValue);
            }
            
        }
    },
    color: colors,
    grid: {
        left: '5%',
        right: '5%',
        bottom: 40
    },
    xAxis: {
        data: xTime,
        splitLine: {
            show: false,
            interval: 0
        }
    },
    yAxis: {
        type: 'value',
        z: 2
    },
    series: [ {
            id: 'main',
            name: 'main',
            data: testData,
            type: 'line',
            smooth: true,
            z: 3,
            width: 3,
            itemStyle: {
                color: '#FF6347'
            }
        }
    ]
};

/**
 * 图形刷新
 * @param index 预测数据索引
 * @param value 预测数据数值
 */
function dragRefresh(index, value) {
    testData[index] = value.toFixed(4);
    refresh();
}

/**
 * 图形刷新
 */
function refresh() {
    setTimeout(function() {
        myChart.setOption({
            series: [{
                    id: 'main',
                    data: testData,
                    itemStyle: {
                        color: '#ff6347'
                    }
                }
            ]
        });
    }, 1);
}