line: simple line

简单折线图

HTML

<script src="//unpkg.com/echarts/dist/echarts.min.js"></script>
<script src="https://underscorejs.org/underscore.js"></script>
<div id="main" style="width: 800px;height:600px;"></div>

JavaScript

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

var option = { 
      color: ['#ffc94d', '#556080', '#ff708d', '#2ce69b', '#598bff'],
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      legend: {
        data: ['Step-1', 'Step-2', 'Step-3', 'Step-4', 'Waiting']
      },
      lineStyle: {
        color: '#fff'
      },
      calculable: true,
      xAxis: [
        {
          type: 'value'
        }
      ],
      yAxis: [
        {
          type: 'category',
          data: ['1']
        }
      ],
      series: [
        {
          name: 'Step-1',
          type: 'bar',
          stack: 'top',
          itemStyle: { normal: { label: { show: true, position: 'insideRight' } } },
          data: [320]
          
        },
        {
          name: 'Waiting',
          type: 'bar',
          stack: 'top',
          itemStyle: { normal: { label: { show: true, position: 'insideRight' } } },
          data: [280]
          
        },
        {
          name: 'Step-2',
          type: 'bar',
          stack: 'top',
          itemStyle: { normal: { label: { show: true, position: 'insideRight' } } },
          data: [120]
        },
        {
          name: 'Waiting',
          type: 'bar',
          stack: 'top',
          itemStyle: { normal: { label: { show: true, position: 'insideRight' } } },
          data: [550]
        },
        {
          name: 'Step-3',
          type: 'bar',
          stack: 'top',
          itemStyle: { normal: { label: { show: true, position: 'insideRight' } } },
          data: [220]
        },
        {
          name: 'Waiting',
          type: 'bar',
          stack: 'top',
          itemStyle: { normal: { label: { show: true, position: 'insideRight' } } },
          data: [810]
        },
        {
          name: 'Step-4',
          type: 'bar',
          stack: 'top',
          itemStyle: { normal: { label: { show: true, position: 'insideRight' } }...