Echarts檢視視覺化-學習筆記(努力更新中)
文章目錄
1. Echarts簡介
Echarts是一個視覺化工具，所謂的視覺化就是用圖說話，因為有時候用圖更容易表達資料。它提供了常規的折線圖、柱狀圖、散點圖、餅圖、K線圖，用於統計的盒形圖，用於地理資料視覺化的地圖、熱力圖、線圖，用於關係資料視覺化的關係圖、旭日圖等等。
2. 常見的資料視覺化庫
- D3.js：目前Web端評價最高的JavaScript視覺化工具庫。
- ECharts.js：百度出品的一個開源JavaScript資料視覺化庫。
- Highcharts.js：國外的前端資料視覺化庫，非商用免費，被許多國外大公司使用。
- AntV：螞蟻金服全新一代資料視覺化解決方案等等。
- Highcharts和Echarts就像是Office和WPS的關係。
- Tableau：也是一款視覺化工具。
3. Echarts第一個小案例
官網：https://echarts.apache.org/zh/index.html
-
下載並引入echarts.js檔案：
一樣的要去官網進行下載這個js檔案，它可以幫助我們生成各種各樣的圖表。下載之後便會有echarts.min.js檔案，當然，這個帶min是經過壓縮版的。下完之後引入到我們的專案中，放到js資料夾下，如圖：
然後在index.html中引入echarts外掛，如下程式碼：<script src="js/echarts.min.js"></script> -
準備一個具備大小的DOM容器，準備它是為了把圖表放進去，這個容器必須有寬度和高度。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .box{ width: 300px; height: 300px; border: 1px solid red; } </style> </head> <body> <script src="js/echarts.min.js"></script> <div class="box"></div> <!--有了這個容器，就可以把圖表丟在這裡面去--> </body> </html>注意這個容器要放在下面步驟的前面，是前面，否則會報錯。
-
初始化echarts例項，通過不同的例項化，可以生成不同的圖表(根據第四步的option)，這個圖表得有一個地方存著，所以它需要依賴於Dom容器。所以，如下程式碼：
<script> //初始化例項物件 echarts.init(dom容器); var myChart = echarts.init(document.querySelector(".box")); //例項的同時要告訴它Dom容器的位置，這樣以後這個例項物件最後所生成的圖表，就會在這個容器中進行顯示，只是告訴你我圖表出生的地方就是那個div，具體圖表是什麼型別的圖表，就得看第四步的配置了。 </script> -
指定配置項和資料(option)，可以展現不同的形狀。
這個option我們先從官網copy一下，先體驗一下，往後都是圍繞著這個option展開的，因為通過這個option可以展現出不同的圖表，之所以這個echarts例項可以產生各種各樣的圖表，主要是依靠option物件配置來的，所以option是非常重要的。先從官網小案例copy：https://echarts.apache.org/zh/tutorial.html#5 分鐘上手 ECharts// 指定圖表的配置項和資料 var option = { title: { text: 'ECharts 入門示例' }, tooltip: {}, legend: { data:['銷量'] }, xAxis: { data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"] }, yAxis: {}, series: [{ name: '銷量', type: 'bar', data: [5, 20, 36, 10, 10, 20] }] }; -
將配置項設定給echarts例項物件，將echarts物件根據你給的配置進行生效。
宣告的option物件必須要設定給echarts例項，而echarts例項又代表著某一個div容器，設定給echarts例項，就是設定給某個容器，只不過這個容器被echarts初始化之後就不是一個普通的容器，所以它會根據設定進來的資料進行解析，最終生成我們所看到的圖表。// 使用剛指定的配置項和資料顯示圖表。 myChart.setOption(option);
效果展示：
4. Echarts基礎配置
現在我們要對option裡面的屬性做個基礎的講解，可以拿官方的例子講解：https://echarts.apache.org/examples/zh/editor.html?c=line-stack。然後在後續學習中像echarts會用到的js，包括地圖js，在我百度網盤都有分享：https://pan.baidu.com/s/12KacUEjShNwsGs2LvOCdDg，提取碼是s61p。
4.1 title
好，首先引入我們眼簾的是title屬性，它是一個物件，因為它的值是由兩個{和}括起來的。它很簡單，就是設定圖表的標題，說明這個圖表要表達什麼資訊。
它支援\n換行，如圖：。
title詳解
注意上面紅色框的表示點選事件，就是當你點選標題時觸發的事件，那麼它觸發事件就得有一個函式，函式如下：
myChart.on('click',function(params){
console.log(params);
alert("我被點選了");
});
這個myChart就是由init例項出來的物件。
完整程式碼：
title: {
id:'head',//id屬性可用於在 option 或者 API 中引用元件
text: ['{a|折線圖}','{b|堆疊}'],// \n表示換行
left:100,//有left就有right，top，bottom
padding: 25,//值可以為陣列，陣列如果有四個元素，表示上右下左
show:true, //是否顯示標題
link:'https://www.baidu.com/',
target:'blank',//blank表示新視窗開啟，self表示當前視窗開啟，預設是blank
borderWidth:5,
borderColor:"blue",
borderRadius:15,
textStyle:{
color:'green',
//fontStyle:'italic',//值還有normal，oblique
//fontWeight:'bold',//值還有normal，lighter
fontFamily:'monospace',//字型樣式
fontSize:20,
lineHeight: 55,//行高
//textBorderColor:'yellow',
textShadowColor:'red',//陰影顏色要配合下面的textShadowBlur用，不然看不出效果
textShadowBlur:30, //表示陰影的模糊度
textShadowOffsetX:30, //讓陰影整體往右移，當然有x就有y
rich: //與上面text配合
{
//在這裡可以自定義富文字樣式
a:
{
color: 'blue',
fontSize:20 //就算外面設了fontSize為20，這裡依然沒效果
},
b:
{
color: 'red',
fontSize:20
}
}
},
textAlign:'center',//主副標題中間對齊
itemGap:200,//主副標題之間的距離
triggerEvent:true,//觸發事件，當點選標題時，不管主標題還是副標題，
// 當有link屬性一併存在時，先觸發link屬性，再觸發triggerEvent屬性
//下面是子標題
subtext:"副標題",
sublink:'https://www.hao123.com/',
subtarget:'blank',
subtextStyle:{
color:'#8A2BE2',
//align:'center',
}
},
4.2 tooltip
tooltip：翻譯過來就是"工具提示"，準確的說它是一個提示框元件，也就是說，它可以起到一個提示作用，如下圖：
沒錯，就是當我們滑鼠移上去的時候，所出現的提示，告訴你每週的情況，圖上很明顯是告訴你週二的情況。而這個tooltip裡面有個trigger屬性，trigger翻譯過來就是"觸發"，就是觸發方式，用什麼觸發呢？就是axis，那麼axis又是什麼？翻譯過來就是"軸"的意思，說到軸，我們是不是會想到橫軸和豎軸呀！但它並沒有具體表示是哪個軸，沒錯，axis就表示座標軸。連起來就是，它會根據你的座標軸去觸發提示框。回到上面，它是不是通過觸發橫座標的每一個座標來達到提示效果的呢？像這種，觸發的方式可不僅僅只有axis，它還有item和none，none就是什麼也不觸發，而item什麼意思呢，當我們把axis改為item時，如下圖：
tooltip詳情
注意一下formatter的值，如下：
完整程式碼：
tooltip: {
trigger: 'axis',
show:true,//如果為false表示不顯示提示框
triggerOn:'click',//點選時才出現提示框
enterable:false,//預設為false，為false表示可以點選提示框裡左邊有顏色的圓圈
//showDelay:5000,//單位毫秒，表示5秒後才出現提示框，前提是triggerOn為mousemove
borderRadius: 10,
formatter:"{b}",//formatter裡的內容會決定提示框裡的內容，可以接收字串和函式,如下：
//formatter:function(){
// return "haha";
//},
//formatter:function(arg){
// return arg[0].data;
//},
axisPointer:{//座標軸指示器
type:'cross',//取值有line(直線)，shadow(陰影)，none，cross(交叉)
label:{ //文字標籤
show:true,//設定為false，表示y軸刻度線和x軸的周幾不會顯示
color:'yellow',
//...
},
/*shadowStyle:{ //type為shadow時有效
//color:"red",
shadowBlur: 50,//圖片陰影的模糊大小
shadowColor:"yellow",
opacit:0.5//顏色透明度
}*/
crossStyle:{
color:"red",
type:'dotted',//取值有solid(實線)，dashed(虛線)，dotted(點線)
shadowBlur: 10
},
lineStyle:{
color:"green",
type:'dashed'
}
},
textStyle:{
color:'#FF00FF',
fontStyle:'italic'
}
},
4.3 legend
legend：legend翻譯過來就是傳奇，圖例，說明，解釋的意思，此處不是表示傳奇的意思，而是後三個意思，也就是圖例，說明，解釋，那什麼是圖例呢？
legend詳情
完整程式碼：
title: {
text: '折線圖堆疊',
z:2,
//zlevel:6
},
legend: {
data: ['郵件營銷', '聯盟廣告', '視訊廣告', "",'直接訪問', '搜尋引擎','搜jjj','搜aaa','搜bbb','搜尋引擎ccc'],
//上面data裡有一個""的資料，表示換行，但是因為下面type指定的型別是scroll，所以不起作用，換成plain即可
type:'scroll',//預設值是plain
show:true,//決定圖例是否隱藏
//orient:'vertical',//orient譯為朝向，如果為vertical，那麼圖例就會上下垂直排列，預設值是horizontal(水平的)
align:'right',//預設是left，它表示，圖例的文字和文字對應的圓圈交換位置
itemGap:10,//它表示圖例與圖例之間的間隔
z:3,//跟上面title對比，值越大，越在上面，如右圖，圖例哪個圓點在標題的上面，如果你的值比title小，如1，那麼就
//會在title的下面，會被"堆"字覆蓋。
//zlevel:5, //這個屬性跟z屬性基本上是一樣的，只不過zlevel的優先順序比z大，如果不給他們倆註釋的話，圖例的哪個圓點
//將會被"堆"字覆蓋。
left:-50,
borderWidth:2,
itemWidth:90, //如右圖，圓點的線變長了
itemHeight:20,//如右圖，圓點變大了
symbolKeepAspect:true,//如果圖示（可能來自系列的 symbol 或使用者自定義的 legend.data.icon）是 path:// 的形式，
//是否在縮放時保持該圖形的長寬比。
// 使用字串模板，模板變數為圖例名稱 {name}
formatter: 'a {name}',
// 使用回撥函式
formatter: function (name) {
return 'ab' + name;
},
selectedMode:true,//如果為false，那麼無法點選圖例，預設是true
inactiveColor:'#ccc', //圖例關閉時的顏色
selected: {//圖例選中狀態表,就是一出場郵件營銷的那條線是關閉的,可以看右圖的哪個表示郵件營銷的圓點變成了紅點
// 選中'系列1'
'聯盟廣告': true,
// 不選中'系列2'
'郵件營銷': false
},
textStyle:{},//略
tooltip: {
show: true //預設不顯示
},
data: [{// 注意右邊的圖例只有四個，也就是data裡的4個物件，如果不設定data，那麼它會自動的去下面series系列去找，
//包括搜尋引擎，如果指定data，就按這裡來，不會有"搜尋引擎"這個按鈕
name: '郵件營銷',
// 強制設定圖形為圓。
icon: 'circle',//值有rect，, 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none',也可指定網路上的
//圖片，格式：'image://http://xxx.xxx.xxx/a/b.png'
// 設定文字為紅色
textStyle: {
color: 'blue' //注意這是設定文字的顏色，不是設定圓點的顏色，圓點的顏色預設是系列中線的顏色
}
},{
name: '聯盟廣告',
// 強制設定圖形為圓。
icon: 'circle',
// 設定文字為紅色
textStyle: {
color: 'pink'
}
},{
name: '視訊廣告',
// 強制設定圖形為圓。
icon: 'circle',
// 設定文字為紅色
textStyle: {
color: 'red'
}
},{
name: '直接訪問',
// 強制設定圖形為圓。
icon: 'circle',
// 設定文字為紅色
textStyle: {
color: 'red'
}
}]
},
4.4 toolbox
toolbox：工具箱元件，有了它，可以把我們的圖表下載下來，另存為圖片等功能。feature表示特徵。
它不單單有匯出圖片，還有資料檢視，動態型別切換，資料區域縮放，重置五個工具。
toolbox詳情
完整程式碼：
toolbox: {
show:true,//預設是true，可以不寫
orient:'vertical',
itemSize:25,
itemGap:20,//工具欄 icon 每項之間的間隔。橫向佈局時為水平間隔，縱向佈局時為縱向間隔。
showTitle:true,//是否在滑鼠 hover 的時候顯示每個工具 icon 的標題。
feature: {
saveAsImage: {
title:'儲存為圖片111',
},
dataView:{ //資料檢視裡的資料可以更改，更改後右圖就會有變化
title:'資料檢視',
readOnly:true //為true表示不可編輯
},
restore:{ //還原就是還原到最初狀態(開廠預設設定)
title:'還原'
},
dataZoom:{ //資料區域縮放
title:{
zoom:'區域縮放',
back:'區域縮放還原'
}
},
//上面的物件裡面的物件體可以不寫，比如saveAsImage:{}
magicType:{ //動態型別切換
show:true,
type: ['line', 'bar', 'stack', 'tiled'],//表示你需要切換的元件
title:{
line:'切換為折線圖',
bar:'切換為柱形圖',
stack:'切換為堆積圖',
tiled:'切換為平鋪'
}
},
myTool1:{ //注意，自定義的工具名字，只能以 my 開頭，例如myTool1，myTool2：
show: true,
title: '自定義擴充套件方法',
icon:'image://https://himg.bdimg.com/sys/portraitn/item/385741726573e68898e7a59e686f6d65f8e7',
onclick: function (){
alert('hello！！')
}
}
},
emphasis:{ //譯為強調
iconStyle:{
borderColor:'red',
borderType : 'dashed'
}
},
tooltip: { // 和 option.tooltip 的配置項相同
show: true,
formatter:function (param) {
return '<div>' + param.title + '</div>'; // 自定義的 DOM 結構
},
backgroundColor: '#222',
textStyle: {
fontSize: 12,
},
extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);' // 自定義的 CSS 樣式
}
},
4.5 grid
grid：翻譯為"網格"。
它可以控制圖表的大小，因為網格佔據這整個圖表，那麼我們可不可以看到呢？其實可以的，就是在其裡面加上show:true，就可以看到了，為了看起來明顯，可以把xAxis和yAxis裡面的也加上show屬性，只不過他們的值是false，就是不顯示嘛，如圖：
通過left，right，bottom這三個值便可以控制，就是設定圖表跟外層Dom容器的距離。出來這種方式外，還有另一種方式，如下程式碼：
grid: {
containLabel: true,
show:true,
x:100,
y:100,
x2:200,
y2:100
},
問題來了，x，y，x2，y2表示什麼意思呢？
我們還可以直接定義width和height，比如width:400，height:300，如果把width改為'50%'，那麼它便會有自適應的效果，還有x，y這些同樣是支援百分比的。
好，還有一個屬性，叫做containLabel，它表示是否顯示刻度，如果為true，顯示，false為不顯示。
但是這麼發現不對勁，這麼變成00了，其實只要吧left的3%改為0%就可以了，就不會出現00了，因為如果containLabel為false的話，那麼left這種就不會考慮為標籤佔座，否則它往右移是以標籤為基準的往右移。
grid: {
left:30,
//left: '6%',
right: '4%',
bottom: '3%',
containLabel: true, //是否出現刻度值
show:true,//要想讓顏色，陰影生效，必須設為true
width:550,
backgroundColor:'pink',
borderColor:'red',
borderWidth:10,
shadowColor: 'yellow',
shadowBlur: 20,//值越大，陰影顏色越濃烈，blur為模糊
shadowOffsetX:50
},
4.6 xAxis
xAxis：axis表示座標軸，那麼xAxis就表示x軸，同理yAxis就表示y軸，那麼這裡就是設定x軸的相關配置。它裡面有個type屬性，值為category，翻譯過來就是"類別"的意思，這裡表示座標軸的型別為類目軸，設定類目軸需要給它定義data資料，比如週一，週二這些，也就是說設定為類目軸，那麼它的座標點所表示的資料會根據你的data資料來一一對應展示，如果不設定data，只是表明它是類目軸，那麼這條軸是沒有任何座標點的，如圖：
boundaryGap表示邊界間隙，如果為true，那麼x軸會跟y軸有間隙，如圖：
boundaryGap主要用於柱形圖，不然柱形圖會超出x軸，在下幾張圖有柱形圖可以看出。如果說我不想讓x軸在下面顯示，我想讓它在上面顯示怎麼辦，有個屬性叫position，值為top，也就是position:'top'，如下圖：
那麼對於字型樣式怎麼設定呢？如圖：
接下來介紹axisLine屬性，直譯過來就是座標線，很容易理解，不多說，如下圖：
axisLine裡面還有一個屬性叫onZero，直譯表示"在零處"，它的值是布林值，也就是說，如果是true，那麼橫座標會依附於0的位置，看圖：
如果改為false：
下一個屬性，axisTick：座標軸小標記，何謂小標記，如下圖：
詳細介紹請看下圖：
下一個，axisLabel：
再下一個，splitArea：
再再下一個，splitLine：
總結，下面的各個名詞都要記住：
4.7 yAxis
yAxis：它是y軸，它的型別是value，value表示值，我們看看它的y軸，是不是數字型的呀，好，那麼type目前就有兩個值了，一個是category(類目型)，一個是value(數值型，不指定數值區間，它會自動計算)，除了這兩個，還有，time(時間軸)和log，time表示時間，不用說，log表示對數軸，適用於對數資料，瞭解一下，其它的屬性，其實xAxis有哪些屬性，yAxis也是適用的，如果要說，可以說說boundaryGap，如果是數值型的boundaryGap，那麼它的留空策略就不是true和false，它應該是[0,0.5]，也就是boundaryGap:[0,0.5]，裡面的數值代表百分比，它代表什麼意思呢？第一個數字0，表示百分之零，不好解析，先解釋第二個，第二個0.5表示最大資料與最小資料的差所得的結果乘以十分之五(十分之五，或者說百分之50就是0.5)，也就是一半，如果是除，就是除2，得到的結果就是最大資料跟最頂端的最小距離，以圖說話：
還有針對y軸為數值型的，max屬性，比如：max:4000，表示最高座標就是4000，相反，有max就有min。對於k線圖而言，有個scale屬性：如下圖：
下一個屬性，splitNumber：它表示分段，就是數值型座標軸要分成幾段，根據max和min去分段。也就是(max-min)/分段數。
4.8 series
series：翻譯過來就是"系列"的意思，它決定著顯示那種型別的圖表，比如裡面有個type屬性為line，line就是線的意思，剛好我們的圖表是不是折線圖啊，如果把line改為bar，就是柱形圖，也就是說，series是一個陣列，陣列裡面是一個個物件，有多少個物件就有多少個item元素，經過上面的講解，我們已經知道item代表什麼了，那麼每個item裡面各自定義著它們的資訊，type屬性表示你要用什麼樣的方式去表達資料，是柱形圖？還是線形圖？，如下圖：
每一個物件裡面的資料屬性，表示了它的資料走向。name表示這個物件的名字，它的名字會呈現在圖例上面。stack表示資料堆疊，什麼是資料堆疊，如下圖：
也就是說，這5個物件，都是在前一個物件的高度堆積起來的，但前提是每一個物件的stack的值必須一樣，比如上面，值都是總量，否則，它會依次往前找，找到stack是一樣的值的時候，才會在它的基礎上堆積。如果把stack刪掉，資料就不會有堆疊的問題。
還有一個注意點，就是如果series裡面已經有name的值了，那麼legend裡面的data屬性可以刪掉。
上面不是有5個item嗎，那麼怎麼給他們換一種顏色？有個color屬性，它是在外面跟title，tooltip啊這些並列的，它的值是一個陣列，陣列裡面就是具體的顏色值了。
它不單單可以這樣設定顏色，還可以在series裡面設定顏色，如圖：
這樣就扯出裡series裡的itemStyle屬性，請看下圖詳解：
還有一個顏色填充屬性：
對應顏色填充，如果想讓顏色有一種漸變的效果，可copy以下程式碼：
areaStyle: { //顏色填充區域
//漸變色
color:new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset:0,
color:"red"//漸變的起始顏色
},
{
offset:1,
color:"rgba(1,132,213,0.1)" //漸變的結束顏色
}
],
false
),
shadowColor:"rgba(0,0,0,0.1)"
},
讓每個拐點的值顯示：
想下方顯示數值就加上position:"bottom"。
上圖的formatter可以是函式，如下程式碼：
formatter:function(params){
console.log(params);
return params.value;
}
如果我想讓滑鼠懸浮到拐點的時候才顯示數值，怎麼辦，如下圖：
如果只想顯示最大和最小，怎麼搞，如下：
多軸：
定義拐角點樣式，是圓形，還是正方形，或者三角形？如圖：
想讓拐點的符號變大，用symbolSize:10。還有符號的旋轉，還有開始的時候不顯示拐點，滑鼠經過才出現拐點，如下程式碼：
showSymbol:false,
拐點的樣式程式碼：
itemStyle:{
color:"#0184d5",
borderColor:"rgba(221,220,107,.1)",
borderWidth:12
}
如上會讓拐點看起來外面有一層光環。
如果想讓線看起來平滑一點，就用smooth:true即可。下面是高亮顯示系列，如下程式碼：
legendHoverLink:true,
//表示高亮，當滑鼠移到圖例上時，可以高亮顯示當前對應的系列
data屬性：
4.9 dataZoom
區域縮放dataZoom：toolbox也有區域縮放dataZoom，現在講的dataZoom是一個滑塊，或者是用滑鼠的滑輪來控制區域大小，它是對資料範圍過濾，x軸和y軸都可以擁有，它是一個陣列，意味著可以配置多個區域縮放器。
slider就是滑塊的意思，那麼還有一個是通過滑鼠滑輪來控制的是inside，這個瞭解即可，用的最多的是slider。上面說了dataZoom是一個陣列，那麼它還可以放一個物件，每一個物件就是一個區域縮放器，比如上圖x軸的那個就是一個區域縮放器，這樣的話dataZoom就有兩個物件，也就是兩個區域縮放器，一個是在x軸，一個在y軸，但是，具體這個縮放器作用到哪個軸，它是不知道的，所以，我們要對它進行指定：
5. 作業案例之折線圖
作業1
上圖我並沒有百分百還原，但差不多是一樣的，下面是原始碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box{
width: 1600px;
height: 500px;
border: 1px solid red;
}
</style>
</head>
<body>
<script src="js/echarts.min.js"></script>
<div class="box"></div> <!--有了這個容器，就可以把圖表丟在這裡面去-->
<script>
//初始化例項物件 echarts.init(dom容器);
var myChart = echarts.init(document.querySelector(".box"));
//指定配置項和資料
// 指定圖表的配置項和資料
option = {
title:{
text:"產品銷量",
subtext:"純屬虛構"
},
tooltip:{
trigger: "axis",
backgroundColor:"black",
textStyle:{
color: "white"
}
},
legend: {
},
xAxis: {
type:"category",
data:["週一","週二","週三","週四","週五","週六","週日"],
axisLine:{
lineStyle:{
color:"skyblue",
width:3
}
},
axisLabel:{
color:"black"
},
axisTick:{
length:20,
lineStyle:{
width:3
}
}
},
yAxis: {
type:"value",
position:"right",
axisLine:{
show: true,
lineStyle:{
color:"skyblue"
}
},
axisLabel:{
margin:-1300,
color:"black"
},
splitLine:{
lineStyle:{
color:["#F0F8FF","#3399FF","#F0F8FF","#CCFF33","#F0F8FF"]
}
}
},
series:[{
type:"line",
name:"產品A",
color:"#CC9933",
data:[11,11,{
value:15,
symbol:"rect",
symbolRotate:0,
label:{
show:true,
color:"#CC9933",
position:"bottom"
}
},13,12,13,10],
symbol:"arrow",
symbolSize: 15,
symbolRotate:-100,
itemStyle:{
normal:{
lineStyle:{
type:'dashed' //'dotted'點型虛線 'solid'實線 'dashed'線性虛線
}
}
}
},{
type:"line",
name:"產品b",
data:[3,5,3,5,2,3,6],
smooth:true,
color:"skyblue",
areaStyle:{
color:"pink"
},
label:{
show:true,
color:"skyblue"
}
}]
};
// 使用剛指定的配置項和資料顯示圖表。
myChart.setOption(option);
</script>
</body>
</html>
作業2
現在有個要求，增加兩個超連結，一個是2020，一個是2021，當你點選2020的時候，顯示2020的資料，點選2021的時候，顯示2021的資料，所以：
<div class="year">
<a href="javascript:;;">2020</a> <a href="javascript:;;">2021</a>
</div>
這樣的話，效果如圖：
還有準備資料：
//模擬後臺的資料
var yearData=[
//每一個物件的索引跟a標籤的索引一一對應，方便後面操作
{
year: "2020",
data:[ //兩個陣列是因為有兩條線，一條紅色的，一條青色的
[24,40,101,134,90,230,210,230,120,230,210,120],//給series的第一個物件的data
[40,64,191,324,290,330,310,213,180,200,180,79] //給series的第二個物件的data
]
},
{
year: "2021",
data:[
[123,175,112,197,121,67,98,21,43,64,76,38],
[143,131,165,123,178,21,82,64,43,60,19,34]
]
}
];
完整程式碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box{
width: 900px;
height: 500px;
border: 1px solid red;
}
a{
text-decoration: none;
}
</style>
</head>
<body>
<script src="js/echarts.min.js"></script>
<script src="js/jquery-3.5.1.js"></script>
<div class="year">
<a href="javascript:;;">2020</a> <a href="javascript:;;">2021</a>
</div>
<div class="box"></div> <!--有了這個容器，就可以把圖表丟在這裡面去-->
<script>
//模擬後臺的資料
var yearData=[
//每一個物件的索引跟a標籤的索引一一對應，方便後面操作
{
year: "2020",
data:[ //兩個陣列是因為有兩條線，一條紅色的，一條青色的
[24,40,101,134,90,230,210,230,120,230,210,120],
[40,64,191,324,290,330,310,213,180,200,100,79]
]
},
{
year: "2021",
data:[
[123,175,112,197,121,67,98,21,43,64,76,38],
[143,131,165,123,178,21,82,64,43,60,19,34]
]
}
];
//初始化例項物件 echarts.init(dom容器);
var myChart = echarts.init(document.querySelector(".box"));
//指定配置項和資料
// 指定圖表的配置項和資料
option = {
color:["#00f2f1","#ed3f35"],
title:{
text:"人員變化",
top:"10%"
},
tooltip: {
trigger: 'axis'
},
legend: {
top:'10%',
data: ['新增粉絲', '新增遊客'],
textStyle:{
color:"#4c9bfd"
},
right:"10%"
},
grid: {
top: '20%',
left: '5%',
right: '4%',
bottom: '20%',
containLabel: true,
show:true,
borderColor:"#012f4a"
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
axisTick:{
show:false
},
axisLabel:{
color:"#4c9bfd"
},
axisLine:{
show:false
},
splitLine:{
show:true,
lineStyle:{
color:"#012f4a"
}
}
},
yAxis: {
type: 'value',
axisTick:{
show:false
},
axisLabel:{
color:"#4c9bfd"
},
axisLine:{
show:false
},
splitLine:{
lineStyle:{
color:"#012f4a"
}
}
},
series: [
{
name: '新增粉絲',
type: 'line',
// data: [24, 40, 101, 134, 90, 230, 210,230,120,230,210,120],
data: yearData[0].data[0],
smooth:true
},
{
name: '新增遊客',
type: 'line',
data: yearData[0].data[1],
smooth:true
}
]
};
// 使用剛指定的配置項和資料顯示圖表。
myChart.setOption(option);
//注意要想點選成功要引入jquery
$(".year").on("click","a",function () {
//alert(1);
//console.log($(this).index());//看看你點的是哪個a標籤
//點選a的時候根據當前a的索引號找到對應yearData的相關物件
//console.log(yearData[$(this).index()])
var obj = yearData[$(this).index()];
option.series[0].data = obj.data[0];
option.series[1].data = obj.data[1];
myChart.setOption(option);//更換資料要重新渲染一次
})
</script>
</body>
</html>
6. 作業案例之散點圖
散點圖可以幫助我們推斷出變數間的相關性，比如變數和變數之間是一種正比的關係，這個變數與變數可以是身高和體重，一般來說，身高越高，體重越重，像這種關係，用散點圖怎麼表示呢？要明白，散點散點就是由很多個點組成的散點圖，這每一個點都有對應的座標，既然是座標，我們知道，如果我們要在圖表中點上一個點，是要根據它在x軸的位置和在y軸的位置表示的，也就是(x,y)，那麼x可以表示身高，y可以表示體重，所以，如果有四個人，四個人就有四個(x,y)，用陣列表示，這四個陣列再放到一個陣列裡，就變成了二維陣列，而散點圖恰好需要的就是二維陣列data。
但是上副圖是不是看起來怪怪的，看座標軸，發現他從0開始，如果我不想讓它從0開始，怎麼做呢？其實是scale:true，把它加上，其實在前面就已提到過了，如下圖：
option = {
xAxis: {
type:'value',
scale:true
},
yAxis: {
type:'value',
scale:true
},
series: [{
type: 'scatter',
symbolSize: 20,
data: [
[170, 80],
[164, 51],
[158, 50],
[174, 79],
[184, 90],
[180, 77],
[160, 49],
[177, 84],
[190, 96],
[150, 46],
[169, 47]
],
}]
};
散點圖的常見效果
-
氣泡效果：水中的氣泡，有大有小，那麼散點圖也一樣，在某某條件下他是大氣泡，某某條件下又是小氣泡，比如體重不合格的，就讓它呈現大氣泡，合格就原樣，哪這要怎麼做呢？
完整程式碼：option = { xAxis: { type:'value', scale:true }, yAxis: { type:'value', scale:true }, series: [{ type: 'scatter', symbolSize: function(arg){ //console.log(arg); //動態決定不同的散點值是多少 var height = arg[0] / 100; //arg為cm，除以100變為m var weight = arg[1]; //bmi= 體重kg / (身高m*身高m) 大於28代表肥胖 var bmi = weight / (height*height); if(bmi>28){ //代表肥胖 return 20; //右圖點大的哪個就是肥胖身材的 } return 10; }, data: [ [170, 90], [164, 51], [158, 70], [174, 79], [184, 90], [180, 77], [160, 49], [177, 84], [190, 126], [150, 46], [169, 47] ], }] };如果想讓大氣泡是一個顏色，小氣泡又是另一個顏色，怎麼弄？還是跟上面一樣，是一個函式，還是一樣在series中配置，記得在series是怎麼配置顏色的嗎，是不是在一個itemStyle物件裡配置的？其實道理都是一樣的：
-
漣漪效果：所謂的漣漪就是這個點線水波一樣，那麼我們就要把
type: 'scatter'，變成type: 'effectScatter'，這樣的話它一上場每個點就會像散發水紋一樣，如圖：
它是動畫效果，不是靜態的，但是我不想讓它每個點都散發水紋，我想讓滑鼠移上去某個點再散發，這要怎麼做呢？
完整程式碼：option = { xAxis: { type:'value', scale:true }, yAxis: { type:'value', scale:true }, series: [{ type: 'effectScatter', rippleEffect:{ //控制漣漪動畫的作用範圍 scale:5//值越大，漣漪動畫越大 }, showEffectOn:'emphasis',//預設值是render，控制滑鼠移入產生動畫 symbolSize: function(arg){ //console.log(arg); //動態決定不同的散點值是多少 var height = arg[0] / 100; //arg為cm，除以100變為m var weight = arg[1]; //bmi= 體重kg / (身高m*身高m) 大於28代表肥胖 var bmi = weight / (height*height); if(bmi>28){ //代表肥胖 return 20; //右圖點大的哪個就是肥胖身材的 } return 10; }, itemStyle:{ color:function(arg){ //console.log(arg); var height = arg.data[0] / 100; var weight = arg.data[1]; var bmi = weight / (height*height); if(bmi>28){ return "red"; } return "green"; } }, data: [ [170, 90], [164, 51], [158, 70], [174, 79], [184, 90], [180, 77], [160, 49], [177, 84], [190, 126], [150, 46], [169, 47] ], }] };
7. 作業案例之柱狀圖
有了上面的知識，學習柱形圖也很簡單，有些東西都是通用的，現在來介紹柱形圖方面的知識，先看官網的某個案例：https://echarts.apache.org/examples/zh/editor.html?c=bar-tick-align
一看，需要注意的是series裡的type和barWidth,其它的上面已經介紹過了，如下圖：
bar代表柱形圖，line代表折線圖，這裡要分清，跟bar相關的屬性是barWidth，柱形的寬度，不用說，更詳細請看下圖。
下一個，左右拖動工具：
對於上副圖的左右滑動，寬度可能會隨著滑動變大，可以用barMaxWidth對其做限制，寫在series裡，程式碼如下：
barMaxWidth:"60px", //最大不要超過60%
說到寬度，應該是柱形與柱形之間的距離，有兩個名詞，一個是barGap和barCategoryGap，第一個是不同series(就是series裡面的兩個物件)，同一個刻度線上的柱形之間的距離。第二個是同一個series上，柱形與柱形的距離。
最後，如果柱形圖的x軸和y軸交換，就變成了條形圖，本質上還是柱形圖，如圖：
8. 作業案例之進度柱狀圖
網址：https://echarts.apache.org/examples/zh/editor.html?c=bar-y-category
完整程式碼：
var myColor=["#1089E7","#F57474","#56D0E3","#F8B448","#8B78F6"];
option = {
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
show:false
/*type: 'value',
boundaryGap: [0, 0.01]*/
},
yAxis: [
{
type: 'category',
data: ['HTML5', 'CSS3', 'JAVASCRIPT', 'VUE', 'NODE', 'JQUERY'],
axisLine:{
show:false
},
axisTick:{
show:false
},
inverse:true //反向座標，不然HTML5在最底下
},
{
type: 'category',
data: [702,350, 610, 793, 664, 700],
axisLine:{
show:false
},
axisTick:{
show:false
},
inverse:true
}
],
series: [
{
name: '條',
type: 'bar',
data: [70, 34, 60, 78, 69, 71],
itemStyle:{
normal:{
barBorderRadius:10,
color:function(params){//params存的是2011年的六個柱子(物件)的索引號
//console.log(params);
//注意列印出來的params裡面有dataIndex屬性，index是索引的
//意思，從0開始，右圖有六個柱子，那麼索引就是0~5，
//剛好跟上面的myColor的陣列索引是一致的，那麼就可以來完成
//五彩繽紛的柱子了。
return myColor[params.dataIndex];
}
},
},
barCategoryGap:30, //柱子之間的距離,barGap是同一個型別下的柱子的距離
//barWidth:14 //柱子的寬度
//圖形上的文字標籤
label:{
normal:{
show:true,
position:"inside",//inside表示圖形內顯示
formatter:"{c}%"//{c}會自動解析data裡面的資料
}
},
yAxisIndex:0
},
{
name: '框',
type: 'bar',
data: [100, 100, 100, 100, 100, 100],
itemStyle:{
color:"none",
borderColor:"#00c1de",
borderWidth:3,
barBorderRadius:15
},
yAxisIndex:1
}
]
};
9. 作業案例之餅圖
首先，開啟網址：https://echarts.apache.org/examples/zh/editor.html?c=pie-doughnut，如圖：
完整程式碼：
option = {
tooltip: {
trigger: 'item',//axis是針對直角座標系的，否則，將沒有提示框元件
formatter: '{a} <br/>{b}: {c} ({d}%)' //這裡的{a}在tooltip那裡已經講過了
},
legend: {
orient: 'vertical', //垂直顯示
left: 10,
//data: ['直接訪問', '郵件營銷', '聯盟廣告', '視訊廣告', '搜尋引擎'],//可以省略，因為可以看
//series裡面的資料
itemWidth:10,
itemHeight:10,
//bottom:10
textStyle:{
//color:"red",
fontSize:"16"
}
},
series: [
{
name: '訪問來源',
type: 'pie', //pie表示餅圖
radius: ['50%', '70%'],//直角座標系是通過grid來修改圖表的大小的，那麼此處
//餅圖是通過radius來修改餅圖大小的，數值的第一個50%表示餅圖的內部半徑，
//第二個70%表示外部圓的半徑，如右圖:
//如果我把50%改為0%，就成了真正意義上的餅圖
center:["60%","50%"],//這個可以修改餅圖的位置，此處為居中
avoidLabelOverlap: false,
//avoidLabelOverlap是否啟用防止標籤重疊策略，預設開啟，在標籤擁擠重疊的情況下會挪動各個標籤的位置，防止標籤間的重疊。
label: { //label為標籤，就是給每個系列貼上一個標籤，別人一看就知道誰誰誰
show: false, //表示對應的標籤一上來是不顯示的，要跟下面emphasis裡的label做對比
/*position: 'center'*/ //表示中間顯示
},
emphasis: {//emphasis這東西，我們在前面都有接觸過，
//在講散點圖也好，series，toolbox這些都有涉及到emphasis，經過對比，
//它們的共同點都是當滑鼠移入到某個item的時候，觸發的事件，起到了一種
//強調的作用，那麼右圖是不是這個道理呢？當我們移入到餅圖的item，也就是
//外面的哪些圈圈，你一移入，在餅圖的外圍就會有對應的文字來強調你是"搜尋引擎"
//還是啥的，沒錯，像這種外圍提示資訊在滑鼠移入的時候就是在emphasis裡面配置的，如果我們把
//它給註釋掉的話，滑鼠移進去就不會有外圍文字的提示資訊了，所以，以後遇到emphasis的時候
//就要注意了，它跟你滑鼠移入有關，起到的是一個強調作用。
label: {
show: true,//當滑鼠移進去從上面label屬性的show為false就是不顯示變為顯示，如右圖的"搜尋引擎"
fontSize: '30',
fontWeight: 'bold'
}
},
labelLine: { //連線線
show: true
},
data: [
{value: 335, name: '直接訪問'},
{value: 310, name: '郵件營銷'},
{value: 234, name: '聯盟廣告'},
{value: 135, name: '視訊廣告'},
{value: 1548, name: '搜尋引擎'}
]
}
]
};
接下來是餅形圖的升級，叫南丁格爾玫瑰圖，網址：https://echarts.apache.org/examples/zh/editor.html?c=pie-roseType
經過了跟普通餅形圖的對比，發現南丁格爾玫瑰圖多了一個roseType屬性，因為有了這個屬性，才會呈現出南丁格爾效果。
option = {
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b} : {c} ({d}%)'
},
legend: {
left: 'center',
/*top: 'bottom',*/
//data: ['rose1', 'rose2', 'rose3', 'rose4', 'rose5', 'rose6', 'rose7', 'rose8']
},
series: [
{
name: '半徑模式', //是通過圓的半徑來表示每一個模組的大小
type: 'pie',
radius: [20, 110], //[內圓半徑，外圓半徑]
center: ['25%', '50%'],
roseType: 'radius',//radius表示以半徑的形式來展示,這個是重點，可以形成南丁格爾玫瑰圖
label: {
show: false
},
emphasis: {
label: {
show: true
}
},
data: [
{value: 10, name: 'rose1'},
{value: 5, name: 'rose2'},
{value: 15, name: 'rose3'},
{value: 25, name: 'rose4'},
{value: 20, name: 'rose5'},
{value: 35, name: 'rose6'},
{value: 30, name: 'rose7'},
{value: 40, name: 'rose8'}
]
},
{
name: '面積模式',
type: 'pie',
radius: [30, 110],
center: ['75%', '50%'],
roseType: 'area',//radius表示以面積的形式來展示
labelLine:{
length:100,//length是連結圖形的線條
length2:30 //是與length拼接的那條線，右圖中水平的那條線
},
data: [
{value: 10, name: 'rose1'},
{value: 5, name: 'rose2'},
{value: 15, name: 'rose3'},
{value: 25, name: 'rose4'},
{value: 20, name: 'rose5'},
{value: 35, name: 'rose6'},
{value: 30, name: 'rose7'},
{value: 40, name: 'rose8'}
]
}
]
};
10. 跟隨螢幕縮放適配
比如：
這個圖表並沒有隨著螢幕的縮小而縮小，進行自適應，那麼怎麼讓其自適應呢，讓它隨著頁面的變化進行自動適配？
window.addEventListener("resize",function () {
this.myChart.resize(); //如果不起作用，試著把外層盒子的寬度去掉，不要寫固定值
})
像這樣就ok了。
11. 學習案例之雷達圖
雷達圖又稱為蜘蛛網圖，將多個緯度的資料量對映到起始於同一個圓心的座標軸上，結束於圓角邊緣，然後將同一組的點使用線連線起來。它適用於多維度資料集，比如遊戲人物有多個指標，什麼攻擊值呀，輸出值呀等等這些。表示一個物體在多個緯度之下的綜合資訊。比如：
上面5個評分，就有5個緯度，5個緯度在雷達圖就是5個角，那麼我們怎麼用雷達圖來表示上圖的資料呢？網址：https://echarts.apache.org/examples/zh/editor.html?c=radar，開啟這個網址，根據它做改造，完成雷達圖。
特點：雷達圖可以用來分析多個緯度的資料與標準資料的對比情況，通過它不僅可以看到自身的情況指標還可以跟其它人進行對比，比如上述的華為跟中心的對比。
12. 學習案例之儀表盤
儀表盤主要用在進度把控以及資料範圍的監測。比如用汽車儀表盤，用儀表盤來監控商品庫存的情況等等，它可以更直觀的表現出某個指標的進度或實際情況。網址：https://echarts.apache.org/examples/zh/editor.html?c=gauge，開啟該網址，進行改造，程式碼如下：
完整程式碼：
option = {
tooltip: {
formatter: '{a} <br/>{b} : {c}%'
},
series: [
{
name: '庫存指標',
type: 'gauge', //翻譯過來叫"測量"，此處代表該圖表是儀表盤
detail: {formatter: '{value}%'},
startAngle:180,//預設是225，startAngle要大於endAngle
endAngle:-90, //預設是-45
splitNumber:2,//如右圖0~50,50~100
data: [
//一個物件表示一個指標，兩個物件就表示兩個指標
{
value: 97,
name: '庫存量',
itemStyle:{ //控制指標的樣式
/* color:"blue"*/
}
},
/*{
value: 50,
name: '庫存量',
itemStyle:{ //控制指標的樣式
color:"pink"
}
}*/
],
axisTick:{
show:true,
splitNumber:10,//0~50分10段,50~100也分為10段，因為上面splitNumber分為了兩段，所以每一段又分10段
length:18,
lineStyle:{
color:"width"
}
},
axisLabel:{
show:true,
formatter:function(arg){
switch(arg+""){
case '0':return "非常弱";
case '50':return "弱";
case "100":return "強";
}
}
/*dformatter:function(arg){ //注意這不是formatter，而是dformatter，如果是這樣，就只是顯示數字
switch(arg+""){
case '50':return "弱";
case "100":return "強";
}
}*/
},
/*min:50,
max:150*/
//max和min是控制儀表盤的數值範圍的，預設是0~100
splitLine:{//表示分割線，0~50,50~100。那麼50哪裡就是分割線
show:true,
length:50,
lineStyle:{
width:15
}
},
pointer:{
color:"auto"//auto表示直接去所指向的區域取色
},
title:{
show:true,
offsetCenter:['-65%',-30]//表示[x,y],這裡表示往左偏移百分之65，往上偏移30px
},
detail:{
backgroundColor:"yellow",
offsetCenter:['-60%',50],
formatter:"{value}%"
}
}
]
};
13. 地圖(包括疫情實時圖，點亮城市)
製作地圖，首先要引入china.js檔案，沒有就去下載，然後引入：
<script src="js/china.js"></script>
有了它，我們就不用像下面這麼麻煩了。
引入完之後，第二步，就是在series中，type為map，map就是地圖，當然這還不夠，你還要告訴它是哪種地圖？如下：
像這樣，一個簡單的地圖就出來了。
在上面的基礎上我們疊加一個熱度圖，比如像各省份GDP大小，疫情實時地圖，重災區的顏色深，非重災區的顏色淺，這要怎麼做，下面是完整程式碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box{
/* width: 900px;*/
height: 500px;
border: 1px solid red;
}
</style>
</head>
<body>
<script src="js/echarts.min.js"></script>
<script src="js/jquery-3.5.1.js"></script>
<script src="js/china.js"></script>
<div class="box"></div> <!--有了這個容器，就可以把圖表丟在這裡面去-->
<script language="javascript">
//初始化例項物件 echarts.init(dom容器);
var myChart = echarts.init(document.querySelector(".box"));
//指定配置項和資料
// 指定圖表的配置項和資料
option = {
title:{
text:"中國疫情實時地圖"
},
tooltip: {
},
series: [
{
name:"確診人數",
type:"map",
map:"china",
label:{
//控制對應省份地區的漢字
show:true //預設為false,如果為true，那麼地圖一渲染包括各個省份的名字也跟隨地圖一起渲染
//既然是控制漢字的，那麼像color，fontSize，formatter啊這些它都有，我這裡就不列出來了。
},
zoom:1, //控制地圖的放大縮小，如果你覺得地圖有點小，可以使用zoom屬性來對它放大，如果值為2，表示2倍放大
roam:true, //控制滾輪放大縮小
itemStyle:{ //控制地圖版塊的
areaColor:"pink" //預設色為#eee
},
emphasis:{//控制滑鼠滑過之後的背景色和字型顏色
itemStyle:{
areaColor:"#83b5e7" //預設是不是yellow
},
},
data:[ //用來展示後臺給的資料的，裡面是如果是每一個物件，那麼每個物件都得有name和value
]
}
],
visualMap:[{
type:"piecewise", //翻譯過來是分段，預設分成5條
show:true,
/* splitNumber:4,*/
pieces:[
{min:10000},
{min:1000,max:9999},
{min:100,max:999},
{min:10,max:99},
{min:1,max:9}
],
//align:"right", //這樣的話，方塊在右邊，字在左邊，預設是left
//orient:"horizontal" //控制是橫向顯示還是豎向顯示
//showLabel:false 為false表示數字被隱藏了
inRange:{
//symbol:"circle"
symbol:"rect",
color:["#ffc0b1","#9c0505"]
},
itemWidth:20,
itemHeight:10
}]
};
myChart.setOption(option);
window.addEventListener("resize",function () {
this.myChart.resize(); //如果不起作用，試著把外層盒子的寬度去掉，不要寫固定值
})
$.ajax({
type: "post",
url: "https://interface.sina.cn/news/wap/fymap2020_data.d.json?_=1580892522427",
dataType: "jsonp",//返回的資料型別格式,jsonp解決跨域問題
success: function(data){
var list = data.data.list.map(item=>({name:item.name,value:item.value}));//map是迴圈遍歷方法，我們只要name和value
option.series[0].data = list;
myChart.setOption(option);
},
error:function(msg){
console.log(msg);
}
});
</script>
</body>
</html>
把上面程式碼copy到你編輯器就可以了，自己再去改改，效果如下：
可以對照著http://cov.aiiyx.cn來看，它是中國疫情資料視覺化圖。
練習：利用搜尋框輸入城市名來點亮城市
通過疫情實時地圖，我們基本對地圖的相關配置有了瞭解，再通過一個點亮城市的練習，加深理解，下面是我自己寫的程式碼實現，供大家參考：
專案結構(在前面有網盤連結，供下載)：
完整程式碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="layui/css/layui.css" media="all" type="text/css">
<style>
.box{
/* width: 900px;*/
height: 700px;
border: 1px solid red;
}
</style>
</head>
<body>
<script src="js/echarts.min.js"></script>
<script src="js/jquery-3.5.1.js"></script>
<script src="js/china.js"></script>
<script src="layui/layui.js"></script>
<div class="box"></div> <!--有了這個容器，就可以把圖表丟在這裡面去-->
<script language="javascript">
var diming = "";
// 一種後臺傳來的資料帶有座標，一種是前臺儲存座標
var data = [
{name:'泉州'},
{name:'廈門'},
{name:'福州'},
{name:'延安'},
{name:'瀋陽'},
{name:'蘇州'},
{name:'杭州'},
{name:'廣州'}
];
// 位置對應的座標
var geoCoordMap = {
"泉州":[118.58,24.93],
"廈門":[118.1,24.46],
"福州":[119.3,26.08],
"延安":[109.47,36.6],
"瀋陽":[123.38,41.8],
"蘇州":[120.62,31.32],
"杭州":[120.19,30.26],
"廣州":[113.18,23.10]
};
// 將{name:xx}處理成{name:xx,value:[x,y]};x,y為橫縱座標
var convertData = function (data) {
var res = [];
for (var i = 0; i < data.length; i++) {
var geoCoord = geoCoordMap[data[i].name];
if (geoCoord) {
res.push({
name: data[i].name,
value: geoCoord
});
}
}
return res;
};
//初始化例項物件 echarts.init(dom容器);
var myChart = echarts.init(document.querySelector(".box"));
var zData = convertData(data);
var option = {
backgroundColor: '#404a59',
tooltip: {
trigger: 'item',
formatter: function (params) {
return params.name;
}
},
geo: {
map: 'china',
roam:true, //控制滾輪放大縮小
label: {
emphasis: {
show: false //不顯示省份名稱
}
},
itemStyle: {
normal: {
areaColor: '#fff',
borderColor: '#000'
},
emphasis: {
areaColor: '#f00'
}
}
},
series: [
{
type: 'effectScatter',
showEffectOn:'render',//預設值是render，控制滑鼠移入產生動畫
coordinateSystem: 'geo',
data: zData,
// 控制點大小
symbolSize: function (arg) {
layui.use(['form'], function(){
var form = layui.form;
//監聽提交
form.on('submit(demo1)', function(data){
var city = data.field.title;//輸入的城市名
diming = city;
myChart.setOption(option);
return false;
});
})
if(diming==""){
return 2;
}else{
var zuobiao = geoCoordMap[diming];//根據城市名拿到座標
if(arg.toString() == zuobiao.toString()){
return 30;
}else{
return 2;
}
}
},
label: {
normal: {
show: false
},
emphasis: {
show: false
}
},
itemStyle: {
color:"red",
emphasis: {
borderColor: 'yell',
borderWidth: 1
}
}
}
]
};
myChart.setOption(option);
</script>
<div style="margin: 10px auto;border: 1px solid red;width: 400px">
<form class="layui-form" action="">
<div class="layui-form-item">
<label class="layui-form-label">城市：</label>
<div class="layui-input-block" style="width: 200px">
<input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="請輸入城市名" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1">定位</button>
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
</div>
</div>
</form>
</div>
</body>
</html>
14. echarts涉及到的英文名
| 英文名 | 中文名 |
|---|---|
| Line | 折線圖 |
| Bar | 柱狀圖 |
| Scatter | 散點圖 |
| EffectScatter | 連漪效果的散點圖 |
| Pie | 餅圖 |
| Candlestick | K線圖(又叫蠟燭圖，陰陽線) |
| Map | 地圖 |
| Gauge | 儀表盤 |
| Funnel | 漏斗圖 |
| Axis | 座標軸 |
| Grid | 網格 |
| Tooltip | 提示 |
| Legend | 圖例 |
| DataZoom | 資料區域縮放 |
| Toolbox | 工具箱 |
| series | 資料系列 |
| visualMap | 視覺對映元件 |
| emphasis | 強調；重視；重要性 |
| symbol | 符號；比如線上的每個拐點 |
| smooth | 光滑的 |
| Label | 標籤 |
| boundary | 邊界 |
| Gap | 差距 |
| category | 類別 |
| … | … |
相關文章
- 學習筆記 檢視筆記
- 物化檢視學習筆記筆記
- 【持續更新...】ECharts學習筆記Echarts筆記
- oracle學習筆記——檢視、索引Oracle筆記索引
- python資料視覺化——echartsPython視覺化Echarts
- Echarts學習筆記Echarts筆記
- iOS學習筆記04 檢視切換iOS筆記
- DG學習筆記(12)_相關檢視筆記
- 檢視提交歷史 —— Git 學習筆記 11Git筆記
- IOS 學習筆記（1） 檢視UIViewControlleriOS筆記UIViewController
- IOS 學習筆記(3) 檢視UITabbarControlleriOS筆記UItabBarController
- Django 視覺化Web展示 學習Django視覺化Web
- Echarts資料視覺化，easyshu圖表整合。Echarts視覺化
- 使用Echarts來實現資料視覺化Echarts視覺化
- 機器視覺學習筆記：臉性別識別視覺筆記
- angular學習筆記(十七)-路由和切換檢視Angular筆記路由
- 透視黑客學習筆記黑客筆記
- “平板電視”學習筆記筆記
- 資料視覺化學習資源視覺化
- 深度學習（視覺化卷積核）深度學習視覺化卷積
- 視覺化對話樹編輯筆記視覺化筆記
- 視覺學習（三）視覺
- Vue全家桶+Echarts資料視覺化實踐VueEcharts視覺化
- H5 Echarts視覺化圖表的使用H5Echarts視覺化
- Adaptive AUTOSAR 學習筆記 5 - 架構 - 物理檢視APT筆記架構
- Solidity語言學習筆記————27、檢視函式Solid筆記函式
- IOS 學習筆記(2) 檢視UINavigationControlleriOS筆記UINavigationController
- angular學習筆記(八)-控制檢視顯示隱藏Angular筆記
- Oracle動態效能檢視學習筆記(1)_v$sysstatOracle筆記
- Oracle動態效能檢視學習筆記(3)_v$undostatOracle筆記
- Oracle動態效能檢視學習筆記(4)_v$rollstatOracle筆記
- Oracle動態效能檢視學習筆記(6)_v$filestatOracle筆記
- Oracle動態效能檢視學習筆記(7)_v$sessionOracle筆記Session
- 全面學習MySQL中的檢視(2) 指定檢視建立者MySql
- 專案管理學習筆記之二視覺化專案,關注結果 (轉)專案管理筆記視覺化
- 音視訊學習筆記（一）筆記
- 「深度學習系列」CNN模型的視覺化深度學習CNN模型視覺化
- 視覺化學習：WebGL的基礎使用視覺化Web