In echarts, legends are used to indicate different series of marker colors and name widgets, as shown in the figure.
By default icons are placed horizontally:
To place the legend on the right and vertically, the following configuration is required:
legend: {
show:true,
type:'plain',
left:'right',
top:'middle',
width:130,
},type represents the type, there are plain and scroll, here we use plain, which is also the default type;
left represents the horizontal position of the legend, there are left, center, right
top represents the position of the legend in the vertical direction, including top, middle, and bottom
Width is the most important. When the set width is relatively small, the legend will be forced to wrap, thus forming a vertical arrangement.
The following are what the width looks like at 20, 150, and 400:
Here is the complete code:
<!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>