跳到主要内容

示例​

折线图​

PCPhonePad

<page>
    <module  height='400px' style='margin: 0'>
        <customchart :options='options' :beforeRender='beforeRender1' @chart="(chart)=>{custom('aaa',chart)}">
        </customchart>
    </module>
</page>
export default XPage({
    data:{
        options:{
            'legend': {'data': ['线下', '线上', '线上占比']},
            'xAxis': {
                'data': ['01/01', '01/02', '01/03', '01/04', '01/05', '01/06']
            },
            'yAxis': [
                {
                    'type': 'value',
                    'min': 0,
                    'name': '百分比'
                }
            ],
            'series': [
                {
                    'type': 'line',
                    'name': '线上占比',
                    'data': ['51.93', '52.27', '10.89', '55.10', '54.88', '61.69']
                }
            ]
        }
    },
    beforeRender1 (opt/*系统默认配置*/, options/*用户传入的options*/, colors/*默认颜色配置*/) {
        /*这里可以对options 做2次调整，已满足部分UI差异*/
        return options
    },
    custom(name,chart){
        console.log(name,chart)
    }
});


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