echarts中圖例右置且豎排完整代碼

更新時間：2023年08月16日 08:54:29 作者：wudechun

這篇文章主要給大家介紹了關于echarts中圖例右置且豎排的相關資料,Echarts可以幫助我們快速構建柱狀圖、餅圖、條形圖,這對于多圖形化展示數(shù)據(jù)來說尤其方便,可幫助我們快速開發(fā),需要的朋友可以參考下

有echarts中，圖例是用來指示不同系列的標記顏色和名字小組件，見圖所示。

默認圖標都是水平放置的：

要讓圖例放在右側并豎直，需要作如下配置：

legend: {
		show:true,
		type:'plain',
		left:'right',
		top:'middle',
		width:130,
	},

type代表類型，有plain與scroll兩個，這里我們使用plain，這也是默認的類型；

left代表圖例在水平放置的位置，有l(wèi)eft、center、right
top代表圖例在垂直方向的位置，有top、middle、bottom
width是最主要的，當設置的寬度比較小時，才會迫使圖例換行，從而形成豎直排列的現(xiàn)像。

以下分別是width在20、150、400時的樣子：

以下是完整代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>甘特圖</title>
    <style>
        #echart {
            width: 600px;
            height: 400px;
            margin: 100px auto;
            border: 1px solid #CCC;
        }
    </style>
</head>
<body>
    <div id="echart"></div>
    <script type="text/javascript" src="js/echarts.min.js"></script>
    <!-- <script src="js/gt.js"></script> -->
    <script>
        // 初始化圖表
var myChart = echarts.init(document.getElementById('echart'));
 // 構建圖表配置項
 option = {
     color: ["#003366", "#006699", "#4cabce", "#e5323e"],
     legend: {
         show:true,
         type:'plain',
         left:'right',
         top:'middle',
         width:20,
     },
     xAxis: {
         type: "category",
         axisTick: {
         show: false
         }
     },
     yAxis: {},
     series: [{
         name:'Forest',
         type: "bar",
         seriesLayoutBy: "row",
         data:[320,332,301,334,390],
     }, {
         name:'Steppe',
         type: "bar",
         seriesLayoutBy: "row",
         data:[220,182,191,234,290],
     }, {
         name:'Desert',
         type: "bar",
         seriesLayoutBy: "row",
         data:[150,232,201,154,190],
     }, {
         name:'Wetland',
         type: "bar",
         seriesLayoutBy: "row",
         data:[98, 77, 101, 99, 40],
     }]
 };
 // 將構建好的配置項傳入echarts
 myChart.setOption(option);
    </script>
</body>
</html>

總結

到此這篇關于echarts中圖例右置且豎排的文章就介紹到這了,更多相關echarts圖例右置豎排內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！