欧美free性护士vide0shd,老熟女,一区二区三区,久久久久夜夜夜精品国产,久久久久久综合网天天,欧美成人护士h版

目錄

柚子快報(bào)激活碼778899分享:ECharts的高級(jí)使用

柚子快報(bào)激活碼778899分享:ECharts的高級(jí)使用

http://yzkb.51969.com/

目錄

一?顯示相關(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ù)的變化

Document

(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í)使用

http://yzkb.51969.com/

參考文章

評(píng)論可見(jiàn),查看隱藏內(nèi)容

本文內(nèi)容根據(jù)網(wǎng)絡(luò)資料整理,出于傳遞更多信息之目的,不代表金鑰匙跨境贊同其觀點(diǎn)和立場(chǎng)。

轉(zhuǎn)載請(qǐng)注明,如有侵權(quán),聯(lián)系刪除。

本文鏈接:http://gantiao.com.cn/post/18899252.html

發(fā)布評(píng)論

您暫未設(shè)置收款碼

請(qǐng)?jiān)谥黝}配置——文章設(shè)置里上傳

掃描二維碼手機(jī)訪問(wèn)

文章目錄