帆軟結合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的就是調樣式很麻煩。