echarts如何实现瀑布图？

Question

echarts如何实现瀑布图

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

这个是三维折线图么，感觉像是又不太像

现在通过echarts-gl只能实现到这种程度，轴线还是不像：

Answer 1

http://echarts.zhangmuchen.top/#/detail?cid=xBJ8YycLzM

Answer 2

您好，根据您提供的信息，ECharts 是一个使用 JavaScript 实现的开源可视化库，可以帮助用户轻松构建各种类型的图表，包括瀑布图。

要实现瀑布图，您可以使用 ECharts 的 graph 组件，并通过配置相应的参数来创建瀑布图的外观和感觉。

以下是一个简单的示例代码，可以帮助您开始实现瀑布图：

var myChart = echarts.init(document.getElementById('main'));var option = {    title: {        text: '瀑布图示例'    },    tooltip: {},    xAxis: {        data: ['A', 'B', 'C', 'D', 'E']    },    yAxis: {},    series: [{        type: 'graph',        layout: 'none',        symbolSize: 50,        roam: true,        label: {            show: true        },        edgeSymbol: ['circle', 'arrow'],        edgeSymbolSize: [4, 10],        edgeLabel: {            fontSize: 20        },        data: [{            name: '数据1',            x: 100,            y: 200,            symbolSize: 30,            label: {                show: true,                position: 'right',                formatter: '数据1'            },            emphasis: {                label: {                    show: true,                    fontSize: '30',                    fontWeight: 'bold'                }            }        }, {            name: '数据2',            x: 300,            y: 200,            symbolSize: 30,            label: {                show: true,                position: 'right',                formatter: '数据2'            },            emphasis: {                label: {                    show: true,                    fontSize: '30',                    fontWeight: 'bold'                }            }        }, {            name: '数据3',            x: 500,            y: 100,            symbolSize: 30,            label: {                show: true,                position: 'right',                formatter: '数据3'            },            emphasis: {                label: {                    show: true,                    fontSize: '30',                    fontWeight: 'bold'                }            }        }],        lineStyle: {            opacity: 0.9,            width: 2,