echarts实现大数据拖拽数据图表

//【血压】
function getDtBP(json) {
    var DiastolicArray = [];
    var ShrinkArray = [];
    var LastUpdateArray = [];
    $("#id_nodata").hide();//隐藏无数据提示

    if (json.length > 0) {
        for (var i = 0; i < json.length; i++) {
            if (json[i].Diastolic != 0 && json[i].Shrink) {
                DiastolicArray.push(json[i].Diastolic);
                ShrinkArray.push(json[i].Shrink);
                LastUpdateArray.push(json[i].LastUpdate);

            }
        }
    } else {//无数据提示
        $("#id_nodata").show();
    }
    var symbolSize = 13;

    var option = {};
    var myChart = echarts.init(document.getElementById('dt_hp'));
    option = {
        title: {
        },
        tooltip: {
            trigger: 'axis',
            position: function (pt) {
                return [pt[0], '10%'];
            }
        },
        toolbox: {
            feature: {
                dataZoom: {
                    yAxisIndex: 'none'
                },
                restore: {},
                saveAsImage: {}
            }
        },
        legend: {
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: LastUpdateArray
        },
        yAxis: [{
            min: 0,
            max: 200,
            type: 'value',
            axisLine: { onZero: false }
        }],
        dataZoom: [{
            type: 'inside',
            start: 0,
            end: 50
        }, {
            start: 0,
            end: 80,
            handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,
            16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
            handleSize: '80%',
            handleStyle: {
                color: '#fff',
                shadowBlur: 3,
                shadowColor: 'rgba(0, 0, 0, 0.6)',
                shadowOffsetX: 2,
                shadowOffsetY: 2
            }
        }],
        series: [{
            name: healthPage.tableLowBP,
            type: 'line',
            smooth: true,
            symbolSize: symbolSize,
            itemStyle: {//显示数值
                normal: {
                    label: {
                        show: true, //开启显示
                        position: 'top', //在上方显示
                        textStyle: { //数值样式
                            color: 'black',
                            fontSize: 13
                        }
                    }
                }
            },

            data: DiastolicArray
        },
        {
            name: healthPage.tableShrinkBP,
            type: 'line',
            smooth: true,
            symbolSize: symbolSize,
            itemStyle: {//显示数值
                normal: {
                    label: {
                        show: true, //开启显示
                        position: 'top', //在上方显示
                        textStyle: { //数值样式
                            color: 'black',
                            fontSize: 13
                        }
                    }
                }
            },

            data: ShrinkArray
        }
        ]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
}

效果预览:

使用echarts模版参考：

https://echarts.apache.org/examples/zh/editor.html?c=area-simple

echarts使用文档简介:

https://echarts.apache.org/zh/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20EChar