页面树结构

版本比较

标识

  • 该行被添加。
  • 该行被删除。
  • 格式已经改变。
评论: Migration of unmigrated content due to installation of a new plugin

ECharts图形的基本设置有:通用、普通状态设置、高亮状态设置、其他设置等。

Title_font
Name

通用

普通状态设置

Echarts图形的通用设置包括“画布大小、背景颜色、显示方式、边距、初始化动画、防止Y轴标签溢出、防止X轴标签溢出”等。ECharts图形中基本设置的普通状态设置包括“区域边界、区域背景色”。

Image RemovedImage Added

 

 



Title_font
Name

画布大小

区域边界

Wiki 标记
{html}<div style="border-bottom: 0.5px solid #dfe1e5;color:#2D5C8C;padding-bottom: 0.5px;font-size: 24px; height: 5px;">&nbsp;</div>{html}

属性说明

从宽度和高度设置画布的大小。设置区域之间的边界颜色。

Image RemovedImage Added预览效果

  • 指定地图为“中国”时,则是设置省份与省份之间的边界颜色;
两种不同的画布大小效果如图:
  • 指定地图为“省份”时,则是设置市与市之间的边界颜色。

Image Removed预览效果

 以“中国”地图为例,两种不同区域边界颜色效果如图: 


面板
title_font
borderColor
Name
Wiki 标记
{html}<div style="border-bottom: 0.5px solid #dfe1e5;color:#2D5C8C;padding-bottom: 0.5px;font-size: 24px; height: 5px;">&nbsp;</div>{html}

属性说明

点击颜色框选择颜色。

可以选择现有颜色,也可以在输入框输入颜色代码。

Image Removed

预览效果

两种不同的背景颜色效果如图:

Image Removed

 

 
#BBBBBB
背景颜色
bgColor#F0F0F0
borderWidth1
borderStylesolid

目录


Image Added



Title_font
Name

显示方式

区域背景色

Wiki 标记
{html}<div style="border-bottom: 0.5px solid #dfe1e5;color:#2D5C8C;padding-bottom: 0.5px;font-size: 24px; height: 5px;">&nbsp;</div>{html}

属性说明

切换图形类型。

设置区域的背景颜色。

除了在“显示方式”属性切换图形外,Echarts图形支持在图形栏切换图形。

Image Added

Image Removed

预览效果

各种图形可切换的类型如下:

以“中国”地图为例,两种不同区域背景色效果如图:

图形

Image Added

显示方式



Title_font

柱图

Name

普通柱图、堆积柱图、普通横条、堆积横条、瀑布图

高亮状态设置

线图

ECharts图形中基本设置的高亮状态设置包括“高亮区域边界、高亮区域背景色”。

标准折线图、标准面积图、堆积面积图

 

 

高亮:当鼠标光标选中或移至某区域时,该区域呈现高亮状态。

饼图标准饼图、标准圆环图、南丁格尔玫瑰图树图标准树图、从上向下树图、从下向上树图、从右向左树图、径向树图

Image Added



Title_font
Name

边距

高亮区域边界

Wiki 标记
{html}<div style="border-bottom: 0.5px solid #dfe1e5;color:#2D5C8C;padding-bottom: 0.5px;font-size: 24px; height: 5px;">&nbsp;</div>{html}

属性说明

设置图形边距。

Image Removed

  • 左:图形离画布左侧的距离。
  • 上:图形离画布上侧的距离。
  • 右:图形离画布右侧的距离。
  • 下:图形离画布下侧的距离。
说明:设置的边距值可以像“20”这样的具体像素值,可以是像“20%”这样相对于画布高宽的百分比。

设置当鼠标选中某区域时,该区域的边界颜色。

Image Added

预览效果

Image Removed

以“中国”地图为例,选中“新疆”,“新疆”的边界颜色为蓝色。

 

Image Added

 



Title_font
Name

初始化动画

高亮区域背景色

Wiki 标记
{html}<div style="border-bottom: 0.5px solid #dfe1e5;color:#2D5C8C;padding-bottom: 0.5px;font-size: 24px; height: 5px;">&nbsp;</div>{html}

属性说明

打开或刷新电子表格,图形是否开启动画。

设置当鼠标选中某区域时,该区域的背景颜色。

Image Removed

Image Added

预览效果

设置“初始化动画”,打开或刷新电子表格时,图形以动画形式出现,如图:

Image Removed

不设置“初始化动画”,打开或刷新电子表格时,图形则静态形式出现,如图:

Image Removed
Wiki 标记
{html}<div style="border-bottom: 0.5px solid #dfe1e5;color:#2D5C8C;padding-bottom: 0.5px;font-size: 24px; height: 5px;">&nbsp;</div>{html}

属性说明

防止Y轴标签长度动态变化时,可能会溢出容器或者覆盖其他组件。

Image Removed

预览效果

设置与不设置“防止Y轴标签溢出”效果对比,如图:

Image Removed

 

 

以“中国”地图为例,选中“新疆”,“新疆”的背景颜色为蓝色。

Image Added



Title_font
Name

防止Y轴标签溢出

其他设置

ECharts图形对区域标签的设置。

Image Added



Title_font
Name

防止X轴标签溢出

区域标签

Wiki 标记
{html}<div style="border-bottom: 0.5px solid #dfe1e5;color:#2D5C8C;padding-bottom: 0.5px;font-size: 24px; height: 5px;">&nbsp;</div>{html}

属性说明

设置地图的各个区域是否显示其标签。

防止X轴标签长度动态变化时,可能会溢出容器或者覆盖其他组件。

Image Added

Image Removed

以“中国”地图为例,设置显示“区域标签”,则每个省份显示其名字。

预览效果

设置与不设置“防止X轴标签溢出”效果对比,如图:

设置显示与不显示“区域标签”效果对比,如图:

Image Removed
Wiki 标记
{html}<div style="border-bottom: 0.5px solid #dfe1e5;color:#2D5C8C;padding-bottom: 0.5px;font-size: 24px; height: 5px;">&nbsp;</div>{html}

属性说明

设置是否允许对地图进行缩放和平移的操作。

Image Removed

预览效果

允许缩放和平移效果,如图:

Image Removed

Image Added



Title_font
Name

地图缩放和平移

坐标轴线

ECharts图形中对3D柱图/3D散点图的坐标轴线的设置。

Image Added



Title_font
Name

经度偏移量

线条样式

Wiki 标记
{html}<div style="border-bottom: 0.5px solid #dfe1e5;color:#2D5C8C;padding-bottom: 0.5px;font-size: 24px; height: 5px;">&nbsp;</div>{html}

属性说明

当有两个字段都作为指标时,在图形上两个区域标识的标记点会重合,可通过设置经度偏移量将两个标记点分开。

设置3D柱图/3D散点图的坐标轴线样式。

经度偏移量越大,则两个标识点之间的距离就会越大。

Image Added

Image Removed
  • 透明度:设置坐标轴线的透明程度。
预览效果
  • 宽度:设置坐标轴线的宽度,可设置为无线。

设置不同的经度偏移量效果对比,如图:

Image Removed

 

 

Title_font
Name宽度

Wiki 标记
{html}<div style="border-bottom: 0.5px solid #dfe1e5;color:#2D5C8C;padding-bottom: 0.5px;font-size: 24px; height: 5px;">&nbsp;</div>{html}

属性说明

设置3D柱图/3D散点图的宽度。

Image Removed

预览效果

添加背景颜色能直观地看出图形的宽度变化,两种不同数值大小的宽度效果对比,如下:

Image Removed
Wiki 标记
{html}<div style="border-bottom: 0.5px solid #dfe1e5;color:#2D5C8C;padding-bottom: 0.5px;font-size: 24px; height: 5px;">&nbsp;</div>{html}

属性说明

设置3D柱图/3D散点图的宽度。

Image Removed

预览效果

添加背景颜色能直观地看出图形的宽度变化,两种不同数值大小的高度效果对比,如下:

Image Removed

 

 

  • 线条颜色:设置坐标轴线的颜色。(说明:在未设置坐标轴名称样式和刻度标签样式时,设置坐标轴线的线条颜色,坐标轴名称颜色和刻度标签颜色默认与坐标轴线的颜色保持一致。)
                     

预览效果

设置透明度都为1,宽度都为2像素,不同的线条颜色效果对比,如下:

Image Added

设置宽度都为2像素,颜色都为黑色,不同透明度的效果对比,如下:

Image Added

设置透明度都为1,颜色都为黑色,不同的宽度效果对比,如下:

Image Added



Title_font
Name

高度

刻度标签

ECharts图形中对3D柱图/3D散点图的刻度标签的设置。

Image Added




Title_font
Name

空间坐标系宽度

是否显示

Wiki 标记
{html}<div style="border-bottom: 0.5px solid #dfe1e5;color:#2D5C8C;padding-bottom: 0.5px;font-size: 24px; height: 5px;">&nbsp;</div>{html}

属性说明

设置3D柱图/

3D散点图空间坐标系的宽度。

3D散点图是否显示刻度标签。

Image Removed

Image Added

预览效果

设置不同数值大小的空间坐标系宽度效果对比,如下:

设置显示与不显示刻度标签效果对比,如下:

Image Removed

Image Added



Title_font
Name

空间坐标系高度

刻度标签样式

Wiki 标记
{html}<div style="border-bottom: 0.5px solid #dfe1e5;color:#2D5C8C;padding-bottom: 0.5px;font-size: 24px; height: 5px;">&nbsp;</div>{html}

属性说明

设置3D柱图/

3D散点图空间坐标系的高度。

3D散点图中刻度标签的样式。

Image Removed

Image Added

预览效果

设置不同数值大小的空间坐标系高度效果对比,如下:

设置不同颜色的刻度标签效果对比,如下:

Image Removed

Image Added



Title_font
Name

空间坐标系深度
Wiki 标记
{html}<div style="border-bottom: 0.5px solid #dfe1e5;color:#2D5C8C;padding-bottom: 0.5px;font-size: 24px; height: 5px;">&nbsp;</div>{html}

属性说明

设置3D柱图/3D散点图空间坐标系的深度。

Image Removed

预览效果

设置不同数值大小的空间坐标系深度效果对比,如下:

Image Removed

坐标轴刻度

ECharts图形中对3D柱图/3D散点图中坐标轴刻度的设置。

Image Added



Title_font
Name

背景颜色

是否显示

Wiki 标记
{html}<div style="border-bottom: 0.5px solid #dfe1e5;color:#2D5C8C;padding-bottom: 0.5px;font-size: 24px; height: 5px;">&nbsp;</div>{html}

属性说明

设置3D柱图/

3D散点图的背景颜色。

3D散点图是否显示坐标轴刻度。

Image Removed

Image Added

预览效果

设置不同的背景颜色效果对比,如下:

设置显示与不显示坐标轴刻度效果对比,如下:

Image Removed

Image Added



Title_font
Name

是否显示坐标系

线条样式

Wiki 标记
{html}<div style="border-bottom: 0.5px solid #dfe1e5;color:#2D5C8C;padding-bottom: 0.5px;font-size: 24px; height: 5px;">&nbsp;</div>{html}

属性说明

设置3D柱图/

3D散点图是否显示坐标系。

3D散点图中坐标轴刻度的样式。

Image Removed

Image Added

预览效果
  • 透明度:设置坐标轴刻度的透明程度。
设置显示与不显示坐标系效果对比,如下:
  • 宽度:设置坐标轴刻度的宽度,可设置为无线。
Image Removed
  • 线条颜色:设置坐标轴刻度的颜色。
 

预览效果

title_font

设置透明度都为1,宽度都为2像素,不同颜色的坐标轴刻度效果对比,如下:

Name

Image Added

普通状态设置

设置颜色都为黑色,宽度都为2像素,不同透明度的坐标轴刻度效果对比,如下:

Echarts图形的普通状态设置包括“区域边界、区域背景色”。

Image Added

Image Removed

设置透明度都为1,颜色都为黑色,不同的宽度效果对比,如下:

 

Image Added

 

Wiki 标记
{html}<div style="border-bottom: 0.5px solid #dfe1e5;color:#2D5C8C;padding-bottom: 0.5px;font-size: 24px; height: 5px;">&nbsp;</div>{html}

属性说明

设置区域之间的边界颜色。

Image Removed

  • 指定地图为“中国”时,则是设置省份与省份之间的边界颜色;
  • 指定地图为“省份”时,则是设置市与市之间的边界颜色。

预览效果

以“中国”地图为例,两种不同区域边界颜色效果如图:

Image Removed

 




Title_font
Name

区域边界

分隔线

ECharts图形中对3D柱图/3D散点图中分隔线的设置。

Image Added



Title_font
Name

区域背景色

是否显示

Wiki 标记
{html}<div style="border-bottom: 0.5px solid #dfe1e5;color:#2D5C8C;padding-bottom: 0.5px;font-size: 24px; height: 5px;">&nbsp;</div>{html}

属性说明

设置所有区域背景颜色。

设置3D柱图/3D散点图是否显示分隔线。

Image Removed

Image Added

预览效果

以“中国”地图为例,两种不同区域背景色效果如图:

设置显示与不显示分隔线效果对比,如下:

Image Removed

Image Added

 



Title_font
Name

高亮状态设置

Echarts图形的高亮状态设置包括“高亮区域边界、高亮区域背景色”。

高亮:当鼠标光标选中或移至某区域时,该区域呈现高亮状态。

Image Removed

 

Title_fontName高亮区域边界

分隔线样式

Wiki 标记
{html}<div style="border-bottom: 0.5px solid #dfe1e5;color:#2D5C8C;padding-bottom: 0.5px;font-size: 24px; height: 5px;">&nbsp;</div>{html}

属性说明

设置当鼠标选中某区域时,该区域的边界颜色。

设置3D柱图/3D散点图中分隔线的样式。

Image Removed

Image Added

预览效果
  • 透明度:设置分隔线的透明程度。
以“中国”地图为例,选中“新疆”,“新疆”的边界颜色为蓝色。
  • 宽度:设置分隔线的宽度,可设置为无线。
Image Removed
  • 线条颜色:设置分隔线的颜色。
title_font

预览效果

Name

设置透明度都为1,宽度都为2像素,不同颜色的分隔线效果对比,如下:

高亮区域背景色
Wiki 标记
{html}<div style="border-bottom: 0.5px solid #dfe1e5;color:#2D5C8C;padding-bottom: 0.5px;font-size: 24px; height: 5px;">&nbsp;</div>{html}

属性说明

设置当鼠标选中某区域时,该区域的背景颜色。

Image Removed

预览效果

以“中国”地图为例,选中“新疆”,“新疆”的背景颜色为蓝色。

Image Removed

Image Added

设置颜色都为浅灰色,宽度都为2像素,不同透明度的分隔线效果对比,如下:

Image Added

设置颜色都为浅灰色,透明度都为1,不同宽度的分隔线效果对比,如下:

Image Added




Title_font
Name

其他设置

Echarts图形对区域标签的设置。

Image Removed

分隔区域

ECharts图形中对3D柱图/3D散点图中分隔区域的设置。

Image Added




Title_font
Name

区域标签

是否显示

Wiki 标记
{html}<div style="border-bottom: 0.5px solid #dfe1e5;color:#2D5C8C;padding-bottom: 0.5px;font-size: 24px; height: 5px;">&nbsp;</div>{html}

属性说明

设置地图的各个区域是否显示其标签。

Image Removed

以“中国”地图为例,设置显示“区域标签”,则每个省份显示其名字。

设置3D柱图/3D散点图是否显示分隔区域。

Image Added

预览效果

设置显示与不显示“区域标签”效果对比,如图:

设置显示与不显示分隔区域的效果对比,如下:

Image Removed

 

Image Added

 



Title_font
Name

坐标轴线

视角控制

Echarts图形中对3D柱图

ECharts图形中对3D柱图/

3D散点图的坐标轴线的设置。

3D散点图的视角控制的设置包括“投影方式、是否自动旋转、旋转方向、旋转速度和恢复时间”。

Image Removed

Image Added

 

 




Title_font
Name

线条样式

投影方式

Wiki 标记
{html}<div style="border-bottom: 0.5px solid #dfe1e5;color:#2D5C8C;padding-bottom: 0.5px;font-size: 24px; height: 5px;">&nbsp;</div>{html}

属性说明

设置3D柱图/

3D散点图的坐标轴线样式。

3D散点图的投影方式,分为正交投影和透视投影。

Image Removed
  • 正交投影:正交投影就是平行投影,所有的投影方向都是平行的,不会交于一点,正交投影不会有近大远小的效果。
预览效果
  • 透视投影:透视投影使用另一种方法把物体投影到投影面上,能产生距离感。比如远的物体我们看起来就小,近的物体我们看起来就大。
设置透明度都为1,宽度都为2像素,不同的线条颜色效果对比,如下:

Image Added

Image Removed

预览效果

设置宽度都为2像素,颜色都为黑色,不同透明度的效果对比,如下:

正交投影:

Image Removed

Image Added

设置透明度都为1,颜色都为黑色,不同的宽度效果对比,如下:

透视投影:

Image Removed

Image Added

 

 



Title_font
Name

刻度标签

Echarts图形中对3D柱图/3D散点图的刻度标签的设置。

Image Removed

 

 

 

Title_fontName是否显示

是否自动旋转

Wiki 标记
{html}<div style="border-bottom: 0.5px solid #dfe1e5;color:#2D5C8C;padding-bottom: 0.5px;font-size: 24px; height: 5px;">&nbsp;</div>{html}

属性说明

设置3D柱图/

3D散点图是否显示刻度标签。

3D散点图是否会自动旋转。

Image Removed

Image Added

预览效果

设置显示与不显示刻度标签效果对比,如下:

设置自动旋转与不自动旋转,效果如下:

Image Removed

 

 

Image Added



Title_font
Name

刻度标签样式

旋转方向


Wiki 标记
{html}<div style="border-bottom: 0.5px solid #dfe1e5;color:#2D5C8C;padding-bottom: 0.5px;font-size: 24px; height: 5px;">&nbsp;</div>{html}

属性说明

设置3D柱图/

3D散点图的刻度标签的样式。

3D散点图旋转的方向。

Image Removed

Image Added

预览效果

设置不同颜色的刻度标签效果对比,如下:

Image Removed

 

 

Echarts图形中对3D柱图/3D散点图的坐标轴刻度的设置。

Image Removed

 

 

Title_font
Name是否显示

设置不同的旋转方向效果对比,如下:

Image Added



Title_font
Name

坐标轴刻度

旋转速度

Wiki 标记
{html}<div style="border-bottom: 0.5px solid #dfe1e5;color:#2D5C8C;padding-bottom: 0.5px;font-size: 24px; height: 5px;">&nbsp;</div>{html}

属性说明

设置3D柱图/

3D散点图是否显示坐标轴刻度。

3D散点图旋转的速度。

Image Removed

Image Added

预览效果

设置显示与不显示坐标轴刻度效果对比,如下:

设置顺时针旋转,不同旋转速度的效果对比,如下:

Image Removed

Image Added

 

 




Title_font
Name

线条样式

恢复时间

Wiki 标记
{html}<div style="border-bottom: 0.5px solid #dfe1e5;color:#2D5C8C;padding-bottom: 0.5px;font-size: 24px; height: 5px;">&nbsp;</div>{html}

属性说明

设置3D柱图

设置鼠标点击3D柱图/

3D散点图的坐标轴刻度的样式。

3D散点图时,图形停止旋转,经过所设定的恢复时间,图形恢复旋转。

Image Removed

Image Added

预览效果

设置透明度都为1,宽度都为2像素,不同颜色的坐标轴刻度效果对比,如下:

Image Removed

设置颜色都为黑色,宽度都为2像素,不同透明度的坐标轴刻度效果对比,如下:

Image Removed

设置透明度都为1,颜色都为黑色,不同的宽度效果对比,如下:

Image Removed

 

 

 

设置顺时针旋转且旋转角度为“10”,不同数值的恢复时间效果对比,如下:
Image Added





Title_font
Name

分隔线

视角设置

Echarts图形中对3D柱图/3D散点图的分隔线的设置。

Image Removed

 

 

ECharts图形中对显示方式为3维地理坐标的3D航线图的视角设置包括“绕X轴旋转角度和绕Y轴旋转角度”。

Image Added



Title_font
Name

是否显示

绕X轴旋转角度

Wiki 标记
{html}<div style="border-bottom: 0.5px solid #dfe1e5;color:#2D5C8C;padding-bottom: 0.5px;font-size: 24px; height: 5px;">&nbsp;</div>{html}

属性说明

设置3D柱图/3D散点图的分隔线是否显示。

设置显示方式为3维地理坐标的3D航线图的绕X轴旋转角度。

Image Removed

Image Added

预览效果

设置显示与不显示分隔线效果对比,如下:

Image Removed

 

 

设置图形绕X轴旋转的不同角度效果对比,如下:

Image Added



Title_font
Name

分隔线样式

绕Y轴旋转角度

Wiki 标记
{html}<div style="border-bottom: 0.5px solid #dfe1e5;color:#2D5C8C;padding-bottom: 0.5px;font-size: 24px; height: 5px;">&nbsp;</div>{html}

属性说明

设置3D柱图/3D散点图的分隔线的样式。

设置显示方式为3维地理坐标的3D航线图的绕Y轴旋转角度。

Image Removed

Image Added

预览效果

设置透明度都为1,宽度都为2像素,不同颜色的分隔线效果对比,如下:
设置图形绕Y轴旋转的不同角度效果对比,如下:

Image Removed

设置颜色都为浅灰色,宽度都为2像素,不同透明度的分隔线效果对比,如下:

Image Removed

设置颜色都为浅灰色,透明度都为1,不同宽度的分隔线效果对比,如下:

Image Removed

 

 

Image Added




Title_font
Name

分隔区域

3D散点设置

Echarts图形中对3D柱图/3D散点图的分隔区域的设置。

3D航线图开启3D散点,可对这几个配置项进行设置包括“标记的大小、标记的图形、是否显示标签”。

Image Removed

 

 

 

Image Added



Title_font
Name

是否显示

标记的大小

Wiki 标记
{html}<div style="border-bottom: 0.5px solid #dfe1e5;color:#2D5C8C;padding-bottom: 0.5px;font-size: 24px; height: 5px;">&nbsp;</div>{html}

属性说明

设置3D柱图/3D散点图的分隔区域是否显示。

设置开启3D散点后,3D航线图中标记的大小。

Image Removed

Image Added

预览效果

设置显示与不显示分隔区域的效果对比,如下:

设置不同大小的标记效果对比,如下:

Image Removed

Image Added

 

 



Title_font
Name

视角控制

Echarts图形中对3D柱图/3D散点图的视角控制的设置包括“投影方式、是否自动旋转、旋转方向、旋转速度和恢复时间”。

Image Removed

 

 

 

Title_fontName投影方式

标记的图形

Wiki 标记
{html}<div style="border-bottom: 0.5px solid #dfe1e5;color:#2D5C8C;padding-bottom: 0.5px;font-size: 24px; height: 5px;">&nbsp;</div>{html}

属性说明

 

预览效果

Title_font
Name是否自动旋转

Wiki 标记
{html}<div style="border-bottom: 0.5px solid #dfe1e5;color:#2D5C8C;padding-bottom: 0.5px;font-size: 24px; height: 5px;">&nbsp;</div>{html}

属性说明

 

预览效果

Title_font
Name旋转方向

Wiki 标记
{html}<div style="border-bottom: 0.5px solid #dfe1e5;color:#2D5C8C;padding-bottom: 0.5px;font-size: 24px; height: 5px;">&nbsp;</div>{html}

属性说明

 

预览效果

设置开启3D散点后,3D航线图中标记的图形。

Image Added

预览效果

设置不同图形的标记效果对比,如下:

Image Added



Title_font
Name

旋转速度

是否显示标签

Wiki 标记
{html}<div style="border-bottom: 0.5px solid #dfe1e5;color:#2D5C8C;padding-bottom: 0.5px;font-size: 24px; height: 5px;">&nbsp;</div>{html}

属性说明

 

预览效果

Title_font
Name恢复时间

Wiki 标记
{html}<div style="border-bottom: 0.5px solid #dfe1e5;color:#2D5C8C;padding-bottom: 0.5px;font-size: 24px; height: 5px;">&nbsp;</div>{html}

属性说明

 

预览效果

面板
borderColor#BBBBBB
bgColor#F0F0F0
borderWidth1
borderStylesolid
toc

设置开启3D散点后,3D航线图是否显示标签。

Image Added

预览效果

设置显示与不显示标签效果对比,如下:
Image Added