1. 程式人生 > 其它 >echarts的圖例元件(legend)如何設定兩列或多列排布

echarts的圖例元件(legend)如何設定兩列或多列排布

js程式碼

legend: [
                        {
                            orient: 'horizontal',
                            right: '10%',
                            // top: 'middle',
                            // padding:[0,50,0,0],
                            // x:'right',      //可設定圖例在左、右、居中
                            // y:'top',
                            // bottom: 20,
                            itemWidth: 30,// 標誌圖形的長度
                            itemHeight: 15,// 標誌圖形的寬度
                            textStyle: {
                                fontSize: 12,// 字型大小
                                color: '#ffffff'// 字型顏色
                            },
                            itemGap: 10,
                            // left: 'center',
                            // bottom: '5%',
                            data: ["龍門移動式數控鑽床", "五面體加工中心", "龍門加工中心", "立式加工中心"]
                        },
                        {
                            orient: 'horizontal',//水平排列。(vertical為垂直排列}
                            right: '10%',
                            top: "8%",
                            // top: 'middle',
                            itemWidth: 30,// 標誌圖形的長度
                            itemHeight: 15,// 標誌圖形的寬度
                            textStyle: {
                                fontSize: 12,// 字型大小
                                color: '#ffffff'// 字型顏色
                            },
                            itemGap: 10,
                            // left: 'center',
                            // bottom: 'bottom',
                            // // bottom:'bottom',
                            data: ["數控車床001", "數控車床002", "數控車床004", "數控車床005"]
                        },
                    ],

效果