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