echarts流式图

上午好☀️☀️☀️️
本答案参考ChatGPT-3.5

要实现纵向的流式图，可以参考如下步骤：

1.在 Echarts 官网上找到纵向河流图的示例：https://echarts.apache.org/examples/zh/editor.html?c=dataset-river

2.根据示例中的代码修改自己的数据和配置，需要注意以下几点：

• 将源数据转换成 Echarts 所需的格式，即二维数组（时间序列和值）嵌套的方式。
• 设置纵向河流图的基本配置，包括 dataZoom、tooltip、xAxis、yAxis、series 等。
• 将数据和配置放入 Echarts 实例化的参数中，并渲染到对应的 DOM 元素中。

3.最后，可根据需要进一步调整图表的样式和布局。

具体操作可参考本例代码（假设数据源为变量 data）：

// 转换为 Echarts 所需的数据格式
var riverData = [];
for (var i = 0; i < data.length; i++) {
  riverData.push([i, data[i]]);
}

// 基础配置
var option = {
  title: {
    text: '纵向河流图示例'
  },
  tooltip: {},
  grid: {
    left: '10%',
    top: '10%',
    right: '10%',
    bottom: '10%'
  },
  dataset: {
    source: riverData
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    splitLine: {
      show: false
    },
    axisLine: {
      lineStyle: {
        color: '#999'
      }
    }
  },
  yAxis: {
    type: 'value',
    splitLine: {
      show: false
    },
    axisLine: {
      lineStyle: {
        color: '#999'
      }
    }
  },
  dataZoom: [{
    type: 'inside',
    filterMode: 'none',
    xAxisIndex: [0],
    startValue: 1,
    endValue: 3
  }],
  series: [{
    type: 'line',
    smooth: true,
    areaStyle: {
      color: '#36cfc9'
    },
    lineStyle: {
      width: 2,
      color: '#36cfc9'
    },
    itemStyle: {
      color: '#36cfc9'
    }
  }]
};

// 实例化 Echarts 并设置参数
var myChart = echarts.init(document.getElementById('main'));
myChart.setOption(option);

其中，源数据为变量 data，数据转换的过程在第二步的操作中，代码如下：

var riverData = [];
for (var i = 0; i < data.length; i++) {
  riverData.push([i, data[i]]);
}

参考效果如下：