Apache Echarts常用图表|关于直角坐标系的常用配置

每个图表均配有对应的源代码以及知识点~~~~
详情可点开对应的图表学习！
各类常用图表总结在此！配合使用更方便~
https://blog.csdn.net/diviner_s/article/details/116072584
官方对应文件工具，有更详细的工具使用方法：
https://echarts.apache.org/zh/option.html

直角坐标系的常用配置

直角坐标系的图表指的是带有x轴和y轴的图表，常见的直角坐标系的图表有：柱状图，折线图，散点图。

网格 grid

grid是直角坐标系内绘图网格，单个 grid 内最多可以放置上下两个 X 轴，左右两个 Y 轴。它可以用来控制直角坐标系的布局和大小，x轴和y轴就是在grid的基础上进行绘制的。

在 ECharts 2.x 里单个 echarts 实例中最多只能存在一个 grid 组件，在 ECharts 3 中可以存在任意个 grid 组件。

gird.show

boolean型
是否显示直角坐标系网格。

gird.borderWidth

number型
网格的边框线宽。

注意：此配置项生效的前提是，设置了 show: true。

grid的位置和大小

• grid.left
  grid 组件离容器左侧的距离。

  left 的值可以是像 20 这样的具体像素值，可以是像 '20%' 这样相对于容器高宽的百分比，也可以是 'left', 'center','right'。

  如果 left 的值为'left', 'center', 'right'，组件会根据相应的位置自动对齐。

• grid.top
  grid 组件离容器上侧的距离。

  top 的值可以是像 20 这样的具体像素值，可以是像 '20%'这样相对于容器高宽的百分比，也可以是 'top', 'middle', 'bottom'。

  如果 top 的值为'top', 'middle', 'bottom'，组件会根据相应的位置自动对齐。

• grid.right
  grid 组件离容器右侧的距离。

  right 的值可以是像 20 这样的具体像素值，可以是像 '20%' 这样相对于容器高宽的百分比。

• grid.botton
  grid 组件离容器下侧的距离。
  bottom 的值可以是像 20 这样的具体像素值，可以是像 '20%' 这样相对于容器高宽的百分比。

• grid.width == ‘auto’
  grid 组件的宽度。默认自适应。

• grid.height = ‘auto’
  grid 组件的高度。默认自适应。

  var option = {
         
  	grid: {
         
  		show: true, // 显示grid
  		borderWidth: 10, // grid的边框宽度
  		borderColor: 'red', // grid的边框颜色
  		left: 100, // grid的位置
  		top: 100,
  		width: 300, // grid的大小
  		height: 150
  	}
  }
  

坐标轴 axis

坐标轴分为x轴和y轴，一个grid中最多有两种位置的x轴和y轴

• 坐标轴类型 type
  • value:数值轴，自动会从目标数据中读取数据
  • category类目轴，该类型必须通过data设置类目数据
• 坐标轴位置
  • xAxis：可取值为top或者bottom
  • yAxis：可取值为left或者right

var option = {
     
	xAxis: {
     
		type: 'category',
		data: xDataArr,
		position: 'top'
	},
	yAxis: {
     
		type: 'value',
		position: 'right'
	}
}

区域缩放 dataZoom

dataZoom 组件 用于区域缩放，从而能自由关注细节的数据信息，或者概览数据整体，或者去除离群点的影响。

• 区域缩放类型 type
  slider : 滑块
  inside : 内置, 依靠鼠标滚轮或者双指缩放

• 产生作用的轴
  xAxisIndex :设置缩放组件控制的是哪个 x 轴, 一般写0即可
  yAxisIndex :设置缩放组件控制的是哪个 y 轴, 一般写0即可

• 指明初始状态的缩放情况
  start : 数据窗口范围的起始百分比
  end: 数据窗口范围的结束百分比

  var option = {
         
  	xAxis: {
         
  		type: 'category',
  		data: xDataArr
  	},
  	yAxis: {
         
  		type: 'value'
  	},
  	dataZoom: [
  		{
         
  			type: 'slider',
  			xAxisIndex: 0
  		},
  		{
         
  		type: 'slider',
  		yAxisIndex: 0,
  		start: 0,
  		end: 80
  		}
  	]
  }
  

需要注意的是, 针对于非直角坐标系图表, 比如饼图 地图 等, 以上三个配置可能就不会生效了