直角坐标系图表：柱状图、折线图、散点图
配置1：网格grid
grid是用来控制直角坐标系的布局和大小
x轴和y轴就是在grid的基础上进行绘制的
- 显示grid
show - grid的边框
borderWidth、borderColor - grid的位置和大小
left 、top、right、bottom
width、height
grid: {
show: true,
borderWidth: 10,
borderCorlor:'red',
left:120,
top:120,
width: 300,
height: 150
},
image.png
配置2：坐标轴axis
坐标轴分为x轴和y轴
一个grid中最多有两种位置的x轴和y轴
- 坐标轴类型 type
value：数值轴，自动会从目标数据中读取数据
category：类目轴，该类型必须通过data设置类目数据 - 显示位置 position
xAxis：可取值为top或者bottom
yAxis：可取值为left或者right
xAxis: {
type: 'category', //类目轴
data: [
'小明',
'小红',
'小王'
],
position: 'top'
},
yAxis: {
type: 'value', //数值轴
position: 'right'
},
image.png
配置3：区域缩放 dataZoom
dataZoom用于区域缩放，对数据范围过滤，x轴和y轴都可以拥有
dataZoom是一个数组，意味着可以配置多个区域缩放器
- 类型 type
slider：滑块
inside：内置，依靠鼠标滚轮或者双指缩放 - 指明产生的作用轴
xAxisIndex：设置缩放组件控制的是哪个x轴，一般写0即可
yAxisIndex：设置缩放组件控制的是哪个y轴，一般写0即可 - 指明初始状态的缩放情况 （筛选符合情况的数据进行展示）
start：数据窗口范围的起始百分比
end：数据窗口范围的结束百分比
示例代码如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>echarts的快速上手</title>
<!-- 步骤1：引入echarts.js文件 -->
<script src="lib/echarts.js"></script>
</head>
<body>
<!-- 步骤2：准备一个呈现图标的盒子 -->
<div style="width: 600px; height: 400px;"></div>
<script>
// 步骤3：初始化echarts实例对象
// 参数，dom，决定图标最终呈现的位置
let mCharts = echarts.init(document.querySelector('div'));
// 步骤四：准备配置项
let option = {
dataZoom: [
{
// type:'slider',
type:'inside',
xAxisIndex:0
},
{
type:'slider',
yAxisIndex:0,
start:0,
end:80
}
],
grid: {
show: true,
// borderWidth: 10,
borderCorlor:'red',
// left:120,
// top:120,
// width: 300,
// height: 150
},
xAxis: {
type: 'category', //类目轴
data: [
'小明',
'小红',
'小王'
],
position: 'top'
},
yAxis: {
type: 'value', //数值轴
position: 'right'
},
series: [
{
name: '语文',
type: 'bar',
data: [70, 92, 87]
}
]
}
// 步骤5：将配置项设置给echarts实例对象
mCharts.setOption(option)
</script>
</body>
</html>
image.png
