Echarts圖例組件的屬性與源代碼
圖例(legend)組件是ECharts中較為常用的組件,它用于以不同的顏色區(qū)別系列標(biāo)記的名字,表述了數(shù)據(jù)與圖形的關(guān)聯(lián)。用戶在操作時(shí),可以通過(guò)單擊圖例控制哪些數(shù)據(jù)系列顯示或不顯示。
在ECharts 3.x/ECharts 4.x中,單個(gè)ECharts實(shí)例可以存在多個(gè)圖例組件,方便多個(gè)圖例的布局。當(dāng)圖例數(shù)量過(guò)多時(shí),可以使用滾動(dòng)翻頁(yè)。
在ECharts中,圖例組件的屬性如表所示
圖例組件屬性示意圖如圖所示。
利用某一年的蒸發(fā)量、降水量、最低氣溫和最高氣溫?cái)?shù)據(jù)繪制折柱混搭圖,并為圖表配置圖例組件。
當(dāng)圖例數(shù)量過(guò)多或圖例長(zhǎng)度過(guò)長(zhǎng)時(shí),可以使用垂直滾動(dòng)圖例或水平滾動(dòng)圖例,參見(jiàn)屬性legend.type。此時(shí),設(shè)置type屬性的值為“scroll”,表示圖例只顯示在一行,多余的部分會(huì)自動(dòng)呈現(xiàn)為滾動(dòng)效果,如圖所示。
由圖可知,右上方的 滑動(dòng) 圖標(biāo)即圖例的滾動(dòng)圖標(biāo),可以將圖例呈現(xiàn)為滾動(dòng)效果。
圖例的源代碼如下;
<html> <head> <meta charset="utf-8"> <!--引入ECharts腳本--> <script src="js/echarts.js"></script> </head> <body> <!---為ECharts準(zhǔn)備一個(gè)具備大小(寬高)的DOM--> <div id="main" style="width: 600px; height: 600px"></div> <script type="text/javascript"> //基于準(zhǔn)備好的DOM,初始化ECharts圖表 var myChart = echarts.init(document.getElementById("main")); //指定圖表的配置項(xiàng)和數(shù)據(jù) var option = { color: ["red", 'green', 'blue', 'grey'], //使用自己預(yù)定義的顏色 legend: { orient: 'horizontal', //'vertical' x: 'right', //'center'|'left'|{number}, y: 'top', //'center'|'bottom'|{number} backgroundColor: '#eee', borderColor: 'rgba(178,34,34,0.8)', borderWidth: 4, padding: 10, itemGap: 20, textStyle: { color: 'red' }, }, xAxis: { //配置x軸坐標(biāo)系 data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'] }, yAxis: [ //配置y軸坐標(biāo)系 { //設(shè)置第1條y軸 type: 'value', axisLabel: { formatter: '{value} ml' } }, { //設(shè)置第2條y軸 type: 'value', axisLabel: { formatter: '{value} °C' }, splitLine: { show: false } } ], series: [ //配置數(shù)據(jù)系列 { //設(shè)置數(shù)據(jù)系列1 name: '某一年的蒸發(fā)量', type: 'bar', data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6] }, { //設(shè)置數(shù)據(jù)系列2 name: '某一年的降水量', smooth: true, type: 'line', yAxisIndex: 1, data: [11, 11, 15, 13, 12, 13, 10] }, { //設(shè)置數(shù)據(jù)系列3 name: '某一年的最高氣溫', type: 'bar', data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6] }, { //設(shè)置數(shù)據(jù)系列4 name: '某一年的最低氣溫', smooth: true, type: 'line', yAxisIndex: 1, data: [-2, 1, 2, 5, 3, 2, 0] } ] }; //使用剛指定的配置項(xiàng)和數(shù)據(jù)顯示圖表 myChart.setOption(option); </script> </body> </html>
總結(jié)
到此這篇關(guān)于Echarts圖例組件屬性與源代碼的文章就介紹到這了,更多相關(guān)Echarts圖例組件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
原生JS實(shí)現(xiàn)手動(dòng)輪播圖效果實(shí)例代碼
手動(dòng)輪播圖,為輪播圖中的一種,輪播圖主要有無(wú)縫輪播,手動(dòng)輪播,延遲輪播,切換輪播等等,輪播圖主要用于展現(xiàn)圖片,新出商品,詞條,又能美觀網(wǎng)頁(yè)。給網(wǎng)頁(yè)中增加動(dòng)態(tài)效果。接下來(lái)通過(guò)本文給大家分享原生JS實(shí)現(xiàn)手動(dòng)輪播圖的實(shí)例代碼,一起看看吧2018-11-11原生javascript+css3編寫(xiě)的3D魔方動(dòng)畫(huà)旋扭特效
這篇文章主要介紹了原生javascript+css3編寫(xiě)的3D魔方動(dòng)畫(huà)旋扭特效的相關(guān)資料,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-03-03如何利用JS通過(guò)身份證號(hào)獲取當(dāng)事人的生日、年齡、性別
身份證可以識(shí)別一個(gè)人的信息,下面就介紹一下如何利用js通過(guò)身份證號(hào)碼獲取當(dāng)事人的年齡和性別2016-01-01JavaScript關(guān)鍵字this的使用方法詳解
與其他語(yǔ)言相比,函數(shù)的 this 關(guān)鍵字在 JavaScript 中的表現(xiàn)略有不同,此外,在嚴(yán)格模式和非嚴(yán)格模式之間也會(huì)有一些差別,本文就給大家講解一下JavaScript關(guān)鍵字中的this,需要的朋友可以參考下2023-08-08JS定時(shí)器用法分析【時(shí)鐘與菜單中的應(yīng)用】
這篇文章主要介紹了JS定時(shí)器用法,結(jié)合時(shí)鐘與菜單中的應(yīng)用分析了JS中setInterval與setTimeout操作時(shí)間的相關(guān)技巧,需要的朋友可以參考下2016-12-12JS實(shí)現(xiàn)AES加密并與PHP互通的方法分析
這篇文章主要介紹了JS實(shí)現(xiàn)AES加密并與PHP互通的方法,結(jié)合實(shí)例形式分析了javascript與php的加密、解密算法相關(guān)操作技巧,需要的朋友可以參考下2017-04-04JavaScript基本數(shù)據(jù)類型及值類型和引用類型
大家經(jīng)常可以見(jiàn)到j(luò)avascript中的一些數(shù)據(jù)類型,比如“undefined”、“boolean”、“string”等等,這篇文章就和大家一起來(lái)學(xué)習(xí)JavaScript基本數(shù)據(jù)類型及值類型和引用類型,有需要的童鞋參考下,本文寫(xiě)的不好地方,還望大家提出,共同學(xué)習(xí)進(jìn)步2015-08-08微信小程序?qū)崿F(xiàn)左側(cè)滑欄過(guò)程解析
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)左側(cè)滑欄過(guò)程解析,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-08-08