自定义图形组件
睿思BI系统中所有图形组件采用echarts开发，都定义在ext-config.xml中。图形组件都实现 com.ruisi.ext.engine.view.emitter.chart.ChartEmitter 接口，配置信息如下:
<chart shape="line" class="com.ruisi.ext.engine.view.emitter.chart.echarts.LineChart"/>
<chart shape="area" class="com.ruisi.ext.engine.view.emitter.chart.echarts.AreaChart"/>
<chart shape="bar" class="com.ruisi.ext.engine.view.emitter.chart.echarts.BarChart"/>
<chart shape="bubble" class="com.ruisi.ext.engine.view.emitter.chart.echarts.BubbleChart"/>
<chart shape="column" class="com.ruisi.ext.engine.view.emitter.chart.echarts.ColumnChart"/>
<chart shape="gauge" class="com.ruisi.ext.engine.view.emitter.chart.echarts.GaugeChart"/>
<chart shape="gauge2" class="com.ruisi.ext.engine.view.emitter.chart.echarts.GaugeChart2"/>
<chart shape="mgauge" class="com.ruisi.ext.engine.view.emitter.chart.echarts.GaugeChart3"/>
<chart shape="map" class="com.ruisi.ext.engine.view.emitter.chart.echarts.MapChart"/>
<chart shape="nestingPie" class="com.ruisi.ext.engine.view.emitter.chart.echarts.NestingPieChart"/>
<chart shape="pie" class="com.ruisi.ext.engine.view.emitter.chart.echarts.PieChart"/>
<chart shape="pie2" class="com.ruisi.ext.engine.view.emitter.chart.echarts.PieChart2"/>
<chart shape="radar" class="com.ruisi.ext.engine.view.emitter.chart.echarts.RadarChart"/>
<chart shape="scatter" class="com.ruisi.ext.engine.view.emitter.chart.echarts.ScatterChart"/>
<chart shape="scatterMap" class="com.ruisi.ext.engine.view.emitter.chart.echarts.ScatterMapChart"/>
<chart shape="wordcloud" class="com.ruisi.ext.engine.view.emitter.chart.echarts.WordCloudChart"/>
<chart shape="funnel" class="com.ruisi.ext.engine.view.emitter.chart.echarts.FunnelChart"/>
<chart shape="treeMap" class="com.ruisi.ext.engine.view.emitter.chart.echarts.TreeMapChart"/>
<chart shape="liquidFill" class="com.ruisi.ext.engine.view.emitter.chart.echarts.LiquidFillChart"/>
<chart shape="sexProportion" class="com.ruisi.ext.engine.view.emitter.chart.echarts.SexProportionChart"/>
<chart shape="baiduMap" class="com.ruisi.ext.engine.view.emitter.chart.echarts.BaiduMapChart"/>
<chart shape="sankey" class="com.ruisi.ext.engine.view.emitter.chart.echarts.SankeyChart"/>
<chart shape="capsule" class="com.ruisi.ext.engine.view.emitter.chart.echarts.CapsuleChart"/>
创建自定义图形组件过程如下:
1.继承 AbstractChartEmitter 类并实现ChartEmitter接口，如下：
package com.ruisi.ext.engine.view.emitter.chart;
import javax.servlet.jsp.JspException;
public class TestChart extends AbstractChartEmitter implements ChartEmitter {
@Override
public int createChartJS(boolean toJSON) {
//生成JSON
out.println(" {");
out.println(" top: 'center',");
out.println(" left: 'center',");
out.println(" series: [");
out.println(" {");
out.println(" type: 'pie',");
out.println(" radius: ['60%', '80%'],");
out.println(" avoidLabelOverlap: false,");
out.println(" labelLine: {");
out.println(" show: false");
out.println(" },");
out.println(" label: {");
out.println(" show: true,");
out.println(" position: 'outside',");
out.println(" formatter: 'f$function (params) { return `{a|${params.percent.toFixed(0)}%}`;}',");
out.println(" color: '#fff',");
out.println(" fontSize: 14,");
out.println(" rich: {");
out.println(" a: {");
out.println(" backgroundColor: 'rgba(0, 0, 0, 0.6)',");
out.println(" borderRadius: 4,");
out.println(" padding: 6");
out.println(" }");
out.println(" }");
out.println(" },");
out.println(" labelLine: {");
out.println(" show: true,");
out.println(" length: -5, // 设置引导线长度");
out.println(" length2: -10, // 设置引导线第二段长度");
out.println(" lineStyle: {");
out.println(" color: 'transparent'");
out.println(" }");
out.println(" },");
out.println(" startAngle: 0,");
out.println(" clockwise: true,");
out.println(" color: [");
out.println(" \"f$new echarts.graphic.LinearGradient(1, 1, 0, 0, [ { offset: 0, color: 'rgba(37, 190, 238, 1)' },{ offset: 1, color: 'rgba(37, 190, 238, 0)' } ])\",");
out.println(" \"f$new echarts.graphic.LinearGradient(0, 0, 1, 1, [ { offset: 0, color: 'rgba(35, 128, 238, 1)' }, { offset: 1, color: 'rgba(35, 128, 238, 0)' } ])\",");
out.println(" \"f$new echarts.graphic.LinearGradient(0, 0, 1, 1, [{ offset: 0, color: 'rgba(76, 210, 43, 1)' }, { offset: 1, color: 'rgba(76, 210, 43, 0)' } ])\"");
out.println(" ],");
out.println(" data: [");
//生成数据
String dataString = "";
for (int i = 0; i < dataList.size(); i++) {
Map<String, Object> map = dataList.get(i);
Object xcolValue = map.get(chart.getXcol());
Object ycolValue = map.get(chart.getYcol());
if (i >= config.getXcnt_Num()) {
break;
}
//饼图
dataString += "{ name: \""+ (chart.getXcol() == null ? "合计":xcolValue) +"\",";
dataString += " value: "+ ycolValue +"}";
if (i == (dataList.size() - 1) || i == config.getXcnt_Num() - 1){
}else{
dataString += ",";
}
}
out.println(dataString);
out.println(" ],");
out.println(" }");
out.println(" ]");
out.println(" }");
return 0;
}
}
2.把创建的类配置到 ext-config.xml 文件中。
<chart shape="test" class="com.ruisi.ext.engine.view.emitter.chart.echarts.TestChart"/>
其中shape 配置图形标识，class 配置图形类。
3.在图形类型的vue源码文件中添加 shape 为 test 的图形组件，源码文件为：src/view/portal/ChartDailog.vue。
在文件129行附近，添加图形选择代码，如下：
{cid:"25", cname:"自定义", type:"custom", show:false, children:[
//其中 maparea 属性表示地图使用的 地图JSON， 321200.json 是泰州地图
{img:"c82.gif", index:"1", shape:"map2", maparea:"321200", name:"泰兴化工分布图"},
{img:"c3.gif", index:"2", shape:"test", name:"演示自定义图形"},
]},
img表示自定义图形的图标，name 表示显示名称，shape 表示图形类型，和 ext-config.xml 中的配置一致。
请注意：用户自定义的图形，都放在type 为 custom 的 children 里面。
通过更改图形class类实现，也能更改系统的基础图形。