每个图表均配有对应的源代码以及知识点~~~~
详情可点开对应的图表学习!
各类常用图表总结在此!配合使用更方便~
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</