图表。 是否可以制作这种类型的图表？

Question

Is it possible to make this kind of chart?

Condition: when blue chart value is lower then black chart value area between them colored into green, otherwise in red.

I've played around areaStyle and visualMap but can not find a right solution.

Answer 1

Yes, it is possible. And it's not difficult to draw but a bit harder to support further. I not sure if correctly understood what data model you'll use but I drafted exactly the same shape like in you picture.

 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>