1. 程式人生 > >echart 地圖 地圖上的點 靜態markPoint,動態markPoint

echart 地圖 地圖上的點 靜態markPoint,動態markPoint

 	myChart = echarts.init(document.getElementById('mainChart'));
        var option;
        option = {
        	    title : {
        	        text: '全國主要城市空氣質量(pm2.5)',
        	        subtext: 'data from PM25.in',
        	        sublink: 'http://www.pm25.in',
        	        x:'center'
        	    },
        	    tooltip : {
        	        trigger: 'item'
        	    },
        	    legend: {
        	        orient: 'vertical',
        	        x:'left',
        	        data:['pm2.5']
        	    },
        	    dataRange: {
        	        min : 0,
        	        max : 500,
        	        calculable : true,
        	        color: ['maroon','purple','red','orange','yellow','lightgreen']
        	    },
        	    toolbox: {
        	        show : true,
        	        orient : 'vertical',
        	        x: 'right',
        	        y: 'center',
        	        feature : {
        	            mark : {show: true},
        	            dataView : {show: true, readOnly: false},
        	            restore : {show: true},
        	            saveAsImage : {show: true}
        	        }
        	    },
        	    series : [
        	        {
        	            name: 'pm2.5',
        	            type: 'map',
        	            mapType: 'china',
        	            hoverable: false,
        	            roam:true,
        	            data : [],
        	            markPoint : {//資料全是markPoint
        	                symbolSize: 20,       // 標註大小,半寬(半徑)引數,當圖形為方向或菱形則總寬度為symbolSize * 2
        	                itemStyle: {
        	                    normal: {
        	                        borderColor: '#87cefa',
        	                        borderWidth: 1,            // 標註邊線線寬,單位px,預設為1
        	                        label: {
        	                            show: false
        	                        }
        	                    },
        	                    emphasis: {
        	                        borderColor: '#1e90ff',
        	                        borderWidth: 5,
        	                        label: {
        	                            show: false
        	                        }
        	                    }
        	                },
        	                effect : {
        	                    show: true,
        	                    shadowBlur : 0
        	                },
        	                data : [
        	                    {name: "海門", value: 9},
        	                    {name: "鄂爾多斯", value: 12},
        	                ],
```````````````````````````````geoCoord: {
                ```````````````"海門":[121.15,31.89],
                ````````````````"鄂爾多斯":[109.781327,39.608266]
                               }
        	            },//end markPoint
        	           
        	        }//end series[0],
        	        ,
        	        {
        	            name: 'top5',
        	            type: 'map',
        	            mapType: 'china',
        	            hoverable: false,
        	            roam:true,
        	            data : [],
        	            markPoint : {//資料全是markPoint
        	                symbolSize: 20,       // 標註大小,半寬(半徑)引數,當圖形為方向或菱形則總寬度為symbolSize * 2
        	                itemStyle: {
        	                    normal: {
        	                        borderColor: '#1e90ff',
        	                        borderWidth: 1,            // 標註邊線線寬,單位px,預設為1
        	                        label: {
        	                            show: false
        	                        }
        	                    },
        	                    emphasis: {
        	                        borderColor: '#1e90ff',
        	                        borderWidth: 5,
        	                        label: {
        	                            show: false
        	                        }
        	                    }
        	                },
        	                effect : {
        	                    show: true,
        	                    shadowBlur : 0
        	                },
        	                data : [
        	                    {name: "海門", value: 9},
        	                    {name: "鄂爾多斯", value: 12},
        	                ]
        	            },//end markPoint
        	           
        	        }//end series[0]
        	    ]
      
        	};
        	    
        	                    
    	myChart.setOption(option);
        

注意:geoCoord可放在series裡的任意位置,只要有一個就好

1.動態閃點,由markPoint的以下語句實現:

 effect : {
                           show: true,
                           shadowBlur : 0
                       },

相關推薦

echart 地圖 地圖 靜態markPoint動態markPoint

myChart = echarts.init(document.getElementById('mainChart')); var option; option = { title : {

百度地圖 label新增選事件顯示提示資訊

      百度地圖的marker新增點選事件是: marker.addEventListener("click", function(){ this.open

動態SQL是什麽??什麽是靜態SQL動態SQL的動態體現在哪裏???

等於 我們 dad var print 動態生成 sca user pan 首先,所謂SQL的動態和靜態,是指SQL語句在何時被編譯和執行,二者都是用在SQL嵌入式編程中的,這裏所說的嵌入式是指將SQL語句嵌入在高級語言中,而不是針對於單片機的那種嵌入式編程。在某種高級語

【設計模式】代理模式:靜態代理動態代理spring aop

spring 實現接口 找到 master 代碼 -s result java 統一 代理模式分為靜態代理和動態代理。我們拿鏈家來舉例子,我們本人是真實的對象,有真實的業務需求:需要去找房子;鏈家是中介,是代理類,他來幫我執行找房子的這個操作。 靜態代理:   1.實現一個

[bzoj1095][ZJOI2007]Hide 捉迷藏 分樹動態分治

stream 情況下 定義 添加節點 每一個 divide 兩個 動態 十分 【bzoj1095】[ZJOI2007]Hide 捉迷藏 2015年4月20日7,8876 Description 捉迷藏 Jiajia和Wind是一對恩愛的夫妻,並且他們有很多孩子

bzoj3924 [Zjoi2015]幻想鄉戰略遊戲 分樹動態

stream print 無法 經濟 -- body del 分數 int 【BZOJ3924】[Zjoi2015]幻想鄉戰略遊戲 Description 傲嬌少女幽香正在玩一個非常有趣的戰略類遊戲,本來這個遊戲的地圖其實還不算太大,幽香還能管得過來,但是不知道為

靜態動態

pac 代碼 post 頭文件 tab clas 動態庫 sage 生成 庫文件是已經編譯好的二進制代碼。這個二進制代碼可以是動態的,如 .so 也可以是靜態的,如 .a ,如果是動態的,則你最後生成的程序文件在運行時,需要這個動態庫的支持,如果是靜態的,則你最後生成的

(轉)靜態編譯動態編譯靜態連結庫動態連結庫

1.定義 LIB檔案中包含函式程式碼本身,在編譯時直接將程式碼加入程式當中。稱為靜態連結庫static link library。 LIB包含了函式所在的DLL檔案和檔案中函式位置的資訊(入口),程式碼由執行時載入在程序空間中的DLL提供,稱為動態連結庫dynamic link libr

java中代理靜態代理動態代理以及spring aop代理方式實現原理統一彙總 Spring中AOP的兩種代理方式(Java動態代理和CGLIB代理)

若代理類在程式執行前就已經存在,那麼這種代理方式被成為 靜態代理 ,這種情況下的代理類通常都是我們在Java程式碼中定義的。 通常情況下, 靜態代理中的代理類和委託類會實現同一介面或是派生自相同的父類。 一、概述1. 什麼是代理我們大家都知道微商代理,簡單地說就是代替廠家賣商品,廠家“委託”代理為

Spring裡的aop實現方式和原始碼分析 java中代理靜態代理動態代理以及spring aop代理方式實現原理統一彙總

使用"橫切"技術,AOP把軟體系統分為兩個部分:核心關注點和橫切關注點。業務處理的主要流程是核心關注點,與之關係不大的部分是橫切關注點。橫切關注點的一個特點是,他們經常發生在核心關注點的多處,而各處基本相似,比如許可權認證、日誌、事務。AOP的作用在於分離系統中的各種關注點,將核心關注點和橫切關注點分離開來。

Mybatis(四):MyBatis核心元件介紹原理解析和原始碼解讀 java中代理靜態代理動態代理以及spring aop代理方式實現原理統一彙總

Mybatis核心成員 Configuration        MyBatis所有的配置資訊都儲存在Configuration物件之中,配置檔案中的大部分配置都會儲存到該類中 SqlSession         &

java的三種代理模式:靜態代理動態代理cglib代理

原文:https://segmentfault.com/a/1190000011291179 一、代理模式介紹 代理模式是一種設計模式,提供了對目標物件額外的訪問方式,即通過代理物件訪問目標物件,這樣可以在不修改原目標物件的前提下,提供額外的功能操作,擴充套件目標物件的功能。 簡言之,代

靜態代理動態代理和CGLIB代理模式

代理模式 一、概述   代理是一種模式,提供了對目標物件的間接訪問方式,即通過代理訪問目標物件。如此便於在目標實現的基礎上增加額外的功能操作,前攔截,後攔截等,以滿足自身的業務需求,同時代理模式便於擴充套件目標物件功能的特點也為多人所用。 二、圖形描述 三、程式碼

設計模式---代理模式從例項看靜態代理動態代理CGLIB

前言   最近完成了自己的個人部落格專案,要繼續學習Spring了,AOP用的是動態代理,今天特地好好理解一下代理模式 路線 靜態代理 jdk動態代理 CGLIB動態代理 寫在前面   代理模式和裝飾器模式,實現路線都是實現特地的介面,然後增加一些功能,那麼

代理(一)靜態代理動態代理

昨天面試碰到了面試官問spring的時候,問完ioc,然後下個問題我以為是aop,後來才聽清是動態代理,感覺回答的不是太好,也是好久不接觸 1.靜態代理 代理模式也就委託模式。 三個角色: 1. Subject抽象主題角色:介面 2. RealSubject具體主題角色:介面的實現類,業務邏輯的具體

靜態代理動態代理Cglib代理三種代理模式

靜態代理,動態代理,Cglib代理三種代理模式 1.代理模式     代理(Proxy)是一種設計模式,提供了對目標物件另外的訪問方式;即通過代理物件訪問目標物件.這樣做的好處是:可以在目標物件實現的基礎上,增強額外的功能操作,即擴充套件目標物件的

iOS 靜態動態庫與 Framework 淺析

靜態庫與動態庫的區別 首先來看什麼是庫,庫(Library)說白了就是一段編譯好的二進位制程式碼,加上標頭檔案就可以供別人使用。 什麼時候我們會用到庫呢?一種情況是某些程式碼需要給別人使用,但是我們不希望別人看到原始碼,就需要以庫的形式進行封裝,只暴露出標頭檔案。另外

IOS-靜態動態庫與 Framework

靜態庫與動態庫的區別 首先來看什麼是庫,庫(Library)說白了就是一段編譯好的二進位制程式碼,加上標頭檔案就可以供別人使用。 什麼時候我們會用到庫呢?一種情況是某些程式碼需要給別人使用,但是我們不希望別人看到原始碼,就需要以庫的形式進行封裝,只暴露出標頭

Android-Fragment(基本知識靜態載入動態載入)

1.回顧    上篇瞭解了和學習了 Andorid 的webView 的使用 2.重點    (1)Fragment基本知識    (2)Fragment 靜態載入    (3)Fragment 動態

動態庫、靜態庫編譯測試:含靜態庫連結動態庫、靜態動態庫連結靜態庫、動態

本文的目的是測試各種型別庫的編譯後的使用效果,包括庫又連結其他庫的編譯方法,使用方法,依賴性等。 太長不看版:請跳至文章最後的總結對比表。 一。內容包含: ①靜態庫libbb.a依賴靜態庫libaa.a的測試; ②靜態庫libbb.a依賴動態庫libaa.so的測試;