grid
<!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>直角坐标系常用配置-grid</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;"></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 option = {
grid: {
show: true,
borderWidth: 2,
borderColor: 'blue',
// 控制图表在div中的显示位置
left: 50,
top: 50,
// 控制图表大小
width: 200,
height: 200
},
xAxis: {
type: 'category',
data: xDataArr
},
yAxis: {
type: 'value'
},
series: [
{
name: 'Math',
type: 'bar',
data: yDataArr,
itemStyle: {
color: 'lightblue'
}
}
]
}
myCharts.setOption(option)
</script>
</body>
</html>
坐标轴axis
<!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>直角坐标系常用配置-grid</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;"></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 option = {
grid: {
show: true,
borderWidth: 2,
// borderColor: 'lightblue',
// 控制图表在div中的显示位置
left: 50,
top: 50,
// // 控制图表大小
// width: 200,
// height: 200
},
xAxis: {
type: 'category',
data: xDataArr,
position: 'top'
},
yAxis: {
type: 'value',
position: 'right'
},
series: [
{
name: 'Math',
type: 'bar',
data: yDataArr,
itemStyle: {
color: 'lightblue'
},
barWidth: '20%' // 控制bar的宽度
}
]
}
myCharts.setOption(option)
</script>
</body>
</html>
坐标轴位置可以控制:
dataZoom
1.基础版本toolbox
: 先来看一个基础版本的效果:
<!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>直角坐标系常用配置-dataZoom</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;"></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 option = {
toolbox: {
feature: {
dataZoom: {
}
}
},
grid: {
show: true,
borderWidth: 2,
left: 50,
top: 50
},
xAxis: {
type: 'category',
data: xDataArr
},
yAxis: {
type: 'value'
},
series: [
{
name: 'Math',
type: 'bar',
data: yDataArr,
itemStyle: {
color: 'lightblue'
}
}
]
}
myCharts.setOption(option)
</script>
</body>
</html>
核心代码:
2. dataZoom
如果配置:
下面的就没有了,可以用鼠标滚轮代替