柚子快報(bào)激活碼778899分享：ECharts的高級(jí)使用
柚子快報(bào)激活碼778899分享：ECharts的高級(jí)使用
目錄
一?顯示相關(guān)
（1）主題的使用
(2)調(diào)色盤和顏色漸變
?(3)樣式
（4）自適應(yīng)
二?動(dòng)畫(huà)的使用
（1）加載動(dòng)畫(huà)
（2）增量動(dòng)畫(huà)的實(shí)現(xiàn)方式
（3）動(dòng)畫(huà)配置項(xiàng)
三?交互API
（1）全局echarts對(duì)象方法
?（2）echartsInstance對(duì)象方法
一?顯示相關(guān)
（1）主題的使用
1）內(nèi)置主題 ●ECharts中 默認(rèn)內(nèi)置了兩套主題:ight dark ●在初始化對(duì)象方法init中可以指明 var chart = echarts.init(dom, 'light'); var chart = echarts.init(dom, 'dark'); 2）自定義主題 ●1.在主題編輯器中編輯主題 ●2.下載主題, 是一個(gè)js文件 ●3.引入主題js文件 ●4.在init方法中使用主題
(2)調(diào)色盤和顏色漸變
調(diào)色盤（使用遵循就近原則）：
//1.主題調(diào)色盤
var mCharts = echarts.init(document.querySelector("div"), 'itcast')
var pieData = [
{
value: 11231,
name: "淘寶",
},
{
value: 22673,
name: "京東"
},
{
value: 6123,
name: "唯品會(huì)"
},
{
value: 8989,
name: "1號(hào)店"
},
{
value: 6700,
name: "聚美優(yōu)品"
}
]
var option = {
//2.全局調(diào)色盤
color: ['red', 'green', 'blue', 'skyblue', 'purple'],
series: [
{
type: 'pie',
data: pieData,
// 3 局部調(diào)色盤
color: ['pink', 'yellow', 'black', 'orange', 'red']
}
]
};
mCharts.setOption(option)
顏色漸變
series: [
{
itemStyle: {
/*
//線性漸變（從上倒下）
color: {
type: 'linear', // 線性漸變
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops:[
{
offset: 0, color: 'red' // 0%處的顏色為紅色
},
{
offset: 1, color: 'blue' // 100%處的顏色為藍(lán)
}
]
}*/
color: {
type: 'radial', // 徑向漸變
x: 0.5,
y: 0.5,
r: 0.5,
colorStops: [
{
offset: 0, color: 'red' // 0%處的顏色為紅色
},
{
offset: 1, color: 'blue' // 100%處的顏色為藍(lán)
}
]
}
}
}
]
線性漸變效果：
?
徑向漸變效果：?
?(3)樣式
1）直接樣式 itemStyle、textStyle、lineStyle、areaStyle、label 這些樣式一般都可以設(shè)置顏色或者背景或者字體等樣式, 他們會(huì)覆蓋主題中的樣式
data: [
{
value: 11231,
name: "淘寶",
itemStyle: {
color: 'black' // 控制淘寶這一區(qū)域的樣式
}
}
]
title: {
text: '我是標(biāo)題',
textStyle: {
color: 'red'
}
}
label: {
color: 'green'// 控制淘寶這一文字的樣式
}
2）高亮樣式 圖表中, 其實(shí)有很多元素都是有兩種狀態(tài)的, 一種是默認(rèn)狀態(tài), 另外一種就是鼠標(biāo)滑過(guò)或者點(diǎn)擊形成 的高亮狀態(tài). 而高亮樣式是針對(duì)于元素的高亮狀態(tài)設(shè)定的樣式在emphasis 中包裹原先的itemStyle 等等
series: [
{
type: 'pie',
data: [{
value: 11231,
name: "淘寶",
itemStyle: {
color: 'yellow'
},
label: {
color: 'green'
},
emphasis: {
itemStyle: { // 點(diǎn)擊時(shí)控制淘寶這一區(qū)域的樣式
color: 'pink'
},
label: {
color: 'black'// 點(diǎn)擊時(shí)控制淘寶這一文字的樣式
}
}
}]
}]
優(yōu)先級(jí)高,會(huì)覆蓋主題中、調(diào)色盤的效果
（4）自適應(yīng)
當(dāng)瀏覽器的大小發(fā)生變化的時(shí)候,如果想讓圖表也能隨之適配變化 ?●1. 監(jiān)聽(tīng)窗口大小變化事件 ? ●2.在事件處理函數(shù)中調(diào)用ECharts實(shí)例對(duì)象的resize即可 window.onresize = function(){ myChart.resize(); }
mCharts.setOption(option)
// 監(jiān)聽(tīng)window窗口大小變化的事件
window.onresize = function(){
// console.log('window.onresize...')
// 調(diào)用echarts實(shí)例對(duì)象的resize方法
mCharts.resize()
}
// window.onresize = mCharts.resize
二?動(dòng)畫(huà)的使用
（1）加載動(dòng)畫(huà)
ECharts已經(jīng)內(nèi)置好了加載數(shù)據(jù)的動(dòng)畫(huà)，我們只需要在合適的時(shí)機(jī)顯示或者隱藏即可 ●顯示加載動(dòng)畫(huà) mCharts.showLoading() ●隱藏加載動(dòng)畫(huà) mCharts.hideLoading()
（2）增量動(dòng)畫(huà)的實(shí)現(xiàn)方式
所有數(shù)據(jù)的更新都限過(guò)setoption頭現(xiàn) 不用考慮數(shù)據(jù)到底產(chǎn)生了那些變化 ECharts會(huì)找到兩組數(shù)據(jù)之間的差異然后通過(guò)合適的動(dòng)畫(huà)去表現(xiàn)數(shù)據(jù)的變化
（3）動(dòng)畫(huà)配置項(xiàng)
動(dòng)畫(huà)配置項(xiàng) ●開(kāi)啟動(dòng)畫(huà) animation: true ●動(dòng)畫(huà)時(shí)長(zhǎng) animationDuration: 5000（可設(shè)置回調(diào)函數(shù)） ●緩動(dòng)動(dòng)畫(huà) animationEasing: 'bounceOut'（緩動(dòng)動(dòng)畫(huà)） ●動(dòng)畫(huà)閾值 animationThreshold: 8 單種形式的元素?cái)?shù)量大于這個(gè)閾值時(shí)會(huì)關(guān)閉動(dòng)畫(huà)
三?交互API
全局echarts對(duì)象是引入echarts.js文件之后就可以直接使用的 ?echartsInstance對(duì)象是通過(guò)echarts.init方法調(diào)用之后得到的
（1）全局echarts對(duì)象方法
? ? ? ?1)init
? ? ? ?初始化ECharts實(shí)例對(duì)象 ? ? ? ?使用主題（light或dark） ? ? ? 2)registerTheme
? ? ? ? ??注冊(cè)主題. ? ? ? ? ?只有注冊(cè)過(guò)的主題,才能在init方法中使用該主題 ? ? ? 3)registerMap
? ? ? ? ??●注冊(cè)地圖數(shù)據(jù) ? ? ? ? ? ?$.get(json/ map/china.json', function (china]son) { ? ? ? ? ? ? ? ? ? ? ? echarts.registerMap('china', chinaJson); ? ? ? ? ? ? ? ? ? ? }); ? ? ? ? ? ?●geo組件使用地圖數(shù)據(jù) ? ? ? ? ? ?var option= { ? ? ? ? ? ? ? ? ? ?geo: { ? ? ? ? ? ? ? ? ? ? type: 'map', ? ? ? ? ? ? ? ? ? ? ?map: 'china', ? ? ? ? ? ? ? ? ? ? ?}, ? ? ? ? ? ? ? ? ? });
? ? ? ?4)connect?
? ? ??●一個(gè)頁(yè)面中可以有多個(gè)獨(dú)立的圖表 ? ? ? ●每一個(gè)圖表對(duì)應(yīng)一個(gè)ECharts實(shí)例對(duì)象 ? ? ? ●connect 可以實(shí)現(xiàn)多圖關(guān)聯(lián)，傳入聯(lián)動(dòng)目標(biāo)為ECharts實(shí)例對(duì)象，支持?jǐn)?shù)組。 ? ? ? ? ? ? 保存圖片的自動(dòng)拼接 ? ? ? ? ? ? ?刷新按鈕 ? ? ? ? ? ? ?重置按鈕 ? ? ? ? ? ? ?提示框聯(lián)動(dòng)、圖例選擇、數(shù)據(jù)范圍修改等.....
?（2）echartsInstance對(duì)象方法
■setOption
??●設(shè)置或修改圖表實(shí)例的配置項(xiàng)以及數(shù)據(jù) ? ●多次調(diào)用setOption方法 ? 合并新的配置和舊的配置 ? ?---增量動(dòng)畫(huà)實(shí)現(xiàn)機(jī)制
■resize
??●重新計(jì)算和繪制圖表 ? ?●一般和window對(duì)象的resize事件結(jié)合使用 ? ? window.onresize = function(){ ? ? ? ? ?myChart.resize(); ? ? ? ? ?}
■on\off
? ? ? ?●綁定或者解綁事件處理函數(shù) ? ? ? ?●鼠標(biāo)事件 ? ? ? ? ? ? 常見(jiàn)事件: 'click'. 'dblclick'. 'mousedown'. 'mousemove'. 'mouseup' 等 ? ? ? ? ? ? ?事件參數(shù)arg:和事件相關(guān)的數(shù)據(jù)信息 ? ? ? ? ●ECharts事件 ? ? ? ? ? 常見(jiàn)事件:legendselectchanged. 'datazoom'. 'pieselectchanged'. 'mapselectchanged' 等 ? ? ? ? ? 事件參數(shù)arg：和事件相關(guān)的數(shù)據(jù)信息 ■dispatchAction
? ?●觸發(fā)某些行為 ? ?●使用代碼模擬用戶 的行為 ? ? ? mCharts.dispatchAction({ ? ? ? ? ? ? type: 'highlight', //事件類型 ? ? ? ? ? ? ?seriesIndex: 0,//圖表索引 ? ? ? ? ? ? dataIndex: 1//圖表中哪一項(xiàng)高亮 ? ? ? ?}); ■clear
? ?●清空當(dāng)前實(shí)例， 會(huì)移除實(shí)例中所有的組件和圖表 ? ?●清空之后可以再次setOption ■dispose
? ?●銷毀實(shí)例 ? ?●銷毀后實(shí)例無(wú)法再被使用
柚子快報(bào)激活碼778899分享：ECharts的高級(jí)使用
參考文章
本文內(nèi)容根據(jù)網(wǎng)絡(luò)資料整理，出于傳遞更多信息之目的，不代表金鑰匙跨境贊同其觀點(diǎn)和立場(chǎng)。
轉(zhuǎn)載請(qǐng)注明，如有侵權(quán)，聯(lián)系刪除。
Wayfair家居精選
