Theme River with axis

by kelvinau

HTML

<script src="https://cdn.bootcss.com/echarts/4.0.2/echarts.min.js"></script>
<body>
  <div id="main" style="width: 600px;height:400px;"></div>
</body>

JavaScript

var myChart = echarts.init(document.getElementById('main'));

var option =
  option = {

    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'line',
        lineStyle: {
          color: 'rgba(0,0,0,0.2)',
          width: 1,
          type: 'solid'
        }
      }
    },

    legend: {
      data: ['DQ', 'TY', 'SS', 'QG', 'SY', 'DD']
    },

    singleAxis: {

      axisTick: {
        show: false
      },

      axisLabel: {
        show: false
      },
      axisLine: {
        show: false
      },

      type: 'time',

      splitLine: {
        show: false
      }
    },
    xAxis: {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
      z: 5,
      zlevel: 5,
      offset: -150,
      left: 0,
    },
    yAxis: {
      type: 'value',
      left: 0,
      z: 5,
      zlevel: 5,
    },
    series: [{
        data: [],
        type: 'line',
        left: 0,

      },
      {
        type: 'themeRiver',
         left: 0,
        itemStyle: {
          emphasis: {
            shadowBlur: 20,
            shadowColor: 'rgba(0, 0, 0, 0.8)'
          }
        },
        label: {
        	show: false
        },
        data: [
          ['2015/11/21', 35, 'DQ'],
          ['2015/11/22', 40, 'DQ'],
          ['2015/11/23', 32, 'DQ'],
          ['2015/11/24', 26, 'DQ'],
          ['2015/11/25', 22, 'DQ'],
          ['2015/11/20', 30, 'TY'],
          ['2015/11/21', 28, 'TY'],
          ['2015/11/22', 27, 'TY'],
          ['2015/11/23', 26, 'TY'],
          ['2015/11/24', 15, 'TY'],
          ['2015/11/25', 30, 'TY'],
          ['2015/11/26', 35, 'TY'],
          ['2015/11/27', 42, 'TY'],
          ['2015/11/28', 42, 'TY'],
        ]
      },

    ]
  };;

myChart.setOption(option);