Твой план идеален, что тебе мешает это сделать? В чем проблема блокирует следующие шаги?
Обновление: пожалуйста, не разделяйте вопрос на заголовок и текст, я с трудом понял, что вы имеете в виду. Заголовок должен содержать только краткое резюме вопроса.
Отвечая на ваш вопрос: самый простой вариант для контрольных цветов - это серия поколений с предварительно вычисленным цветом.
Примерно так:
var myChart = echarts.init(document.getElementById('main'));
var data = [
[120, 132, 101, 134, 90, 230, 210],
[340, 280, 310, 360, 280, 310, 410],
[520, 532, 490, 480, 520, 550, 570],
[760, 732, 790, 780, 820, 750, 770],
[820, 932, 901, 934, 1290, 1330, 1320],
];
var series = data.map((sData, idx) => (
{
name: 'series' + idx,
type: 'line',
data: sData,
color: idx % 2 === 0 ? 'red' : 'green',
}
))
var option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: series,
};
myChart.setOption(option);
<script src="https://cdn.jsdelivr.net/npm/echarts@4.7.0/dist/echarts.js"></script>
<div id="main" style="width: 600px;height:400px;"></div>