跳到主要内容

示例​

漏斗图​

PCPhonePad

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

export default XPage({
    data: {
        options: {
            series: [
                {
                    name: '漏斗图',
                    type: 'funnel',
                    top: '30%',
                    bottom: '10%',
                    //x2: 80,
                    // height: {totalHeight} - y - y2,
                    min: 0,
                    max: 100,
                    minSize: '20%',
                    maxSize: '80%',
                    sort: 'descending',
                    gap: 5,
                    label: {
                        show: true,
                        position: 'inside',/*位置*/
                        color: '#fff'/*字体颜色*/
                    },
                    data: [
                        {
                            value: 20, name: '访问', itemStyle: {
                                color: '#57a5ff'
                            }
                        },
                        {value: 40, name: '咨询', itemStyle: {color: '#008aff'}},
                        {value: 60, name: '订单', itemStyle: {color: '#0f62fe'}},
                        {value: 80, name: '点击', itemStyle: {color: '#0043e7'}},
                        {value: 100, name: '展现', itemStyle: {color: '#0043e7'}}
                    ]
                }
            ]
        }
    },
    beforeRender23 (opt/*系统默认配置*/, options/*用户传入的options*/, colors/*默认颜色配置*/, callback/*异步回调*/) {
        return {
            legend: {
                data: ['展现', '点击', '访问', '咨询', '订单']
            },
            tooltip: {
                trigger: 'item'
            },
            series: options.series
        };
    }
});



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