Блог

Я хотел бы найти подход к тому, как рисовать 2 строки в электронных диаграммах и заполнять пространство между ними следующим образом:

Так что каждая строка имеет свой собственный цвет. В зависимости от порядка строк — область заполняется тем или иным цветом (см. Изображение).

Есть ли собственный способ сделать это? Я обнаружил, что некоторые люди упоминают extensions , но никто не предоставляет никаких инструкций о том, как написать их с нуля.. Я также не нашел никаких примеров на официальной странице документации. Я был бы признателен, если бы кто-нибудь мог указать мне правильное направление в достижении этой цели.

В худшем случае — я бы принял другие библиотеки, если у них есть такая очень необходимая опция.

Лучшее, что я мог сделать, это:

 var chartOptions = {
    xAxis: [{
        type: 'value'
    }],
    yAxis: [{
        type: 'value'
    }],
    series: [{
        type: "line",
        data: [[0, 4], [1, 3], [2, 2], [3, 2], [4, 1], [5, 2]],
    }, {
        type: "line",
        data: [[0, 2], [1, 3], [2, 4], [3, 8], [4, 5], [5, 0]],
    }],
};
var aChart = echarts.init(document.getElementById('aGraph'));
aChart.setOption(chartOptions);
 

Я использовал areaStyle для заполнения области между осевой линией и данными. Я бы попытался решить эту проблему, добавив зеленый / желтый areaStyle в зеленую серию, добавив розовый areaStyle в красную серию, а затем добавив белый areaStyle в новую серию, составленную из минимальных значений из двух других серий. В сочетании с lineStyle шириной 0 вы могли бы в основном добиться внешнего вида эскиза, однако минимальная заливка рядов, вероятно, также затенит внутренние линии сетки.