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

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;"> </div>{html}

属性说明

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

Image Added

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

预览效果

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

面板

borderColor	#BBBBBB
bgColor	#F0F0F0
borderWidth	1
borderStyle	solid

目录

Echarts图形通用设置包括“画布大小、背景颜色、显示方式、边距、初始化动画、防止Y轴标签溢出、防止X轴标签溢出”等。

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;"> </div>{html}

属性说明

设置区域的背景颜色。

Image Added

预览效果

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

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;"> </div>{html}

属性说明

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

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;"> </div>{html}

属性说明

从宽度和高度设置画布的大小。

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

Image Removed

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;"> </div>{html}

属性说明

点击颜色框选择颜色。

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

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

Image Added

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;"> </div>{html}

属性说明

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

Image Added

透明度：设置坐标轴线的透明程度。
宽度：设置坐标轴线的宽度，可设置为无线。
线条颜色：设置坐标轴线的颜色。（说明：在未设置坐标轴名称样式和刻度标签样式时，设置坐标轴线的线条颜色，坐标轴名称颜色和刻度标签颜色默认与坐标轴线的颜色保持一致。）

预览效果

设置透明度都为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;"> </div>{html}

属性说明

切换图形类型。

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

Image Removed

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

图形	显示方式
柱图	普通柱图、堆积柱图、普通横条、堆积横条、瀑布图
线图	标准折线图、标准面积图、堆积面积图
饼图	标准饼图、标准圆环图、南丁格尔玫瑰图
树图	标准树图、从上向下树图、从下向上树图、从右向左树图、径向树图

设置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;"> </div>{html}

属性说明

设置3D柱图/3D散点图中刻度标签的样式。

Image Added

预览效果

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

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;"> </div>{html}

属性说明

设置图形边距。

Image Removed

左：图形离画布左侧的距离。
上：图形离画布上侧的距离。
右：图形离画布右侧的距离。
下：图形离画布下侧的距离。

说明：设置的边距值可以像“20”这样的具体像素值，可以是像“20%”这样相对于画布高宽的百分比。

对应模型图：

Image Removed

预览效果

Image Removed

设置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;"> </div>{html}

属性说明

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

Image Added

透明度：设置坐标轴刻度的透明程度。
宽度：设置坐标轴刻度的宽度，可设置为无线。
线条颜色：设置坐标轴刻度的颜色。

预览效果

设置透明度都为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;"> </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;"> </div>{html}

属性说明

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

Image Removed

预览效果

设置“初始化动画”

Image Removed

不设置“初始化动画”

Image Removed

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

Image Added

透明度：设置分隔线的透明程度。
宽度：设置分隔线的宽度，可设置为无线。
线条颜色：设置分隔线的颜色。

预览效果

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

Image Added

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

Image Added

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

Image Added

Title_font
Name 分隔区域

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

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;"> </div>{html}

属性说明

防止Y轴的标签过长而溢出画布。

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

Image Removed

Image Added

预览效果

Image Removed

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

Image Added

Title_font
Name 视角控制

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

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;"> </div>{html}

属性说明

防止X轴的标签过长而溢出画布。

Image Removed

预览效果

Image Removed

设置3D柱图/3D散点图的投影方式，分为正交投影和透视投影。

正交投影：正交投影就是平行投影，所有的投影方向都是平行的，不会交于一点，正交投影不会有近大远小的效果。
透视投影：透视投影使用另一种方法把物体投影到投影面上，能产生距离感。比如远的物体我们看起来就小，近的物体我们看起来就大。

Image Added

预览效果

正交投影：

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;"> </div>{html}

属性说明

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

设置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;"> </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;"> </div>{html}

属性说明

设置3D柱图/3D散点图旋转的速度。

Image Added

预览效果

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

Image Added

Title_font
Name

普通状态设置

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

Image Removed

恢复时间

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散点图时，图形停止旋转，经过所设定的恢复时间，图形恢复旋转。

Image Added

预览效果

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

Image Added

Title_font
Name 视角设置

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;"> </div>{html}

属性说明

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

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

以“中国”地图为例，则是设置省份与省份之间的边界颜色。

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;"> </div>{html}

属性说明

设置所有区域背景颜色。

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

以“中国”地图为例，则是设置所有省份的背景颜色。

Image Added

预览效果

Image Removed

设置图形绕Y轴旋转的不同角度效果对比，如下：

Image Added

Title_font
Name

高亮状态设置

3D散点设置

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

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;"> </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;"> </div>{html}

属性说明

toc

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

Image Added

预览效果

面板

borderColor	#BBBBBB
bgColor	#F0F0F0
borderWidth	1
borderStyle	solid

设置不同图形的标记效果对比，如下：

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;"> </div>{html}

属性说明

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

Image Added

预览效果

设置显示与不显示标签效果对比，如下：

Image Added

页面树结构

页面历史

版本比较

旧版本 53

新版本 当前版本

标识

Title_fontName普通状态设置

Title_fontName区域边界

Title_fontName

区域背景色

Title_fontName高亮状态设置

Title_fontName高亮区域边界

Title_fontName

高亮区域背景色

Title_fontName其他设置

Title_fontName

区域标签

Title_fontName坐标轴线

Title_fontName线条样式

Title_fontName刻度标签

Title_fontName

是否显示

Title_fontName刻度标签样式

Title_fontName坐标轴刻度

Title_fontName

是否显示

Title_fontName线条样式

Title_fontName分隔线

Title_fontName是否显示

Title_fontName

分隔线样式

Title_fontName分隔区域

Title_fontName

是否显示

Title_fontName视角控制

Title_fontName

投影方式

Title_fontName

是否自动旋转

Title_fontName

旋转方向

Title_fontName旋转速度

Title_fontName

恢复时间

Title_fontName视角设置

Title_fontName

绕X轴旋转角度

Title_fontName

绕Y轴旋转角度

Title_fontName

3D散点设置

Title_fontName

标记的大小

Title_fontName

标记的图形

Title_fontName是否显示标签

新版本当前版本

Title_font
Name 普通状态设置

Title_font
Name 区域边界

Title_font
Name

Title_font
Name 高亮状态设置

Title_font
Name 高亮区域边界

Title_font
Name

Title_font
Name 其他设置

Title_font
Name

Title_font
Name 坐标轴线

Title_font
Name 线条样式

Title_font
Name 刻度标签

Title_font
Name

Title_font
Name 刻度标签样式

Title_font
Name 坐标轴刻度

Title_font
Name

Title_font
Name 线条样式

Title_font
Name 分隔线

Title_font
Name 是否显示

Title_font
Name

Title_font
Name 分隔区域

Title_font
Name

Title_font
Name 视角控制

Title_font
Name

Title_font
Name

Title_font
Name

Title_font
Name 旋转速度

Title_font
Name

Title_font
Name 视角设置

Title_font
Name

Title_font
Name

Title_font
Name

Title_font
Name

Title_font
Name

Title_font
Name 是否显示标签