echarts如何实现瀑布图

Question

echarts如何实现这种图

图源：https://segmentfault.com/q/1010000039339155

Answer 1

使用 ECharts 实现瀑布图是一种可视化展示数据变化的方式，特别适合展示数据的增减情况。以下是使用 ECharts 实现瀑布图的基本步骤：

准备数据：瀑布图需要的数据通常包括一系列的数值，这些数值按照一定的顺序排列，用于展示数据的增减情况。同时，也需要为每一个数值提供一个名称，这些名称会在图表的标签（Label）中显示。

配置图表选项：在 ECharts 中，需要使用 JavaScript 对象来配置图表的各种选项。例如：

```javascript

var option = {  
    title: {  
        text: '瀑布图'  
    },  
    tooltip: {},  
    xAxis: {  
        data: names  // 这里的 names 是数据名称数组  
    },  
    yAxis: {},  
    series: [{  
        type: 'bar',  // 瀑布图是在柱状图的基础上实现的，因此这里选择柱状图类型  
        data: data,  // 这是数据的值数组  
        markLine: {  // 通过 markLine 标记线的位置，实现瀑布效果  
            data: [  
                {type: 'average', name: '平均值'}  // 平均值线的设置  
            ],  
            lineStyle: {  
                color: 'red'  // 标记线的颜色  
            }  
        },  
        itemStyle: {  // 柱状图的颜色设置  
            normal: {  
                color: '#c23531'  // 柱状图的颜色  
            }  
        }  
    }]  
};
渲染图表：最后，需要调用 ECharts 的 init 方法来初始化图表，并使用 setOption 方法来设置图表配置项。例如：

```
var myChart = echarts.init(document.getElementById('main')); // 初始化图表，传入图表容器的选择器
myChart.setOption(option); // 设置图表的配置项
以上代码就可以在页面上渲染出一个瀑布图。注意，实际使用中需要根据具体的数据和需求来调整配置项和数据。