概览

基于ECharts实现的一个轻量级Dorado控件。根据ECharts API的特点,尽可能保持Dorado ECharts控件和原生的使用上的一致性,及降低Dorado ECharts控件的学习成本性。

效果图:

kongqi.png

快速上手

三部曲

步骤一: 页面添加ECharts控件

步骤二: 去ECharts官网拷贝一个例子

如下:

option = {
    tooltip: {
        trigger: 'item',
        formatter: "{a} <br/>{b}: {c} ({d}%)"
    },
    legend: {
        orient: 'vertical',
        x: 'left',
        data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
    },
    series: [
        {
            name:'访问来源',
            type:'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            label: {
                normal: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    show: true,
                    textStyle: {
                        fontSize: '30',
                        fontWeight: 'bold'
                    }
                }
            },
            labelLine: {
                normal: {
                    show: false
                }
            },
            data:[
                {value:335, name:'直接访问'},
                {value:310, name:'邮件营销'},
                {value:234, name:'联盟广告'},
                {value:135, name:'视频广告'},
                {value:1548, name:'搜索引擎'}
            ]
        }
    ]
};

步骤三: 粘贴到Dorado ECharts控件的beforeSetOption事件里面

需要注意的是:将option = 改为 arg.option =。

运行效果

pie.png

使用说明

Dorado Echart控件继承Control控件

属性

theme属性,主题设置,内置六种主题。
主题设置分两步:

  1. 通过view的packages属性导入主题相关资源包;
  2. 通过theme属性设置主题名称

方法

原生ECharts实例对象有的方法,Dorado ECharts控件几乎都有,方法名和参数都一摸一样。

事件

原生ECharts实例对象有的事件,Dorado ECharts控件几乎都有,其中事件中的arg参数就是原生事件参数params,事件名也略有不同,在dorado中,事件名采用小驼峰风格,而原生的都是小写。
另外,新增了两个特有的事件beforeInitECharts和beforeSetOption。

beforeIntECharts

ECharts原生实例对象初始化生成之前触发,arg包含theme和opts两个属性,用于控制初始化自定义控制。

beforeSetOption

原生ECharts实例对象首次设置option之前触发,arg有一个option和processDefault属性,
只有option不为空且processefault为true,才会执行默认行为,即给原生ECharts对象设置option,否则,就需要自己手动给ECharts对象设置option。

Back to top