如果在线设计报表的方式满足不了您的应用场景,您可以进行自定义图表开发。
云程平台引入了Ant的g2plot组件,可以直接使用。
另外云程平台将目前18种报表控件进行了封装,也可以直接使用。 控件标签如下。
基础柱状图 | <ych-column-chart/> |
分组柱状图 | <ych-grouped-column-chart/> |
堆叠柱状图 | <ych-stacked-column-chart/> |
百分比堆叠柱状图 | <ych-percent-stacked-column-chart/> |
雷达图 | <ych-radar-chart/> |
基础折线图 | <ych-line-chart/> |
多折线图 | <ych-grouped-line-chart/> |
基础面积图 | <ych-area-chart/> |
堆积面积图 | <ych-stacked-area-chart/> |
基础条形图 | <ych-bar-chart/> |
堆积条形图 | <ych-stacked-bar-chart/> |
百分比堆积条形图 | <ych-percent-stacked-bar-chart/> |
分组条形图 | <ych-grouped-bar-chart/> |
基础饼图 | <ych-pie-chart/> |
环图 | <ych-donut-chart/> |
漏斗图 | <ych-funnel-chart/> |
仪表盘 | <ych-gauge-chart/> |
刻度仪表盘 | <ych-meter-gauge-chart/> |
参数说明:
chartData:Object类型。参数内的对象同g2plot一样
使用示例:
<ych-column-chart :chartData=”chartData”/>
chartData示例:
{
“chartCode”:”goods_order_user_01″,
“width”:400,
“height”:400,
“title”:{
“text”:”用户下单金额”,
“visible”:true,
“alignTo”:”left”
},
“label”:{
“visible”:true,
“position”:”top”,
“formatter”:null
},
“legend”:{
“position”:”right-top”,
“visible”:true
},
“tooltip”:{
“visible”:true,
“fields”:null
},
“forceFit”:true,
“color”:[
“#0f759c”,
“#26a2cb”,
“#65d1fc”,
“#a0a7e6”,
“#c4ebad”,
“#96dee8”
],
“events”:null,
“stateManager”:{
“enabled”:false,
“viewCode”:””,
“stateName”:[
]
},
“xField”:{
“name”:”user_name”,
“desc”:”用户姓名”
},
“yField”:{
“name”:”总金额(元)”,
“desc”:”总金额(元)”
},
“xAxis”:{
“visible”:true,
“title”:{
“visible”:false,
“text”:”用户姓名”
},
“tickCount”:null
},
“yAxis”:{
“visible”:true,
“min”:0,
“max”:null,
“title”:{
“visible”:true,
“text”:”总金额(元)”
},
“grid”:{
“visible”:true,
“line”:{
“style”:{
“stroke”:”gray”,
“lineDash”:[
3,
3
],
“opacity”:0.3
}
}
}
},
“data”:[
{
“总金额(元)”:48000,
“user_name”:”谢霆锋”
},
{
“总金额(元)”:42175,
“user_name”:”华晨宇”
}
]
}