Можно ли сделать такую диаграмму?
Условие: когда значение синей диаграммы ниже, то область значений черной диаграммы между ними окрашивается в зеленый цвет, в противном случае - в красный цвет.
Я играл с areaStyle и visualMap, но не могу найти правильного решения.
Да, это возможно. И рисовать это несложно, но немного сложнее поддерживать дальше. Я не уверен, правильно ли понял, какую модель данных вы будете использовать, но я нарисовал точно такую же форму, как на вашем рисунке.
var myChart = echarts.init(document.getElementById('main'));
var axisData = [0,1,2,3,4,5,6,7];
var colors = {
green: '#75e160',
red: '#d8403e',
blue: '#7447c8',
black: '#000000'
};
function upperDataGenerator(extremum) {
var data = [];
for (var i = 0; i <= extremum; i += 0.01) { data.push([i, -Math.sin(i)]) }
return data
}
function lowerDataGenerator(extremum){
var data = [];
for (var i = 0; i <= extremum; i += 0.01) { data.push([i, Math.sin(i)]) }
return data
}
var maxChartValue = 3 * Math.PI
var dataUpper = upperDataGenerator(maxChartValue);
var dataLower = lowerDataGenerator(maxChartValue);
option = {
xAxis: { data: axisData, type: 'value', max: 'dataMax' },
yAxis: { data: axisData, type: 'value', min: -3, max: 3 },
series: [
{
type: 'line',
data: dataUpper,
showSymbol: false,
areaStyle: {},
lineStyle: { color: 'blue' }
},
{
type: 'line',
data: dataLower,
showSymbol: false,
areaStyle: {},
lineStyle: { color: colors.black }
}
],
visualMap: [
{
type: 'piecewise',
show: false,
seriesIndex: [0,1],
orient: 'vertical',
pieces: [
{
min: 0,
max: 0.5,
color: colors.black
},
]
},
{
type: 'piecewise',
show: false,
seriesIndex: [1],
dimension: 0,
pieces: [
{
min: 0,
max: maxChartValue / 3,
color: colors.green
},
{
min: maxChartValue / 3,
max: maxChartValue - maxChartValue / 3,
color: colors.red
},
{
min: maxChartValue / 2,
max: maxChartValue,
color: colors.green
},
],
},
{
type: 'piecewise',
show: false,
seriesIndex: [0],
dimension: 0,
pieces: [
{
min: 0,
max: maxChartValue / 3,
color: colors.green
},
{
min: maxChartValue / 3,
max: maxChartValue - maxChartValue / 3,
color: colors.red
},
{
min: maxChartValue / 2,
max: maxChartValue,
color: colors.green
},
],
},
]
};
myChart.setOption(option);<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.7.0/echarts.min.js"></script>
<div id="main" style="width: 800px;height:600px;"></div>
