帆软结合Echarts

最近需要用到帆软开发BI报表，帆软提供了很多图形界面，定制化程度很高。

为了大屏能够适应分辨率，我选择了决策报表，使用的是绝对布局+适应区域的区域缩放规则。在这个基础上开始写CSS样式和JS。比较困难的地方就在于有些图表帆软无法制作出来，比如县市的3D地图，只能通过Echarts的方式引入，对接Echarts需要注意页面的加载时机的问题。

我选择的方式是拖拽一个图表块，但不对其引入数据，直接写事件代码。

var html = '<div class="kong_title2" ><h2>医疗收入构成-机构</h2></div><div class="mapdiv" id="mapDiv" style="width:90%;height:90%"></div>';
setTimeout(() => { 
	var mapdiv = $('div[widgetname="SEX"]');
	mapdiv.append(html);

}, 0);


setTimeout(function(){
	$(function () {
			var myChart = echarts.init(document.getElementById('mapDiv'));
				var  option = {
			color:["#0cceff","#ffaf06","#0566e8","#ec5f68","#907aff","#e9e635","#0194e9","#FE9900","#049CE6"],
		    tooltip: {
		        trigger: 'item',
		        formatter: "{b}<br/> {c}(万) ({d}%)"
		    },
		    legend: {
		        orient: 'vertical',
		        x: 'left',
		        show:false,
		        data:['花垣县人民医院','妇幼保健院']
		    },
		    series: [
		       {
		            name:'',
		            type:'pie',
		            radius: ['0%', '20%'],
					label:{
						color:"#fff"
						
					},
				labelLine:{  
                normal:{  
                    length:0.1
                }  
            },
		            data:[
		              
		                {value:251, name:'卫生院'},
		                {value:147, name:'县医院'}

		            ]
		        },
		        {
		            name:'',
		            type:'pie',
		            radius: ['40%', '60%'],
					label:{
						color:"#fff"
					},
		           data:[
		                {value:335, name:'民族中医院'},
		                {value:310, name:'人民医院'},
		              /*  {value:234, name:'搜索引擎'},*/
		                {value:135, name:'妇幼保健院'},

		            ]
		        }
		    ]
			}

				myChart.setOption(option);
		 window.addEventListener("resize",function(){
	    		myChart.resize();
	    		});



			});

	
		 },500)

		

选择初始化后加载就可以了，要注意的问题就是通过settimeout的方式来做，不然就画不出来。总体来说还是很easy的就是调样式很麻烦。