Echarts。是否有可能使这种类型的图表？

Question

可以制作这种图表吗？

条件：当蓝色图表的值低于黑色图表的值时，它们之间的区域就会变成绿色，否则就会变成红色。

我玩过areaStyle和visualMap，但没有找到合适的解决方案。

Answer 1

是的，是可以的。而且它并不难画，但进一步支持有点困难。我不知道是否正确理解你将使用什么数据模型，但我起草了完全相同的形状，像你的图片。

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>