如图,需要实现一张图内可以绘制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);
}
不知道怎么继续添加剩余两条。