Echarts 快速上手
- 引入 echarts.js 檔案
- 準備一個呈現圖表的盒子
- 初始化echarts實體物件
- 準備配置項
- 將配置項設定給echarts實體物件
<div style='width: 600px; height: 400px;'></div>
<script src="./lib/echarts.js"></script>
<script>
// 基于準備好的dom，初始化echarts實體
let myChart = echarts.init(document.querySelector('div'));
// 指定圖表的配置項和資料
let option = {
title:{
text:'ECharts 入門實體',
link:'https://jiaqicoder.com',
textStyle:{
color:'pink',
fontStyle:'normal'
}
},
xAxis:{
type:'category', // 類目軸
data:['襯衫','羊毛衫','雪紡衫','褲子']
},
yAxis:{
type:'value', // 數值軸
},
series:[{
name:'銷量',
type:'bar', //line pie
data:[5,10,15,20]
}]
}
// 使用剛指定的配置項和資料顯示圖表，
myChart.setOption(option);
</script>
相關配置：
- xAxis：直接坐標系中的x軸
- yAxis：直角坐標系中的y軸
- series：系列串列，每個系列通過type決定自己的圖表型別
- title：標題組件，包含主標題和副標題，
通用配置
通用配置指的就是任何圖表都能使用的配置，
標題 title
-
文字樣式
title:{ text:'成績展示', textStyle:{ color:'red', fontSize:'28px', fontWeight:800, }, }, -
標題邊框
borderWidth:5, borderColor:'blue', borderRadius:5 -
標題位置
title:{ text:'成績展示', textStyle:{ color:'red', fontSize:'28px' }, borderWidth:5, borderColor:'blue', borderRadius:5, left:100, top:20, },top的值可以是像20這樣的具體像素值，可以是像'20%'這樣相對于容器高寬的百分比，也可以是'top','middle','bottom'，如果
top的值為'top','middle','bottom'，組件會根據相應的位置自動對齊，
提示 tooltip
tooltip：提示框組件，用于配置滑鼠滑過或者點擊圖表時的顯示框，
-
觸發型別：trigger （可選）
-
'item'資料項圖形觸發，主要在散點圖，餅圖等無類目軸的圖表中使用，
-
'axis'坐標軸觸發，主要在柱狀圖，折線圖等會使用類目軸的圖表中使用，
-
'none'什么都不觸發，
-
-
觸發時機：triggerOn （可選）
-
'mousemove'滑鼠移動時觸發，
-
'click'滑鼠點擊時觸發，
-
'mousemove|click'同時滑鼠移動和點擊時觸發，
-
-
格式化：formatter
提示框浮層內容格式器，支持字串模板和回呼函式兩種形式，
字串模板：
模板變數有
{a},{b}，{c}，{d}，{e}，分別表示系列名，資料名，資料值等， 在 trigger 為'axis'的時候，會有多個系列的資料，此時可以通過{a0},{a1},{a2}這種后面加索引的方式表示系列的索引， 不同圖表型別下的{a}，{b}，{c}，{d}含義不一樣， 其中變數{a},{b},{c},{d}在不同圖表型別下代表資料含義為：- 折線（區域）圖、柱狀（條形）圖、K線圖 :
{a}（系列名稱），{b}（類目值），{c}（數值）,{d}（無） - 散點圖（氣泡）圖 :
{a}（系列名稱），{b}（資料名稱），{c}（數值陣列）,{d}（無） - 地圖 :
{a}（系列名稱），{b}（區域名稱），{c}（合并數值）,{d}（無） - 餅圖、儀表盤、漏斗圖:
{a}（系列名稱），{b}（資料項名稱），{c}（數值）,{d}（百分比）
tooltip:{ trigger:'axis',// 'item' triggerOn:'click', formatter:'{b} 的成績是 {c}', //{b}（類目值），{c}（數值） }
回呼函式格式：
支持回傳 HTML 字串或者創建的 DOM 實體，
第一個引數
arg是 formatter 需要的資料集tooltip:{ trigger:'axis',// 'item' triggerOn:'click', formatter:function(arg){ console.log(arg); // 可以列印看看 有什么值 return `${arg[0].name}的分數是 ${arg[0].data}`; // 回傳值將會呈現在頁面中 } }, - 折線（區域）圖、柱狀（條形）圖、K線圖 :
工具按鈕 toolbox
內置有匯出圖片，資料視圖，動態型別切換,資料區域縮放，重置五個工具，
toolbox:{
feature:{
saveAsImage:{}, // 保存為圖片
dataView:{}, //資料視圖
restore:{}, // 重置功能
dataZoom:{}, // 區域縮放
magicType:{
type:['line','bar'] // 切換圖表型別
}
}
},
圖例 legend
legend：圖例，用于篩選系列，需要和series配合使用，
- legend中的 data是一個陣列
- legend中的data的值需要和series陣列中某組資料的name值一致
series: [
{
name: '語文成績',
type: 'bar',
data: [98, 88, 78, 80]
},{
name:'數學成績',
data:[42,55,99,88],
type:'bar'
}
],
legend:{
data:['語文成績','數學成績'], // 如果series中的name有值時，legend中的data可以不寫
}
ECharts的常用圖表
- 柱狀圖 bar
- 折線圖
- 散點圖
- 餅圖
- 地圖
- 雷達圖
- 儀表盤圖
柱狀圖
實作步驟
-
ECharts 最基本的代碼結構：
引入js檔案，設定DOM容器，初始化物件，設定options
-
x軸資料：
資料1：[‘張三’,‘李四’,‘王五’,‘趙六’]
-
y軸資料：
資料2：[88,92,79,79]
-
圖表型別：
在series下設定 type:bar
<body>
<div style="width: 600px;height: 400px;"></div>
<script src="./lib/echarts.js"></script>
<script>
let myCharts = echarts.init(document.querySelector('div'));
myCharts.setOption({
title: {
text:'成績'
},
xAxis: {
type: 'category',
data: ['張三','李四','王五','趙六']
},
yAxis: {
type: 'value'
},
series: [{
name: '成績',
data: [5, 10, 15, 20],
type: 'bar'
}],
});
</script>
</body>
常見效果
-
標記：
-
最大值 最小值（用markPoint來標記點）
series: [{ name: '成績', data: [5, 10, 15, 20], type: 'bar', markPoint:{ data:[{ type:'max', name:'最大值' },{ type:'min', name:'最小值' }] } }]
-
平均值(markLine)
```js
series: [{
name: '成績',
data: [5, 10, 15, 20],
type: 'bar',
markPoint:{
data:[{
type:'max',
name:'最大值'
},{
type:'min',
name:'最小值'
}]
},
markLine:{
data:[
{
type:'average',name:'平均值'
}
]
}
}],
```
-
顯示：
-
數值顯示(label)
series: [{ name: '成績', data: [5, 10, 15, 20], type: 'bar', markPoint:{ data:[{ type:'max', name:'最大值' },{ type:'min', name:'最小值' }] }, markLine:{ data:[ { type:'average',name:'平均值' } ] }, label:{ show:true, } }],
-
柱寬度(barWidth)
series: [{ name: '成績', data: [5, 10, 15, 20], type: 'bar', markPoint:{ data:[{ type:'max', name:'最大值' },{ type:'min', name:'最小值' }] }, markLine:{ data:[ { type:'average',name:'平均值' } ] }, label:{ show:true, position:'inside' }, barWidth:'50%' // 調整為默認寬度的50% }], -
橫向柱狀圖
將柱狀圖變為橫向的：
xAxis: { type: 'value' }, yAxis: { data: ['張三', '李四', '王五', '趙六'], type: 'category', }
-
折線圖
實作步驟
-
ECharts 最基本的代碼結構：
引入js檔案，設定DOM容器，初始化物件，設定options
-
x軸資料：
資料1：[‘1月’,‘2月’,‘3月’,‘4月’,‘5月’,‘6月’]
-
y軸資料：
資料2：[88,92,79,79,39,99]
-
圖表型別：
在series下設定 type: line
let myChart = echarts.init(document.querySelector('div'));
myChart.setOption({
title:{
text:'康師傅方便面銷量',
textStyle:{
color:'blue'
}
},
xAxis:{
data:['1月','2月','3月','4月','5月','6月'],
type:'category'
},
yAxis:{
type:'value',
},
series:{
name:'康師傅的銷量',
type:'line',
data:[35,29,38,88,69,89],
},
tooltip:{
trigger:'item',
formatter:'{b}的銷量為{c}'
}
})
常見的效果
-
標記
-
最大值 最小值 markPoint
series:{ name:'康師傅的銷量', type:'line', data:[35,29,38,88,69,89], markPoint:{ data:[ {type:'max'}, {type:'min'} ] }, }, -
平均值 markLine
series:{ name:'康師傅的銷量', type:'line', data:[35,29,38,88,69,89], markPoint:{ data:[ {type:'max'}, {type:'min'} ] }, markLine:{ data:[ {type:'average'} ] } }[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-iKYaJfli-1632987640708)(C:\Users\singhand\AppData\Roaming\Typora\typora-user-images\image-20210924153332983.png)]
-
標注區間 markArea
series:{ name:'康師傅的銷量', type:'line', data:[35,29,38,88,69,89], markPoint:{ data:[ {type:'max'}, {type:'min'} ] }, markLine:{ data:[ {type:'average'} ] }, markArea:{ data:[ [ {xAxis:'1月'}, // 開始月份 {xAxis:'2月'}, // 結束月份 ], [ {xAxis:'3月'}, // 開始月份 {xAxis:'5月'}, // 結束月份 ], ] } },
-
-
線條控制：
-
平滑 smooth
series:{ name:'康師傅的銷量', type:'line', data:[35,29,38,88,69,89], smooth:true },
-
線條樣式 lineStyle
series:{ name:'康師傅的銷量', type:'line', data:[35,29,38,88,69,89], smooth:true, lineStyle:{ color:'green', type:'dotted', //solid dashed } }, -
填充風格 areaStyle
注意和markArea的區別，
series:{ name:'康師傅的銷量', type:'line', data:[35,29,38,88,69,89], smooth:true, lineStyle:{ color:'green', type:'dotted', //solid dashed }, areaStyle:{ color:'pink' } },
全部代碼：A Pen by liujiaqi222 (codepen.io)
-
緊挨邊緣 boundaryGap
默認和邊緣是存在距離的，注意此時bundaryGap的是放在 xAxis中的，
xAxis: { data: ['1月', '2月', '3月', '4月', '5月', '6月'], type: 'category', boundaryGap:false, // 設定為無間隙 },
-
脫離0值比例縮放 scale
如果數值相差無幾，且數值較大，此時發現y軸的坐標依舊從0開始，
此時，就可以將scale屬性的值設定為true，允許坐標軸縮放，
yAxis: { type: 'value', scale:true },
-
堆疊圖 （stack的屬性值要設定為相同的）
如果兩條不同的線，他們的數值波動較大就會出現如下的重疊情況，此時容易讓人眼花繚亂，
因此可以將兩條線的stack屬性值設定為同一個值（任意設定），此時第一條仍然為第一條線，第二條線則為原來兩條線的總和（疊加），
series: [{ name: '康師傅的銷量', type: 'line', data: [3091, 900, 300, 2006, 1510, 1813], stack: 'all', // stack屬性值相同的serie，后面的serie的值將會疊加在前一個serie的值 // 第二條線 }, { name: '', type: 'line', data: [2000, 2328, 3282, 230, 1889, 1123], stack: 'all', }],
-
散點圖
散點圖可以幫助我們推斷變數間的相關性，
實作步驟
-
引入js檔案，創建DOM容器，初始化物件，設定option
-
x軸資料和y軸的資料：二維陣列
陣列1：[[身高1,體重1],[身高2,體重2],[身高3,體重3]]
-
圖表型別：
在series下設定type:scatter
xAxis和yAxis的type都要設定為value
const myChart = echarts.init(document.querySelector('div')); myChart.setOption({ xAxis: { type: 'value', scale:true }, yAxis: { type: 'value', scale:true }, series: [{ data: axisdata, type: 'scatter' }] })
常見的效果
-
氣泡圖效果不同
-
散點的大小不同
-
散點的顏色不同
series: [{ data: axisdata, type: 'scatter', // symbolSize:10 ,// 改變散點的大小 // 不同的元素，散點的大小不同 symbolSize: function (arg) { const height = arg[0]; const weight = arg[1]; if ((weight / Math.pow(height / 100, 2) > 25)) { return 15; } return 5; }, // 控制樣式 itemStyle: { // color:'green' color: function (arg) { const height = arg.data[0]; const weight = arg.data[1]; if ((weight / Math.pow(height / 100, 2) > 25)) { return 'pink'; } return 'blue'; } } }]
-
-
漣漪影片效果
type: effectScatter
series: [{ data: axisdata, type: 'effectScatter', showEffectOn:'emphasis', // render（頁面加載完成后顯示） emphasis(滑鼠滑過的時候顯示) rippleEffect:{ scale:5 }, }]
直角坐標系的常用配置
直角坐標系圖表：柱狀圖 折線圖 散點圖
配置1：網格grid
grid 是用來控制直接坐標系的布局和大小，
grid:{
show:true, // 顯示grid
borderWidth:10, // 邊框
borderColor:'pink', //邊框顏色
// grid的位置和大小
top:120,
left:120,
width:600,
height:140,
},
配置2：坐標軸axis
坐標軸分為x軸和y軸，一個grid中最多有兩種位置的x軸和y軸，
-
坐標軸型別type
value：數值軸，自動從目標資料中讀取資料
category：類目軸，該型別需要通過data設定類目資料
-
顯示位置 position
xAxis：可取值為top或者bottom
yAxis：可以取值left或者right
配置3：區域縮放 dataZoom
dataZoom 用于資料縮放，對資料范圍過濾，x軸和y軸都可以擁有，
dataZoom 是一個陣列，意味著可以配置多個區域縮放器，
-
type
slider：滑塊
inside：內置，依靠滑鼠滾輪或者雙指縮放
dataZoom:[{ type: 'inside' // slider 滑塊 inside：內置，依靠滑鼠滾輪或者雙指縮放 }], -
指明 dataZoom 作用的坐標軸
xAxisIndex:設定縮放組件控制的是哪個x軸，一般寫0即可
yAxisIndex:設定縮放組件控制的是哪個y軸，一般寫0即可
dataZoom: [ { // slider 滑塊 inside：內置，依靠滑鼠滾輪或者雙指縮放 type: 'slider', xAxisIndex:0 }, { type: 'slider', yAxisIndex:0 } ], -
指明初始狀態的縮放情況
start：資料視窗范圍的起始百分比
end：資料視窗范圍結束的百分比
dataZoom: [ { // slider 滑塊 inside：內置，依靠滑鼠滾輪或者雙指縮放 type: 'slider', xAxisIndex:0 }, { type: 'slider', yAxisIndex:0, start:0, end:50 //指的是最高點的50% } ],
餅圖
餅圖可以很好地幫助用戶快速了解不同分類的資料占比情況，
實作步驟
-
ECharts 最基本的代碼結構：
引入js檔案，設定DOM容器，初始化物件，設定options
-
資料準備：
[{name:'淘寶',value:11232},{name:'閑魚',value:5632},{name:'京東',value:7885},{name:'拼多多',value:4632}] -
圖表型別：
在series下設定type:pie
const myChart = echarts.init(document.querySelector('div')); myChart.setOption({ series:[{ type:'pie', data:[{name:'淘寶',value:11232},{name:'閑魚',value:5632},{name:'京東',value:7885},{name:'拼多多',value:4632}] }] });
常見效果
-
顯示數值
label.formatter
series:[{ type:'pie', data:[{name:'淘寶',value:11232},{name:'閑魚',value:5632},{name:'京東',value:7885},{name:'拼多多',value:4632}], label:{ // 是否顯示標簽 show:true, //默認為true //決定文字顯示的內容 // formatter:'{b}-{c}-{d}%', // 淘寶-11232-28.23% formatter:function(arg){ return `${arg.name}-${arg.value}`; } } }]
-
圓環
設定兩個半徑
radius:['40%','80%']series: [{ type: 'pie', data: [{ name: '淘寶', value: 11232 }, { name: '閑魚', value: 5632 }, { name: '京東', value: 7885 }, { name: '拼多多', value: 4632 }], // 20代表20px；20%代表相對于其容器的高度或者寬度較小的值的一半 radius: ['40%', '80%'], // 較小的圓半徑為40%，較大的為80% }]
-
南丁格爾圖：
roseType:'radius'myChart.setOption({ series: [{ type: 'pie', data: [{ name: '淘寶', value: 11232 }, { name: '閑魚', value: 5632 }, { name: '京東', value: 7885 }, { name: '拼多多', value: 4632 }], roseType: 'radius' //南丁格爾圖 餅圖的每塊半徑都不一樣 }] });
-
選中效果
// 設定為single 選中的一部分會偏離圓點一小段 選中其他的之前的選中塊又會回來 // selectedMode:'single' selectedMode:'multiple', // 選中其他塊，偏離不會回來 // 設定偏離的距離 selectedOffset:30
地圖
地圖可以幫助我們從宏觀的角度快速地分析出不同地理位置上的資料差異，官網檔案
地圖圖表的使用方式：
-
百度地圖Api
需要申請百度地圖的 access key
-
矢量地圖
需要準備矢量地圖的資料
實作步驟
-
ECharts 最基本的代碼結構：
引入js檔案，設定DOM容器，初始化物件，設定options
-
準備中國的矢量地圖json檔案，放到json/map/的目錄下
-
使用ajax獲取china.json
-
在回呼函式中向echarts全域物件注冊地圖json資料
echarts.registerMap('chinaMap',chinaJson) -
在geo節點下設定
type:'map' map:'chinaMap'const myChart = echarts.init(document.querySelector('div')); fetch('./JSON/map/china.json').then(res=>res.json()).then((data)=>{ echarts.registerMap('chinaMap',data); //echarts全域物件注冊地圖json資料 myChart.setOption({ geo:{ type:'map', map:'chinaMap' } }) })
常用配置
-
縮放拖動
roam
-
名稱顯示
label
-
初始縮放比例
zoom
-
地圖中心點
center
const myChart = echarts.init(document.querySelector('div'));
fetch('./JSON/map/china.json').then(res=>res.json()).then((data)=>{
echarts.registerMap('chinaMap',data);
myChart.setOption({
geo:{
type:'map',
map:'chinaMap',
roam:true, // 設定允許縮放以及允許拖動地圖
// 只縮放 scale 只拖動 move
label:{
show:true, //展示所有標簽
},
zoom:1,//設定初始化縮放比例
center:[99,40] //根據經度緯度設定 某個地區為中心
}
})
})
常見效果
不同的城市顯示不同的顏色
-
顯示基本的中國地圖
-
series中設定城市的空氣質量
-
將series下的資料和geo關聯在一起
geoIndex:0,type:'map' -
結合visualMap配合使用
min max inRange
const myChart = echarts.init(document.querySelector('div')); const airData = [ { name: '北京', value: 39.92 }, { name: '天津', value: 39.13 }, { name: '上海', value: 31.22 }, { name: '重慶', value: 66 }, { name: '河北', value: 147 }, { name: '河南', value: 113 }, { name: '云南', value: 25.04 }, { name: '遼寧', value: 50 }, { name: '黑龍江', value: 114 }, { name: '湖南', value: 175 }, { name: '安徽', value: 117 }, { name: '山東', value: 92 }, { name: '新疆', value: 84 }, { name: '江蘇', value: 67 }, { name: '浙江', value: 84 }, { name: '江西', value: 96 }, { name: '湖北', value: 273 }, { name: '廣西', value: 59 }, { name: '甘肅', value: 99 }, { name: '山西', value: 39 }, { name: '內蒙古', value: 58 }, { name: '陜西', value: 61 }, { name: '吉林', value: 51 }, { name: '福建', value: 29 }, { name: '貴州', value: 71 }, { name: '廣東', value: 38 }, { name: '青海', value: 57 }, { name: '西藏', value: 24 }, { name: '四川', value: 58 }, { name: '寧夏', value: 52 }, { name: '海南', value: 54 }, { name: '臺灣', value: 88 }, { name: '香港', value: 66 }, { name: '澳門', value: 77 }, { name: '南海諸島', value: 55 } ] fetch('./JSON/map/china.json').then(res => res.json()).then(data => { // console.log(data); echarts.registerMap('chinaMap',data); myChart.setOption({ geo:{ map:'chinaMap', type:'map' }, series:[{ data:airData, // 將series下的資料和geo關聯起來 geoIndex:0, //將空氣質量的資料和第0個geo配置關聯在一起 type:'map', }], visualMap:{ min:0, max:300, inRange:{ color:['white','red'] //修改顏色 } } }) })
另外，還有一個屬性為
calcuable, 將其設定為 true，通過拖動手柄可以對其篩選，下圖篩選的是0~118的資料
地圖和散點圖結合使用
-
給series下增加新的物件
-
準備好散點資料，設定給新物件的data
-
配置新物件的type
type:effectScatter
-
讓散點圖使用地圖坐標系統
coordinateSystem:‘geo’
-
讓漣漪效果更加明顯
rippleEffect:{scale:10}
series: [ { type: 'effectScatter', data: scatterData, coordinateSystem: 'geo', // 指明散點使用的坐標系，geo的坐標系 rippleEffect: { scale: 10, //設定漣漪影片的效果的大小 } } ],
雷達圖
雷達圖可以用來分析多個維度的資料與標準資料的對比情況，
實作步驟
-
ECharts 最基本的代碼結構：
引入js檔案，設定DOM容器，初始化物件，設定options
-
在radar節點下定義各個維度的最大值
indicator:[{name:‘易用性’,max:100},{name:‘功能’,max:100},{name:‘拍照’,max:100},{name:‘跑分’,max:100},{name:‘續航’,max:100}]
-
準備具體產品的資料
data: [{ name: ‘華為手機1’, value: [48, 88, 99, 66, 77] }, { name: ‘小米手機’, value:[88, 90, 89, 95, 87] }]
-
圖表型別
在series下設定type:radar
const myChart = echarts.init(document.querySelector('div')); myChart.setOption({ radar: { indicator: [{ name: '易用性', max: 100 }, { name: '功能', max: 100 }, { name: '拍照', max: 100 }, { name: '跑分', max: 100 }, { name: '續航', max: 100 }], }, series: [{ type: 'radar', data: [{ name: '華為手機1', value: [48, 88, 99, 66, 77] }, { name: '小米手機', value:[88, 90, 89, 95, 87] }] }] })
常用配置
-
顯示數值
label:true
-
區域面積（配置在series節點下）
areaStyle:{}
-
配置雷達圖最外層的展示型別（配置在radar節點下）
shape:‘circle’ // 默認為polygen
myChart.setOption({ radar: { indicator: [{ name: '易用性', max: 100 }, { name: '功能', max: 100 }, { name: '拍照', max: 100 }, { name: '跑分', max: 100 }, { name: '續航', max: 100 }], shape:'circle' // 默認值為polygon }, series: [{ type: 'radar', data: [{ name: '華為手機1', value: [48, 88, 99, 66, 77] }, { name: '小米手機', value:[88, 90, 89, 95, 87] }], areaStyle:{} }], label:{ show:true }, legend:{} })
儀表盤
儀表盤主要用在進度把控以及資料范圍的監控，
實作步驟
-
ECharts 最基本的代碼結構：
引入js檔案，設定DOM容器，初始化物件，設定options
-
準備資料，設定給series下的data
data：[{value:97}]
-
圖表型別：
在series下設定type:gauge
const myChart = echarts.init(document.querySelector('div')); myChart.setOption({ series: [ { data: [ { value: 97 },// 每一個物件就代表一個指標 // 每一個物件就代表一個指標 ], type: 'gauge' } ] })
常見效果
-
數值范圍：
min、max來控制
myChart.setOption({ series: [ { data: [ { value: 97 },// 每一個物件就代表一個指標 // 每一個物件就代表一個指標 ], type: 'gauge', min:50 //控制儀表盤的范圍 } ], })
總結
特點總結
- 柱狀圖：柱狀圖描述的是分類資料，呈現的是每一個分類中有多少？,圖表所表達出來的含義在于不同類別 資料的排名對比情況
- 折線圖：折線圖更多的使用來呈現資料隨時間的『變化趨勢』
- 散點圖：散點圖可以幫助我們推斷出不同維度資料之間的相關性，比如在之前的例子中,看得出身高和體重是正相關, 身高越高, 體重越重；散點圖也經常用在地圖的標注上，
- 餅圖：餅圖可以很好地幫助用戶快速了解不同分類的資料的占比情況
- 地圖：地圖主要可以幫助我們從宏觀的角度快速看出不同地理位置上資料的差異
- 雷達圖：雷達圖可以用來分析多個維度的資料與標準資料的對比情況
- 儀表盤：儀表盤可以更直觀的表現出某個指標的進度或實際情況
配置項總結
Echarts 進階
顯示相關
主題
內置主題
Echarts 內置了兩套主題：light dark，
-
在初始化物件方法init中可以宣告
const chart = echarts.init(dom,'light');
自定義主題
-
在主題編輯器中編輯主題
-
下載主題，是一個js檔案
-
引入主題js檔案
-
在init方法中使用主題
調色板
調色盤
它是一組顏色，圖形和系列會自動從中選取顏色，
-
主題調色盤
操作上面定義主題一樣
-
全域調色盤
如果配置了，將會覆寫主題的調色盤：
myCharts.setOption({color:['red','green','blue']}) -
區域調色盤
series:[{type:'bar',color:['red','green','blue']}]
顏色漸變
-
線性漸變
series: { data: [83, 98, 90, 89, 92], type: 'bar', markPoint: { data: [ { type: 'max', name: '最大值' }, { type:'min', name:'最小值' } ] }, markLine:{ data:[{ type:'average', name:'平均值' }] }, label:{ show:true, position:'inside' }, barWidth:'40%', itemStyle:{ color:{ type:'linear', // 線性漸變 x:0, // 定義顏色漸變的方向 y:0, x2:0, y2:1, colorStops:[ {offset:0,color:'red'}, // 百分之0處的顏色為紅色 {offset:1,color:'pink'} // 百分之100處的顏色為藍色 ] } } }
-
徑向漸變
itemStyle:{ // color:{ // type:'linear', // 線性漸變 // x:0, // 定義顏色漸變的方向 // y:0, // x2:0, // y2:1, // colorStops:[ // {offset:0,color:'red'}, // 百分之0處的顏色為紅色 // {offset:1,color:'pink'} // 百分之100處的顏色為藍色 // ] // } color:{ type:'radial', x:0.5, // 圓心的x坐標 y:0.5, // 圓心的y坐標 r:1, // 半徑 colorStops:[ {offset:0,color:'red'}, {offset:1,color:'blue'} ] } }
樣式
直接樣式和高亮樣式，優先級較高，會覆寫主題和調色盤的效果
直接樣式
itemStyle, textStyle, lineStyle, areaStyle, label
myChart.setOption({
title:{
text:'餅圖的測驗',
// 2.textStyle
textStyle:{
color:'red'
}
},
series: {
color: ['blue', 'red', 'purple', 'pink', 'green'],
type: 'pie',
data: [{
name: '張三', value: 33,
// 1.itemStyle控制張三這一區域的樣式
itemStyle: {
color:'yellow'
},
// 3.label
label:{
color:'green'
}
},
{ 'name': '王五', value: 44 },
{ 'name': '趙六', value: 54 },
{ 'name': '李四', value: 39 },
{ 'name': '老張', value: 63 }
],
label: {
show: true,
formatter: '{b}-{c}',
}
}
})
高亮樣式
在 emphasis 中包裹 itemStyle, textStyle, lineStyle, areaStyle, label
series: {
color: ['blue', 'red', 'purple', 'pink', 'green'],
type: 'pie',
data: [{
name: '張三', value: 33,
// 1.itemStyle控制張三這一區域的樣式
itemStyle: {
color:'yellow'
},
// 3.label
label:{
color:'green'
},
// 高亮樣式
emphasis:{
itemStyle:{color:'pink'},
label:{color:'black'}
}
},
{ 'name': '王五', value: 44 },
{ 'name': '趙六', value: 54 },
{ 'name': '李四', value: 39 },
{ 'name': '老張', value: 63 }
],
label: {
show: true,
formatter: '{b}-{c}',
}
}
})
自適應
當瀏覽器的大小發生變化的時候，圖表也能隨之適配變化，
-
監聽視窗大小變化的事件（resize）
-
在事件處理函式中呼叫Echarts實體物件中的resize即可，
window.addEventListener('resize',()=>{ myChart.resize(); })
影片的使用
加載影片
ECharts已經內置好了加載資料的影片，我們只需要在合適的時機顯示或者隱藏即可
-
顯示加載影片
myChart.showLoading() -
隱藏加載影片
myChart.hideLoading()const myChart = echarts.init(document.querySelector('div')); myChart.showLoading(); fetch('./Json/data.json').then(res => res.json()).then(data =>{ myChart.hideLoading(); const dataArr = data.map(item =>[item.height,item.weight]); myChart.setOption({ xAxis:{ type:'value', scale:true }, yAxis:{ type:'value', scale:true, }, series:{ type:'scatter', data:dataArr } }) })
增量影片
所有資料的更新都是通過setOption來實作，不需要考慮資料到底發生了那些變化，
新舊option并不是相互覆寫的關系，是相互整合的關系，設定新的option時，只需要考慮變化的部分就可以了，
const btnmodify = document.querySelector('#modify');
const btnadd = document.querySelector('#add');
btnmodify.addEventListener('click', () => {
const newData = [25, 33, 55, 66];
// 新舊option并不是相互覆寫的關系，是相互整合的關系
// 設定新的option時，只需要考慮變化的部分就可以了，
myCharts.setOption({
series: [{
data: newData,
}],
});
})
btnadd.addEventListener('click', () => {
const newData = [66, 72, 65, 88, 43];
const newName = ['張三', '李四', '王五', '趙六', '小吳'];
myCharts.setOption({
xAxis: {
data: newName
},
series: [{
data: newData,
}],
})
})
全部代碼：https://codepen.io/liujiaqi222/pen/ZEyPGNp
影片配置
-
開啟影片
animation:true
-
影片時長
animationDuration:1000 (以毫秒為單位)
-
緩動影片
animationEasing:‘bounceOut’
myCharts.setOption({ animation: true, animationDuration: function (arg) { console.log(arg); // 會列印影片元素的索引值 return arg * 2000; }, animationEasing: 'bounceOut', // linear 等等 }); -
影片閾值
animationThreshold:10 // 同一類的影片，最多只展示10個
互動API
全域的echarts物件
全域echarts物件是引入echarts.js檔案之后就可以直接使用的物件
-
init 初始化echarts實體物件，使用主題
-
registerTheme 注冊主題，只有注冊過的主題，才能在init方法中使用該主題
-
registerMap 注冊地圖資料
fetch('./JSON/map/china.json').then(res=>res.json()).then((data)=>{ // 注冊地圖 echarts.registerMap('chinaMap',data); myChart.setOption({ geo:{ type:'map', map:'chinaMap', roam:true, // 設定允許縮放以及允許拖動地圖 // 只縮放 scale 只拖動 move label:{ show:true, //展示所有標簽 }, zoom:1,//設定初始化縮放比例 center:[99,40] //根據經度緯度設定 某個地區為中心 } }) }) -
connect
一個頁面中可以有多個獨立的圖表，每一個圖表都對應著一個ECharts實體物件，
connect可以實作多圖關聯，傳入聯動目標為ECharts實體物件，支持陣列，保存圖片的時候會自動拼接，重繪按鈕，重置按鈕，提示框聯動，圖例選擇，資料范圍修改等，
echarts.connect([mychart1,mychart2])
echartsInstance物件
eChartsInstance物件是通過echarts.init方法呼叫后的回傳值
-
setOption
設定或修改圖表實體的配置項以及資料，可多次呼叫setOption方法（會合并新的配置和舊的配置），
-
resize
重新計算和繪制圖表
const myChart = echarts.init(dom); window.addEventListener('resize',()=>{ myChart.resize(); }) -
on\off
系結或者解綁事件處理函式
-
滑鼠事件
// 對事件監聽 myChart.on('click',function(arg){ console.log(arg); console.log('click...'); }); -
ECharts事件
常見事件：legendSelectChanged, ‘dataZoom’,‘pieSelectChanged’,'mapSelectChanged’等
myChart.on('legendSelectChanged',function(arg){ console.log(arg); //列印選中狀態 })
-
-
dispatchAction
觸發某些行為（使用代碼模擬用戶的行為）
mCharts.dispatchAction({ type:'hightlight', //事件型別 seriesIndex:0, //圖表索引 dataIndex:1 //圖表中哪一項高亮 }) -
clear
清空當前實體，會移除實體中所有的組件和圖表；
清空之后，可以再次setOption
myChart.clear(); // 整個圖表將不會顯示 myChart.setOption(option); // 圖表將會重新展示 -
dispose
銷毀實體，實體銷毀后無法再被使用
myChart.clear(); myChart.setOption(option); // 會報錯
Map’,
roam:true, // 設定允許縮放以及允許拖動地圖
// 只縮放 scale 只拖動 move
label:{
show:true, //展示所有標簽
},
zoom:1,//設定初始化縮放比例
center:[99,40] //根據經度緯度設定 某個地區為中心
}
})
})
- connect
一個頁面中可以有多個獨立的圖表，每一個圖表都對應著一個ECharts實體物件，
connect可以實作多圖關聯，傳入聯動目標為ECharts實體物件，支持陣列，保存圖片的時候會自動拼接，重繪按鈕，重置按鈕，提示框聯動，圖例選擇，資料范圍修改等，
```js
echarts.connect([mychart1,mychart2])
echartsInstance物件
eChartsInstance物件是通過echarts.init方法呼叫后的回傳值
-
setOption
設定或修改圖表實體的配置項以及資料，可多次呼叫setOption方法（會合并新的配置和舊的配置），
-
resize
重新計算和繪制圖表
const myChart = echarts.init(dom); window.addEventListener('resize',()=>{ myChart.resize(); }) -
on\off
系結或者解綁事件處理函式
-
滑鼠事件
// 對事件監聽 myChart.on('click',function(arg){ console.log(arg); console.log('click...'); }); -
ECharts事件
常見事件：legendSelectChanged, ‘dataZoom’,‘pieSelectChanged’,'mapSelectChanged’等
myChart.on('legendSelectChanged',function(arg){ console.log(arg); //列印選中狀態 })
-
-
dispatchAction
觸發某些行為（使用代碼模擬用戶的行為）
mCharts.dispatchAction({ type:'hightlight', //事件型別 seriesIndex:0, //圖表索引 dataIndex:1 //圖表中哪一項高亮 }) -
clear
清空當前實體，會移除實體中所有的組件和圖表；
清空之后，可以再次setOption
myChart.clear(); // 整個圖表將不會顯示 myChart.setOption(option); // 圖表將會重新展示 -
dispose
銷毀實體，實體銷毀后無法再被使用
myChart.clear(); myChart.setOption(option); // 會報錯
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/304776.html
標籤：其他
上一篇：練習vue-x的小demo
下一篇：請求圖書洗掉案例