在echarts中圖例legend和坐標(biāo)系grid實現(xiàn)左右布局實例
1、效果圖
2、實現(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è)定點', '風(fēng)機速度','風(fēng)機速度反饋','風(fēng)閥開度'], inactiveColor: '#999', selectedMode: 'single', orient: 'vertical', width: 150, top: 50, borderWidth: 2, borderColor: 'blue', textStyle: { color: '#000' } }
補充知識:Echarts中l(wèi)egend圖例太多與title重疊問題
問題:由于legend圖例太多導(dǎo)致與title的文字重疊
方法:像legend.data[i]中添加特殊字符串'',實現(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實現(xiàn)左右布局實例就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
Python實現(xiàn)的徑向基(RBF)神經(jīng)網(wǎng)絡(luò)示例
這篇文章主要介紹了Python實現(xiàn)的徑向基(RBF)神經(jīng)網(wǎng)絡(luò),結(jié)合完整實例形式分析了Python徑向基(RBF)神經(jīng)網(wǎng)絡(luò)定義與實現(xiàn)技巧,需要的朋友可以參考下2018-02-02pandas DataFrame 交集并集補集的實現(xiàn)
這篇文章主要介紹了pandas DataFrame 交集并集補集的實現(xiàn),文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06Python基于codecs模塊實現(xiàn)文件讀寫案例解析
這篇文章主要介紹了Python基于codecs實現(xiàn)文件讀寫案例解析,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-05-05淺談python圖片處理Image和skimage的區(qū)別
這篇文章主要介紹了淺談python圖片處理Image和skimage的區(qū)別,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08