跳到主要内容

示例​

折线图​

PCPhonePad

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


export default XPage({
    data: {
        options: {
            data: [
                {
                    "value": 40,
                    "name": "Accessibility",
                    "path": "Accessibility"
                },
                {
                    "value": 180,
                    "name": "Accounts",
                    "path": "Accounts",
                    "children": [
                        {
                            "value": 76,
                            "name": "Access",
                            "path": "Accounts/Access",
                            "children": [
                                {
                                    "value": 12,
                                    "name": "DefaultAccessPlugin.bundle",
                                    "path": "Accounts/Access/DefaultAccessPlugin.bundle"
                                },
                                {
                                    "value": 28,
                                    "name": "FacebookAccessPlugin.bundle",
                                    "path": "Accounts/Access/FacebookAccessPlugin.bundle"
                                },
                                {
                                    "value": 20,
                                    "name": "LinkedInAccessPlugin.bundle",
                                    "path": "Accounts/Access/LinkedInAccessPlugin.bundle"
                                },
                                {
                                    "value": 16,
                                    "name": "TencentWeiboAccessPlugin.bundle",
                                    "path": "Accounts/Access/TencentWeiboAccessPlugin.bundle"
                                }
                            ]
                        },
                        {
                            "value": 92,
                            "name": "Authentication",
                            "path": "Accounts/Authentication",
                            "children": [
                                {
                                    "value": 24,
                                    "name": "FacebookAuthenticationPlugin.bundle",
                                    "path": "Accounts/Authentication/FacebookAuthenticationPlugin.bundle"
                                },
                                {
                                    "value": 16,
                                    "name": "LinkedInAuthenticationPlugin.bundle",
                                    "path": "Accounts/Authentication/LinkedInAuthenticationPlugin.bundle"
                                },
                                {
                                    "value": 20,
                                    "name": "TencentWeiboAuthenticationPlugin.bundle",
                                    "path": "Accounts/Authentication/TencentWeiboAuthenticationPlugin.bundle"
                                },
                                {
                                    "value": 16,
                                    "name": "TwitterAuthenticationPlugin.bundle",
                                    "path": "Accounts/Authentication/TwitterAuthenticationPlugin.bundle"
                                },
                                {
                                    "value": 16,
                                    "name": "WeiboAuthenticationPlugin.bundle",
                                    "path": "Accounts/Authentication/WeiboAuthenticationPlugin.bundle"
                                }
                            ]
                        },
                        {
                            "value": 12,
                            "name": "Notification",
                            "path": "Accounts/Notification",
                            "children": [
                                {
                                    "value": 12,
                                    "name": "SPAAccountsNotificationPlugin.bundle",
                                    "path": "Accounts/Notification/SPAAccountsNotificationPlugin.bundle"
                                }
                            ]
                        }
                    ]
                },
                {
                    "value": 1904,
                    "name": "AddressBook Plug-Ins",
                    "path": "AddressBook Plug-Ins",
                    "children": [
                        {
                            "value": 744,
                            "name": "CardDAVPlugin.sourcebundle",
                            "path": "AddressBook Plug-Ins/CardDAVPlugin.sourcebundle",
                            "children": [
                                {
                                    "value": 744,
                                    "name": "Contents",
                                    "path": "AddressBook Plug-Ins/CardDAVPlugin.sourcebundle/Contents"
                                }
                            ]
                        },
                        {
                            "value": 28,
                            "name": "DirectoryServices.sourcebundle",
                            "path": "AddressBook Plug-Ins/DirectoryServices.sourcebundle",
                            "children": [
                                {
                                    "value": 28,
                                    "name": "Contents",
                                    "path": "AddressBook Plug-Ins/DirectoryServices.sourcebundle/Contents"
                                }
                            ]
                        },
                        {
                            "value": 680,
                            "name": "Exchange.sourcebundle",
                            "path": "AddressBook Plug-Ins/Exchange.sourcebundle",
                            "children": [
                                {
                                    "value": 680,
                                    "name": "Contents",
                                    "path": "AddressBook Plug-Ins/Exchange.sourcebundle/Contents"
                                }
                            ]
                        },
                        {
                            "value": 432,
                            "name": "LDAP.sourcebundle",
                            "path": "AddressBook Plug-Ins/LDAP.sourcebundle",
                            "children": [
                                {
                                    "value": 432,
                                    "name": "Contents",
                                    "path": "AddressBook Plug-Ins/LDAP.sourcebundle/Contents"
                                }
                            ]
                        },
                        {
                            "value": 20,
                            "name": "LocalSource.sourcebundle",
                            "path": "AddressBook Plug-Ins/LocalSource.sourcebundle",
                            "children": [
                                {
                                    "value": 20,
                                    "name": "Contents",
                                    "path": "AddressBook Plug-Ins/LocalSource.sourcebundle/Contents"
                                }
                            ]
                        }
                    ]
                }
            ]
        }
    },
    beforeRender22 (opt/*系统默认配置*/, options/*用户传入的options*/, colors/*默认颜色配置*/, callback/*异步回调*/) {
        function getLevelOption () {
            return [
                {
                    itemStyle: {
                        borderWidth: 0,
                        gapWidth: 5
                    }
                },
                {
                    itemStyle: {
                        gapWidth: 1
                    }
                },
                {
                    colorSaturation: [0.35, 0.5],
                    itemStyle: {
                        gapWidth: 1,
                        borderColorSaturation: 0.6
                    }
                }
            ];
        }

        var diskData = options.data;
        return {
            tooltip: {
                show: true,
                formatter: function (info) {
                    return '2342342342';
                }
            },
            legend: {
                data: []
            },
            series: [
                {
                    name: 'Disk Usage',
                    type: 'treemap',
                    visibleMin: 300,
                    label: {
                        show: true,
                        formatter: '{b}'
                    },
                    itemStyle: {
                        borderColor: '#fff'
                    },
                    levels: getLevelOption(),
                    data: diskData
                }
            ]
        };
    }
});


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--