<!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>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.0.2/echarts.common.min.js"></script>
</head>
<body>
<div style="width: 600px; height: 400px; border: 1px solid black;"></div>
<script>
var myCharts = echarts.init(document.querySelector('div'))
var xDataArr = ['Dean', 'Jing', 'Amy', 'John', 'Rebecca', 'Lexie']
var yDataArr = [88, 99, 78, 67, 84, 32]
var yDataArr2 = [78, 89, 98, 57, 94, 92]
var option = {
title: {
text: 'Title',
textStyle: {
color: 'lightblue',
fontSize: 20
},
borderWidth: 2,
borderColor: 'lightblue',
borderRadius: 10,
top: 30,
left: '45%',
backgroundColor: 'black',
padding: 10
},
grid: {
show: true,
top: 90,
left: 100,
right: 40,
bottom: 40,
height: '60%',
},
tooltip: {
trigger: 'item',
triggerOn: 'click',
formatter: function(arg) {
console.log(arg)
return `cate: ${
arg.name} ---> value: ${
arg.data}`
}
},
xAxis: {
type: 'category',
data: xDataArr
},
yAxis: {
type: 'value'
},
legend: {
data: ['Math', 'English'],
left: 'center',
top: 'bottom'
},
series: [
{
name: 'Math',
type: 'bar',
label: {
show: true,
rotate: 30,
postion: 'middle',
color: 'pink'
},
barWidth: '30%',
data: yDataArr
},
{
type: 'bar',
name: 'English',
data: yDataArr2,
color: 'lightblue',
barWidth: '30%',
label: {
show: true,
color: '#fff'
}
}
]
}
myCharts.setOption(option)
</script>
</body>
</html>
left和top可以控制图例显示的位置：
orient控制图例的显示方式是横着还是竖着，默认horizontal横着
改为vertical:
