在echarts中圖例legend和坐標(biāo)系grid實(shí)現(xiàn)左右布局實(shí)例
1、效果圖
2、實(shí)現(xiàn)方法
將圖例legend縱向排列(orient: 'vertical'),寬度給150(width: 150),坐標(biāo)系grid左側(cè)距離200(left: 200),中間有50的邊距
3、代碼展示
grid: { left: 200 }, legend: { x: 'left', data: ['送風(fēng)溫度', '混風(fēng)溫度', '冷凍水送水溫度', '冷凍水回水溫度', '熱水送水溫度', '熱水回水溫度', '送風(fēng)溫度設(shè)定點(diǎn)', '風(fēng)機(jī)速度','風(fēng)機(jī)速度反饋','風(fēng)閥開度'], inactiveColor: '#999', selectedMode: 'single', orient: 'vertical', width: 150, top: 50, borderWidth: 2, borderColor: 'blue', textStyle: { color: '#000' } }
補(bǔ)充知識(shí):Echarts中l(wèi)egend圖例太多與title重疊問題
問題:由于legend圖例太多導(dǎo)致與title的文字重疊
方法:像legend.data[i]中添加特殊字符串'',實(shí)現(xiàn)圖里的換行
代碼:加粗加下劃線部分
legend: { x: 'left', data: ['送風(fēng)溫度', '回風(fēng)溫度', '室外溫度', '室外濕度', '', '室內(nèi)1溫度', '室內(nèi)1濕度', '室內(nèi)2溫度', '室內(nèi)2濕度'], inactiveColor: '#999', selectedMode: 'single' }
以上這篇在echarts中圖例legend和坐標(biāo)系grid實(shí)現(xiàn)左右布局實(shí)例就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
- 羊了個(gè)羊通關(guān)腳本Vue?node實(shí)現(xiàn)版本
- JS實(shí)現(xiàn)羊了個(gè)羊小游戲?qū)嵗?/a>
- QT布局管理詳解QVBoxLayout與QHBoxLayout及QGridLayout的使用
- WPF使用Grid網(wǎng)格面板布局
- Python中Tkinter布局管理grid的使用
- Vue3.0利用vue-grid-layout插件實(shí)現(xiàn)拖拽布局
- python GUI庫(kù)圖形界面開發(fā)之PyQt5布局控件QGridLayout詳細(xì)使用方法與實(shí)例
- 羊了個(gè)羊的中強(qiáng)大的Grid布局
相關(guān)文章
Python實(shí)現(xiàn)的徑向基(RBF)神經(jīng)網(wǎng)絡(luò)示例
這篇文章主要介紹了Python實(shí)現(xiàn)的徑向基(RBF)神經(jīng)網(wǎng)絡(luò),結(jié)合完整實(shí)例形式分析了Python徑向基(RBF)神經(jīng)網(wǎng)絡(luò)定義與實(shí)現(xiàn)技巧,需要的朋友可以參考下2018-02-02python利用tkinter實(shí)現(xiàn)屏保
這篇文章主要為大家詳細(xì)介紹了python利用tkinter實(shí)現(xiàn)屏保,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-07-07pandas DataFrame 交集并集補(bǔ)集的實(shí)現(xiàn)
這篇文章主要介紹了pandas DataFrame 交集并集補(bǔ)集的實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06Python使用Selenium進(jìn)行Web自動(dòng)化測(cè)試
Selenium 是一個(gè)用于 Web 應(yīng)用自動(dòng)化測(cè)試的強(qiáng)大工具,可以用來模擬用戶操作瀏覽器,從而測(cè)試 Web 應(yīng)用的功能,它支持多種瀏覽器和編程語言,包括 Python,下面我們將介紹如何使用 Selenium 進(jìn)行 Web 自動(dòng)化測(cè)試,需要的朋友可以參考下2024-08-08Python基于codecs模塊實(shí)現(xiàn)文件讀寫案例解析
這篇文章主要介紹了Python基于codecs實(shí)現(xiàn)文件讀寫案例解析,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-05-05Python+Opencv文本檢測(cè)的實(shí)現(xiàn)
本文主要介紹了如何使用OpenCV和EAST文本檢測(cè)器檢測(cè)圖像中的文本,以便大家可以在自己的應(yīng)用程序中應(yīng)用文本檢測(cè)。感興趣的同學(xué)可以關(guān)注一下2021-11-11淺談python圖片處理Image和skimage的區(qū)別
這篇文章主要介紹了淺談python圖片處理Image和skimage的區(qū)別,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08