Echarts markPoint 动态数据添加,选择性查询
效果图:
![](https://images2015.cnblogs.com/blog/800044/201508/800044-20150830093517390-1217417951.png)
function GetData() { var placeList = [ // {name:'海门', geoCoord:[121.15, 31.89]} ] var year =document.getElementById("year").value; var provinceid =document.getElementById("sheng").value; var quota_1 =document.getElementById("quota_1").value; var quota_2 =document.getElementById("quota_2").value; var quota_3 =document.getElementById("quota_3").value; var quota_4 =document.getElementById("quota_4").value; var index = ""; if(quota_1 != ""){index = quota_1}; if(quota_2 != ""){index = quota_2}; if(quota_3 != ""){index = quota_3}; if(quota_4 != ""){index = quota_4}; $.ajax({ url:"./EnterpriseAnalysisFetcher.do?action=envmapdata", type:"POST", dataType:"JSON", async:false, data:{"year":year,"provinceid":provinceid, "index":index}, success: function(json){ placeList = json; } });
/**麻点图数据 * @param request * @param response * @throws Exception */ private void getEnvMapblackData(HttpServletRequest request, HttpServletResponse response) throws Exception { EnvDataMiniManager envDataMiniManager = (EnvDataMiniManager)Context.getBean(EnvDataMiniManager.class); int provinceid = getInt(request, "provinceid", 0); int year = getInt(request, "year", 0); String index = get(request, "index", ""); MarkPoint[] dataMinis = envDataMiniManager.getMarkPointEnvData(year, provinceid, index, null); output(JSONArray.toJSONString(dataMinis), response); //System.out.println(dataMinis); } public MarkPoint[] getMarkPointEnvData(int year, int provinceid, String index,DBSession session) throws JException { List<MarkPoint> list = new ArrayList<MarkPoint>(); if (session == null) { session = Context.getDBSession(); } IResultSet rs = null; try { Object[] paramObjects = new Object[]{}; int[] paramTypes = new int[]{}; String sql = "select b.cp_region, b.cp_lng,b.cp_lat from env_pollutiondata a,env_company b where a.pd_company_ID=b.ID and "+index+">0 "; if(year>0){ sql = sql + " and a.pd_year =?"; } if(provinceid>0){ sql = sql + " and a.pd_Province_ID =?"; } if(year>0&&provinceid>0){ paramObjects = new Object[]{year,provinceid}; paramTypes = new int[]{year,provinceid}; }else if(year>0){ paramObjects = new Object[]{year}; paramTypes = new int[]{year}; }else if(provinceid>0){ paramObjects = new Object[]{provinceid}; paramTypes = new int[]{provinceid}; } sql = sql+" GROUP BY a.pd_company_ID "; System.out.println(sql); //sql = "SELECT * FROM env_pollutiondata WHERE ID = 1"; //rs = session.executeQuery(sql, new Object[]{paramObjects}, new int[]{Types.DECIMAL}); rs = session.executeQuery(sql, paramObjects, paramTypes); System.out.println(sql); while (rs.next()) { MarkPoint mark = new MarkPoint(); mark.setName(rs.getString("cp_region")); mark.setGeoCoord(new float[]{rs.getFloat("cp_lng"),rs.getFloat("cp_lat")}); list.add(mark); } } catch (Exception e) { Logger.getProjLogger().error(e.getMessage(), e); return null; } finally { ResourceMgr.closeQuietly(rs); ResourceMgr.closeQuietly(session); } return list.toArray(new MarkPoint[0]); }
require( [ 'echarts', 'echarts/chart/bar' ,// 使用柱状图就加载bar模块,按需加载 'echarts/chart/map' ], function (ec) { // 基于准备好的dom,初始化echarts图表 var myChart = ec.init(document.getElementById('container1')); var option = { backgroundColor: '#1b1b1b', color: [ 'rgba(255, 255, 255, 0.8)', 'rgba(14, 241, 242, 0.8)', 'rgba(37, 140, 249, 0.8)' ], title : { text: '大规模MarkPoint特效', /* subtext: '纯属虚构', */ x:'center', textStyle : { color: '#fff' } }, legend: { orient: 'vertical', x:'left', data:['强','中','弱'], textStyle : {color: '#fff'} }, series : [ { name: '弱',type: 'map', mapType: 'china', itemStyle:{ normal:{ borderColor:'rgba(100,149,237,1)', borderWidth:1.5, areaStyle:{color: '#1b1b1b' } } }, data : [], markPoint : { symbolSize: 2, large: true, effect: { show: true }, data : (function(){ var data = []; var len = 3000; var geoCoord while(len--) { geoCoord = placeList[len % placeList.length].geoCoord; data.push({ name : placeList[len % placeList.length].name + len, value : 10, geoCoord : [ geoCoord[0] + Math.random() * 5 - 2.5, geoCoord[1] + Math.random() * 3 - 1.5 ] }) } return data; })()//data }//markPoint }, { name: '中', type: 'map', mapType: 'china', data : [], markPoint : { symbolSize: 3, large: true, effect : { show: true }, data : (function(){ var data = []; var len = 1000; var geoCoord while(len--) { geoCoord = placeList[len % placeList.length].geoCoord; data.push({ name : placeList[len % placeList.length].name + len, value : 50, geoCoord : [ geoCoord[0] + Math.random() * 5 - 2.5, geoCoord[1] + Math.random() * 3 - 1.5 ] }) } return data; })() } }, { name: '强', type: 'map', mapType: 'china', hoverable: false, roam:true, data : [], markPoint : { symbol : 'diamond', symbolSize: 6, large: true, effect : { show: true }, data : (function(){ var data = []; var len = placeList.length; while(len--) { data.push({ name : placeList[len].name, value : 90, geoCoord : placeList[len].geoCoord }) } return data; })() } } ]//series }; // 为echarts对象加载数据 myChart.setOption(option); } );