echarts横向瀑布柱状图

ECharts 是一款非常流行的数据可视化库，可以用来创建各种类型的图表，包括横向瀑布柱状图。横向瀑布柱状图主要用于展示数据的增减情况，比如收入和支出的变化。

在 ECharts 中创建横向瀑布柱状图可以按照以下步骤进行：

1. 导入 ECharts 库：

   <script src="https://cdn.jsdelivr.net/npm/echarts@4.9.0/dist/echarts.min.js"></script>

2. 创建一个具有宽度和高度的 DOM 容器元素：

   <div id="chart" style="width: 600px; height: 400px;"></div>

3. 在 JavaScript 中初始化图表实例并设置配置项：

   var chart = echarts.init(document.getElementById('chart'));

   var option = {
     xAxis: {
       type: 'value',
     },
     yAxis: {
       type: 'category',
       data: ['收入', '支出'],
     },
     series: [
       {
         type: 'bar',
         data: [100, -50], // 正数表示收入，负数表示支出
         itemStyle: {
           color: function(params) {
             return params.value >= 0 ? '#6ac8ca' : '#f19d9d';           },
         },
       },
     ],
   };

   chart.setOption(option);

4. 渲染图表：

   chart.render();

这样就可以在指定的容器中展示横向瀑布柱状图了。你可以根据实际需求修改配置项和数据来适应不同的场景。