| Title_font | ||
|---|---|---|
|
ECharts图形的通用设置包括“画布大小、背景颜色、显示方式、边距、初始化动画、防止Y轴标签溢出、防止X轴标签溢出”等。
| 面板 | ||||||||
|---|---|---|---|---|---|---|---|---|
| ||||||||
|
| Title_font | ||
|---|---|---|
|
| Wiki 标记 |
|---|
{html}<div style="border-bottom: 0.5px solid #dfe1e5;color:#2D5C8C;padding-bottom: 0.5px;font-size: 24px; height: 5px;"> </div>{html} |
属性说明
从宽度和高度设置画布的大小。
预览效果
两种不同的画布大小效果如图：
| Title_font | ||
|---|---|---|
|
| Wiki 标记 |
|---|
{html}<div style="border-bottom: 0.5px solid #dfe1e5;color:#2D5C8C;padding-bottom: 0.5px;font-size: 24px; height: 5px;"> </div>{html} |
属性说明
点击颜色框为背景选择颜色。
可以选择现有颜色，也可以在输入框输入颜色代码。
预览效果
两种不同的背景颜色效果如图：
| Title_font | ||
|---|---|---|
|
| Wiki 标记 |
|---|
{html}<div style="border-bottom: 0.5px solid #dfe1e5;color:#2D5C8C;padding-bottom: 0.5px;font-size: 24px; height: 5px;"> </div>{html} |
属性说明
切换图形类型。
除了在“显示方式”属性切换图形外，ECharts图形支持在图形栏切换图形。
各种图形可切换的类型如下：
| 图形 | 显示方式 |
|---|---|
| 柱图 | 普通柱图、堆积柱图、普通横条图、堆积横条图、瀑布图 |
| 线图 | 标准折线图、标准面积图、堆积面积图 |
| 饼图 | 标准饼图、标准圆环图、南丁格尔玫瑰图 |
| 树图 | 标准树图、从上向下树图、从下向上树图、从右向左树图、径向树图 |
| Title_font | ||
|---|---|---|
|
| Wiki 标记 |
|---|
{html}<div style="border-bottom: 0.5px solid #dfe1e5;color:#2D5C8C;padding-bottom: 0.5px;font-size: 24px; height: 5px;"> </div>{html} |
属性说明
设置图形边距。
- 左：图形离画布左侧的距离。
- 上：图形离画布上侧的距离。
- 右：图形离画布右侧的距离。
- 下：图形离画布下侧的距离。
说明：设置的边距值可以像“20”这样的具体像素值，可以是像“20%”这样相对于画布高宽的百分比。
预览效果
| Title_font | ||
|---|---|---|
|
| Wiki 标记 |
|---|
{html}<div style="border-bottom: 0.5px solid #dfe1e5;color:#2D5C8C;padding-bottom: 0.5px;font-size: 24px; height: 5px;"> </div>{html} |
属性说明
打开或刷新电子表格，图形是否开启动画。
预览效果
设置“初始化动画”，打开或刷新电子表格时，图形以动画形式出现，如图：
不设置“初始化动画”，打开或刷新电子表格时，图形则静态形式出现，如图：
| Title_font | ||
|---|---|---|
|
| Wiki 标记 |
|---|
{html}<div style="border-bottom: 0.5px solid #dfe1e5;color:#2D5C8C;padding-bottom: 0.5px;font-size: 24px; height: 5px;"> </div>{html} |
属性说明
防止Y轴标签长度动态变化时，可能会溢出容器或者覆盖其他组件。
预览效果
设置与不设置“防止Y轴标签溢出”效果对比，如图：
| Title_font | ||
|---|---|---|
|
| Wiki 标记 |
|---|
{html}<div style="border-bottom: 0.5px solid #dfe1e5;color:#2D5C8C;padding-bottom: 0.5px;font-size: 24px; height: 5px;"> </div>{html} |
属性说明
防止X轴标签长度动态变化时，可能会溢出容器或者覆盖其他组件。
预览效果
设置与不设置“防止X轴标签溢出”效果对比，如图：
| Title_font | ||
|---|---|---|
|
| Wiki 标记 |
|---|
{html}<div style="border-bottom: 0.5px solid #dfe1e5;color:#2D5C8C;padding-bottom: 0.5px;font-size: 24px; height: 5px;"> </div>{html} |
属性说明
设置是否允许对地图进行缩放和平移的操作。
预览效果
允许缩放和平移效果，如图：
| Title_font | ||
|---|---|---|
|
| Wiki 标记 |
|---|
{html}<div style="border-bottom: 0.5px solid #dfe1e5;color:#2D5C8C;padding-bottom: 0.5px;font-size: 24px; height: 5px;"> </div>{html} |
属性说明
当有两个字段都作为指标时，在图形上两个区域标识的标记点会重合，可通过设置经度偏移量将两个标记点分开。
经度偏移量越大，则两个标识点之间的距离就会越大。
预览效果
设置不同的经度偏移量效果对比，如图：
| Title_font | ||
|---|---|---|
|
| Wiki 标记 |
|---|
{html}<div style="border-bottom: 0.5px solid #dfe1e5;color:#2D5C8C;padding-bottom: 0.5px;font-size: 24px; height: 5px;"> </div>{html} |
属性说明
设置3D柱图/3D散点图画布的宽度。
预览效果
两种不同数值大小的宽度效果对比，如下：
| Title_font | ||
|---|---|---|
|
| Wiki 标记 |
|---|
{html}<div style="border-bottom: 0.5px solid #dfe1e5;color:#2D5C8C;padding-bottom: 0.5px;font-size: 24px; height: 5px;"> </div>{html} |
属性说明
设置3D柱图/3D散点图画布的高度。
预览效果
两种不同数值大小的高度效果对比，如下：
| Title_font | ||
|---|---|---|
|
| Wiki 标记 |
|---|
{html}<div style="border-bottom: 0.5px solid #dfe1e5;color:#2D5C8C;padding-bottom: 0.5px;font-size: 24px; height: 5px;"> </div>{html} |
属性说明
设置3D柱图/3D散点图空间坐标系的宽度。
预览效果
设置不同数值大小的空间坐标系宽度效果对比，如下：
| Title_font | ||
|---|---|---|
|
| Wiki 标记 |
|---|
{html}<div style="border-bottom: 0.5px solid #dfe1e5;color:#2D5C8C;padding-bottom: 0.5px;font-size: 24px; height: 5px;"> </div>{html} |
属性说明
设置3D柱图/3D散点图空间坐标系的高度。
预览效果
设置不同数值大小的空间坐标系高度效果对比，如下：
| Title_font | ||
|---|---|---|
|
| Wiki 标记 |
|---|
{html}<div style="border-bottom: 0.5px solid #dfe1e5;color:#2D5C8C;padding-bottom: 0.5px;font-size: 24px; height: 5px;"> </div>{html} |
属性说明
设置3D柱图/3D散点图空间坐标系的深度。
预览效果
设置不同数值大小的空间坐标系深度效果对比，如下：
| Title_font | ||
|---|---|---|
|
| Wiki 标记 |
|---|
{html}<div style="border-bottom: 0.5px solid #dfe1e5;color:#2D5C8C;padding-bottom: 0.5px;font-size: 24px; height: 5px;"> </div>{html} |
属性说明
设置3D柱图/3D散点图是否显示坐标系。
预览效果
设置显示与不显示坐标系效果对比，如下：
| Title_font | ||
|---|---|---|
|
ECharts图形的通用设置包括“画布大小、背景颜色、显示方式、边距、初始化动画、防止Y轴标签溢出、防止X轴标签溢出”等。
| 面板 | ||||||||
|---|---|---|---|---|---|---|---|---|
| ||||||||
|
| Title_font | ||
|---|---|---|
|
| Wiki 标记 |
|---|
{html}<div style="border-bottom: 0.5px solid #dfe1e5;color:#2D5C8C;padding-bottom: 0.5px;font-size: 24px; height: 5px;"> </div>{html} |
属性说明
从宽度和高度设置画布的大小。
预览效果
两种不同的画布大小效果如图：
| Title_font | ||
|---|---|---|
|
| Wiki 标记 |
|---|
{html}<div style="border-bottom: 0.5px solid #dfe1e5;color:#2D5C8C;padding-bottom: 0.5px;font-size: 24px; height: 5px;"> </div>{html} |
属性说明
点击颜色框为背景选择颜色。
可以选择现有颜色，也可以在输入框输入颜色代码。
预览效果
两种不同的背景颜色效果如图：
| Title_font | ||
|---|---|---|
|
| Wiki 标记 |
|---|
{html}<div style="border-bottom: 0.5px solid #dfe1e5;color:#2D5C8C;padding-bottom: 0.5px;font-size: 24px; height: 5px;"> </div>{html} |
属性说明
切换图形类型。
除了在“显示方式”属性切换图形外，ECharts图形支持在图形栏切换图形。
各种图形可切换的类型如下：
| 图形 | 显示方式 |
|---|---|
| 柱图 | 普通柱图、堆积柱图、普通横条图、堆积横条图、瀑布图 |
| 线图 | 标准折线图、标准面积图、堆积面积图 |
| 饼图 | 标准饼图、标准圆环图、南丁格尔玫瑰图 |
| 树图 | 标准树图、从上向下树图、从下向上树图、从右向左树图、径向树图 |
| Title_font | ||
|---|---|---|
|
| Wiki 标记 |
|---|
{html}<div style="border-bottom: 0.5px solid #dfe1e5;color:#2D5C8C;padding-bottom: 0.5px;font-size: 24px; height: 5px;"> </div>{html} |
属性说明
设置图形边距。
- 左：图形离画布左侧的距离。
- 上：图形离画布上侧的距离。
- 右：图形离画布右侧的距离。
- 下：图形离画布下侧的距离。
说明：设置的边距值可以像“20”这样的具体像素值，可以是像“20%”这样相对于画布高宽的百分比。
预览效果
| Title_font | ||
|---|---|---|
|
| Wiki 标记 |
|---|
{html}<div style="border-bottom: 0.5px solid #dfe1e5;color:#2D5C8C;padding-bottom: 0.5px;font-size: 24px; height: 5px;"> </div>{html} |
属性说明
打开或刷新电子表格，图形是否开启动画。
预览效果
设置“初始化动画”，打开或刷新电子表格时，图形以动画形式出现，如图：
不设置“初始化动画”，打开或刷新电子表格时，图形则静态形式出现，如图：
| Title_font | ||
|---|---|---|
|
| Wiki 标记 |
|---|
{html}<div style="border-bottom: 0.5px solid #dfe1e5;color:#2D5C8C;padding-bottom: 0.5px;font-size: 24px; height: 5px;"> </div>{html} |
属性说明
防止Y轴标签长度动态变化时，可能会溢出容器或者覆盖其他组件。
预览效果
设置与不设置“防止Y轴标签溢出”效果对比，如图：
| Title_font | ||
|---|---|---|
|
| Wiki 标记 |
|---|
{html}<div style="border-bottom: 0.5px solid #dfe1e5;color:#2D5C8C;padding-bottom: 0.5px;font-size: 24px; height: 5px;"> </div>{html} |
属性说明
防止X轴标签长度动态变化时，可能会溢出容器或者覆盖其他组件。
预览效果
设置与不设置“防止X轴标签溢出”效果对比，如图：
| Title_font | ||
|---|---|---|
|
| Wiki 标记 |
|---|
{html}<div style="border-bottom: 0.5px solid #dfe1e5;color:#2D5C8C;padding-bottom: 0.5px;font-size: 24px; height: 5px;"> </div>{html} |
属性说明
设置是否允许对地图进行缩放和平移的操作。
预览效果
允许缩放和平移效果，如图：
| Title_font | ||
|---|---|---|
|
| Wiki 标记 |
|---|
{html}<div style="border-bottom: 0.5px solid #dfe1e5;color:#2D5C8C;padding-bottom: 0.5px;font-size: 24px; height: 5px;"> </div>{html} |
属性说明
当有两个字段都作为指标时，在图形上两个区域标识的标记点会重合，可通过设置经度偏移量将两个标记点分开。
经度偏移量越大，则两个标识点之间的距离就会越大。
预览效果
设置不同的经度偏移量效果对比，如图：
| Title_font | ||
|---|---|---|
|
| Wiki 标记 |
|---|
{html}<div style="border-bottom: 0.5px solid #dfe1e5;color:#2D5C8C;padding-bottom: 0.5px;font-size: 24px; height: 5px;"> </div>{html} |
属性说明
设置3D柱图/3D散点图画布的宽度。
预览效果
两种不同数值大小的宽度效果对比，如下：
| Title_font | ||
|---|---|---|
|
| Wiki 标记 |
|---|
{html}<div style="border-bottom: 0.5px solid #dfe1e5;color:#2D5C8C;padding-bottom: 0.5px;font-size: 24px; height: 5px;"> </div>{html} |
属性说明
设置3D柱图/3D散点图画布的高度。
预览效果
两种不同数值大小的高度效果对比，如下：
| Title_font | ||
|---|---|---|
|
| Wiki 标记 |
|---|
{html}<div style="border-bottom: 0.5px solid #dfe1e5;color:#2D5C8C;padding-bottom: 0.5px;font-size: 24px; height: 5px;"> </div>{html} |
属性说明
设置3D柱图/3D散点图空间坐标系的宽度。
预览效果
设置不同数值大小的空间坐标系宽度效果对比，如下：
| Title_font | ||
|---|---|---|
|
| Wiki 标记 |
|---|
{html}<div style="border-bottom: 0.5px solid #dfe1e5;color:#2D5C8C;padding-bottom: 0.5px;font-size: 24px; height: 5px;"> </div>{html} |
属性说明
设置3D柱图/3D散点图空间坐标系的高度。
预览效果
设置不同数值大小的空间坐标系高度效果对比，如下：
| Title_font | ||
|---|---|---|
|
| Wiki 标记 |
|---|
{html}<div style="border-bottom: 0.5px solid #dfe1e5;color:#2D5C8C;padding-bottom: 0.5px;font-size: 24px; height: 5px;"> </div>{html} |
属性说明
设置3D柱图/3D散点图空间坐标系的深度。
预览效果
设置不同数值大小的空间坐标系深度效果对比，如下：
| Title_font | ||
|---|---|---|
|
| Wiki 标记 |
|---|
{html}<div style="border-bottom: 0.5px solid #dfe1e5;color:#2D5C8C;padding-bottom: 0.5px;font-size: 24px; height: 5px;"> </div>{html} |
属性说明
设置3D柱图/3D散点图是否显示坐标系。
预览效果
设置显示与不显示坐标系效果对比，如下：
