跳到主要内容

示例​

桑基图​

PCPhonePad

<page style='padding: 10px'>
    <module  height='400px' style='margin: 0'>
        <customchart :options='options' :beforeRender='beforeRender20'>
        </customchart>
    </module>
</page>

export default XPage({
    data: {
        options: {
            series: {
                type: 'sankey',
                layout: 'none',
                emphasis: {
                    focus: 'adjacency'
                },
                data: [{
                    name: 'a'
                }, {
                    name: 'b'
                }, {
                    name: 'a1'
                }, {
                    name: 'a2'
                }, {
                    name: 'b1'
                }, {
                    name: 'c'
                }],
                links: [{
                    source: 'a',
                    target: 'a1',
                    value: 5
                }, {
                    source: 'a',
                    target: 'a2',
                    value: 3
                }, {
                    source: 'b',
                    target: 'b1',
                    value: 8
                }, {
                    source: 'a',
                    target: 'b1',
                    value: 3
                }, {
                    source: 'b1',
                    target: 'a1',
                    value: 1
                }, {
                    source: 'b1',
                    target: 'c',
                    value: 2
                }]
            }
        }
    },
    beforeRender20 (opt/*系统默认配置*/, options/*用户传入的options*/, colors/*默认颜色配置*/) {
        /*块颜色*/
        let levels = Array.from({length: 12}, (value, index) => {
            return {
                depth: index,
                itemStyle: {
                    color: colors[ index % colors.length ].color
                },
                lineStyle: {
                    color: 'source',
                    opacity: 0.6/*连接带透明度*/
                }
            }
        });
        return {
            series: {...options.series, levels}
        };
    }
});


Attribute​

参数说明类型可选值默认值端版本
options图表配置，符合echart配置项stringPC/Mobile--

event​

参数说明类型端版本
beforeRender每次渲染前处理options,参数(opt,options,color,callback,lighting高亮色)，需要返回真实optionsfunctionPC/Mobile--
chartchart实例，用于自定义chart事件处理chartInstancePC/Mobile--

beforeRender​

参数说明类型端版本
opt系统默认配置包含tooltip\ xAxis\ yAxis\grid\legendStringPC/Mobile--
options用户配置项functionPC/Mobile--
colors当前渲染颜色 (使用默认即可)ArrayPC/Mobile--
lighting高亮颜色 (使用默认即可)ArrayPC/Mobile--