1. 图表配置

1.1. 图表模板

1.1.1. 饼状图

<div id="chart1" 
    source="t4" 
    style="padding-top: 30px;width:50%;height:300px;" 
    caption="数据集作为数据源" 
    ebstype="chart" 
    charttype="pie" 
    legend="yes" 
    xfield="name" 
    yfield="data"
    dfield="data">
</div>

1.1.2. 直方图

<div id="chart2" 
    source="tbcrossid1.h" 
    style="padding-top: 30px;width:50%;height:300px;" 
    caption="交叉表作为数据源" 
    ebstype="chart" 
    charttype="bar" 
    legend="yes" 
    xfield="name" 
    yfield="data"
    dfield="data">
</div>

其中，同一个X轴节点上对应多个Y轴的值,只需在SQL中返回多次结果集!
例如:统计每个分公司的试用期人数，转正人数

select 'chart2' tableid, '试岗' tbtitle, * from @TT where bizid = '试岗'
select 'chart2' tableid, '实习' tbtitle, * from @TT where bizid = '实习'
select 'chart2' tableid, '转正' tbtitle, * from @TT where bizid = '转正'

上述的tbtitle 用于区分不同的Y轴的值，并显示Y轴的值！

1.1.3. 折线图

<div id="chart3" 
source="tbcrossid1.v" 
style="padding-top: 30px;width:50%;height:300px;" 
caption="交叉表作为数据源" 
ebstype="chart" 
charttype="line" 
legend="yes" 
xfield="name" 
yfield="data"
dfield="data">
</div>

1.2. 图表数据

如下操作即可将数据加载至对应的报表中!在做图形报表时，关键因素在于：xfield，yfield，其中yfield 与 dfield 是相同的，这里是为了兼容处理，画报表时请将两个属性都加上

--这里声明的临时表可多个字段，但一定存在字段要与html中xfield 与 yfield 对应的属性相同，否则数据不能加载至报表中！
declare @temp table(name nvarchar(1000),data nvarchar(1000))
insert into @temp(name,data) select ......from ....

--将数据绑定至对应的报表中
select 'chart_1' tableid,* from @temp

1.3. 事件处理

平台调用方法：function beforeDrawChart(option, id, myChart) ,id为报表ID,例如：

function beforeDrawChart(option, id, myChart) {
    if (id == "zz") {
        option.series[0].center = [370, 200];
        option.series[0].radius = 150;
    }
    if (id == "rz") {
        option.series[0].center = [370, 200];
        option.series[0].radius = 150;
    }
    if (id == "lz") {
        option.series[0].center = [370, 200];
        option.series[0].radius = 150;
    }
}

[!NOTE|style:callout|label:注意事项]

图形报表的样式，颜色，字体等基本配置都可重定义!具体的配置项可参照：https://echarts.baidu.com/option.html#title 
平台“报表条件” 下的JS回调函数：
function onloadfinish(){} 加载完成后执行的函数；
通用函数：
function afterlaoded(){}:重新加载后可执行的函数；
function afterformloaded(){}：当模板加载完成后可执行的函数
function afterdataloaded(){}: 当数据加载完毕执行的函数