1、效果圖

2、實現方法

將圖例legend縱向排列（orient: 'vertical'），寬度給150（width: 150），座標系grid左側距離200（left: 200），中間有50的邊距

3、程式碼展示

grid: {
 left: 200
},legend: {
    x: 'left',data: ['送風溫度','混風溫度','冷凍水送水溫度','冷凍水回水溫度','熱水送水溫度','熱水回水溫度','送風溫度設定點','風機速度','風機速度反饋','風閥開度'],inactiveColor: '#999',selectedMode: 'single',orient: 'vertical',width: 150,top: 50,borderWidth: 2,borderColor: 'blue',textStyle: {
 color: '#000'
 }
}

補充知識：Echarts中legend圖例太多與title重疊問題

問題：由於legend圖例太多導致與title的文字重疊

方法：像legend.data[i]中新增特殊字串''，實現圖裡的換行

程式碼：加粗加下劃線部分

legend: {
 x: 'left','迴風溫度','室外溫度','室外溼度','','室內1溫度','室內1溼度','室內2溫度','室內2溼度'],selectedMode: 'single'
 }

以上這篇在echarts中圖例legend和座標系grid實現左右佈局例項就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援我們。