使用echarts 实现折线图

需求：使用echarts 实现折线图，右侧表格展示对应数据，可以修改数据，右侧输入框更改数据后刷新图表。效果如图：

 

主要代码如下：

    /*css*/
    .apGamma-td {
        text-align: center;
        line-height: 36px;
        width: 36px;
        height: 36px;
        background: rgb(85, 218, 206);
        border: 1px solid rgb(255, 255, 255);
        display: inline-table;
    }

    .apGamma-input {
        text-align: center;
        line-height: 36px;
        width: 90px;
        height: 36px;
        background: rgb(247, 240, 191);
        border: 1px solid rgb(255, 255, 255);
    }
    #apGammaEcharts {
        height:450px;
        border: 1px solid #a0a0a0;
    }
    #tableCont {
        height: 470px;
        overflow-y: auto;
        overflow-x: hidden;
    }

    <div class="layui-row layui-col-space20">
        <div class="layui-col-xs4">
            <form class="layui-form layui-form-pane" lay-filter="apGammaModal">
            </form>
        </div>
        <div class="layui-col-xs6">
            <div id="apGammaEcharts"></div>
        </div>
        <div class="layui-col-xs2" id="tableCont">
            <table id="apGammaTable">
            </table>
        </div>
    </div>
    


    //页面引入echarts插件
    <script src="js/libs/echarts.min.js"></script>

class GammaController {
    constructor() {
        this.R_Gamma = new TxGamma();
        this.echarts = echarts;
    }

    initialize() {
        this.initGammaLineChart();
        this.AddCustomGamma();
    }

    initGammaLineChart() {
        // 基于准备好的dom，初始化echarts实例
        this.myChart = this.echarts.init(document.getElementById('apGammaEcharts'));
        // 指定图表的配置项和数据
        var option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    // type: 'cross'
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                // data: [0, 64, 128, 192, 255]
                data: function () {
                    let list = [];
                    for (let i = 0; i <4096; i++) {
                        list.push(i);
                    }
                    return list;
                }(),
                axisLabel: {
                    interval: 1024,
                    showMaxLabel: true
                }
            },
            yAxis: {
                boundaryGap: false,
                // data: [0, 16384, 32768, 49152, 65536]
                // type: 'value',
                // axisPointer: {
                //     snap: true
                // },
                data: function () {
                    let list = [];
                    for (let i = 0; i <= 65536; i++) {
                        list.push(i);
                    }
                    return list;
                }(),
                axisLabel: {
                    interval: 16383,
                    showMaxLabel: true
                }
            },
            series: [{
                data: this.R_Gamma.gammaTableBC, //数据
                type: 'line',
                smooth: true,
                // symbol: 'none',
                color: ['blue']
            }
                // , {
                //     data: this.G_Gamma.gammaTableBC,
                //     type: 'line',
                //     smooth: true,
                //     color: ['green']
                // }, {
                //     data: this.B_Gamma.gammaTableBC,
                //     type: 'line',
                //     smooth: true,
                //     color: ['blue']
                // }
            ]
        };

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

    AddCustomGamma() {
        let that = this;
        $("#apGammaTable").empty();
        for (let i = 0; i < 4096; i++) {
            let html = "<tr><td class='apGamma-td'>" + i + "</td><td><input type='text' class='apGamma-input numInput' id='GammaValue_" + i + "'></td></tr>";
            $("#apGammaTable").append(html);
        }
        $(".apGamma-input").on("change", function (e) {
            let id = e.currentTarget.id.replace(/[^0-9]/ig, "");
            let val = e.currentTarget.value;
            that.getCustomGammaData(id, val);
        });
        console.log(this.R_Gamma)
        that.updateCustGammaData();
    }

    getCustomGammaData(i, val) {
        this.R_Gamma.gammaTableBC[i] = parseInt(val);
        this.getGammaLineChart();
    }

    updateCustGammaData() {
        let GammaValue = 0;
        for (let i = 0; i < 4096; i++) {
            GammaValue = this.R_Gamma.gammaTableBC[i];
            $("#GammaValue_" + i).val(GammaValue);
        }
    }
}