ウォーターフォール

Apache ECharts にウォーターフォールシリーズはありませんが、積み上げ棒グラフを使用して効果をシミュレートできます。

データ配列の値が前の値からの増減を表すと想定します。

var data = [900, 345, 393, -108, -154, 135, 178, 286, -119, -361, -203];

つまり、最初のデータは 900 で、2 番目のデータ 345 は 900 への 345 の追加を表します。このデータを段階的なウォーターフォールチャートとして表示する場合、3 つのシリーズを使用できます。1 つは中断棒効果を実装するための非インタラクティブな透明なシリーズ、2 つ目のシリーズは正の数を表すために使用され、3 つ目のシリーズは負の数を表すために使用されます。

var data = [900, 345, 393, -108, -154, 135, 178, 286, -119, -361, -203];
var help = [];
var positive = [];
var negative = [];
for (var i = 0, sum = 0; i < data.length; ++i) {
  if (data[i] >= 0) {
    positive.push(data[i]);
    negative.push('-');
  } else {
    positive.push('-');
    negative.push(-data[i]);
  }

  if (i === 0) {
    help.push(0);
  } else {
    sum += data[i - 1];
    if (data[i] < 0) {
      help.push(sum + data[i]);
    } else {
      help.push(sum);
    }
  }
}

option = {
  title: {
    text: 'Waterfall'
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    splitLine: { show: false },
    data: (function() {
      var list = [];
      for (var i = 1; i <= 11; i++) {
        list.push('Oct/' + i);
      }
      return list;
    })()
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      type: 'bar',
      stack: 'all',
      itemStyle: {
        normal: {
          barBorderColor: 'rgba(0,0,0,0)',
          color: 'rgba(0,0,0,0)'
        },
        emphasis: {
          barBorderColor: 'rgba(0,0,0,0)',
          color: 'rgba(0,0,0,0)'
        }
      },
      data: help
    },
    {
      name: 'positive',
      type: 'bar',
      stack: 'all',
      data: positive
    },
    {
      name: 'negative',
      type: 'bar',
      stack: 'all',
      data: negative,
      itemStyle: {
        color: '#f33'
      }
    }
  ]
};
ライブ

寄稿者 在 GitHub 上編輯此頁面

plainheart plainheartpissang pissang