利用echarts如何实现拖拽生成3条曲线?

image.png
如图,需要实现一张图内可以绘制3条曲线,现在已经能实现拖拽生成1条曲线,
代码如下

create(seriesData) {
            var chartDom = document.getElementById(this.id);
            var myChart = echarts.init(chartDom);
            const data = [];
            option = {
                tooltip: false,
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    min: -60,
                    max: 20,
                    type: 'value',
                    axisLine: { onZero: false }
                },
                xAxis: {
                    type: 'category',
                    position: 'bottom',
                    axisLine: {
                        onZero: false,
                        lineStyle: {
                            color: '#00f'
                        }
                    },
                    axisLabel: {
                        color: '#333',
                        formatter: function (value, index) {
                            let k = value / 1000
                            return k < 1 ? value : (k + 'k')
                        }
                    },
                    data: [125, 250, 500, 1000, 2000, 4000, 8000],
                    splitLine: {
                        show: true,
                        interval: function (index, value) {
                            return value >= 500
                        }
                    },
                    axisTick: {
                        alignWithLabel: true,
                        length: 400,
                        inside: true,
                        lineStyle: {
                            color: '#ccc'
                        }
                    }
                },
                yAxis: {
                    min: -10,
                    max: 125,
                    interval: 10,
                    inverse: true,
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: '#00f'
                        }
                    },
                    axisLabel: {
                        color: '#333',
                        formatter: function (value, index) {
                            return value > 120 ? '' : value;
                        }
                    },
                },
                series: seriesData
            };
            var zr = myChart.getZr();
            zr.on('click', function (params) {
                var pointInPixel = [params.offsetX, params.offsetY];
                var pointInGrid = myChart.convertFromPixel('grid', pointInPixel);
                var pointInAxisLabel = myChart.convertFromPixel('geo', pointInPixel);
                console.log(pointInPixel)
                console.log(pointInGrid)
                console.log(pointInAxisLabel)
                if (myChart.containPixel('grid', pointInPixel)) {
                    const _index = data.map(item => item[0]).indexOf(pointInGrid[0])
                    if (data.length >= 7 && _index === -1) {
                        return
                    }
                    if (_index !== -1) {
                        data[_index] = pointInGrid
                    } else {
                        data.push(pointInGrid);
                    }
                    myChart.setOption({
                        series: [
                            {
                                id: 'a',
                                data: data
                            }
                        ]
                    });
                }
            });
            option && myChart.setOption(option);
        }

不知道怎么继续添加剩余两条。

阅读 554
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题