查看源

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

Smartbi V9 帮助中心 > ECharts图形-基本设置 > 2019-9-10 星期二 14-11-17.png

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

属性说明

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

Smartbi V9 帮助中心 > ECharts图形-基本设置 > image2019-9-9 10:22:42.png

预览效果

两种不同的画布大小效果如图：

Smartbi V9 帮助中心 > ECharts图形-基本设置 > image2019-9-9 10:22:6.png

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

属性说明

点击颜色框选择颜色。

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

Smartbi V9 帮助中心 > ECharts图形-基本设置 > image2019-9-9 10:21:37.png

预览效果

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

Smartbi V9 帮助中心 > ECharts图形-基本设置 > image2019-9-10 15:50:19.png

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

属性说明

切换图形类型。

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

Smartbi V9 帮助中心 > ECharts图形-基本设置 > image2019-9-10 15:53:46.png

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

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

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

属性说明

设置图形边距。

Smartbi V9 帮助中心 > ECharts图形-基本设置 > image2019-9-9 10:27:54.png

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

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

预览效果

Smartbi V9 帮助中心 > ECharts图形-基本设置 > image2019-9-27 14:53:53.png

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

属性说明

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

Smartbi V9 帮助中心 > ECharts图形-基本设置 > image2019-9-9 10:29:48.png

预览效果

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

Smartbi V9 帮助中心 > ECharts图形-基本设置 > 24.gif

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

Smartbi V9 帮助中心 > ECharts图形-基本设置 > 26.gif

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

属性说明

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

Smartbi V9 帮助中心 > ECharts图形-基本设置 > image2019-9-9 11:13:39.png

预览效果

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

Smartbi V9 帮助中心 > ECharts图形-基本设置 > image2019-9-10 14:28:35.png

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

属性说明

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

Smartbi V9 帮助中心 > ECharts图形-基本设置 > image2019-9-9 11:14:11.png

预览效果

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

Smartbi V9 帮助中心 > ECharts图形-基本设置 > image2019-9-10 14:26:8.png

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

属性说明

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

Smartbi V9 帮助中心 > ECharts图形-基本设置 > image2019-9-9 11:27:28.png

预览效果

允许缩放和平移效果，如图：

Smartbi V9 帮助中心 > ECharts图形-基本设置 > 28.gif

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

属性说明

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

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

Smartbi V9 帮助中心 > ECharts图形-基本设置 > image2019-9-17 15:45:34.png

预览效果

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

Smartbi V9 帮助中心 > ECharts图形-基本设置 > image2019-9-17 15:49:46.png

{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散点图的宽度。

Smartbi V9 帮助中心 > ECharts图形-基本设置 > image2019-11-29 11:14:47.png

预览效果

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

{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散点图的宽度。

Smartbi V9 帮助中心 > ECharts图形-基本设置 > image2019-11-29 11:39:39.png

预览效果

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

Smartbi V9 帮助中心 > ECharts图形-基本设置 > image2019-11-29 11:45:44.png

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

属性说明

预览效果

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

属性说明

预览效果

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

属性说明

预览效果

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

属性说明

预览效果

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

属性说明

预览效果

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

Smartbi V9 帮助中心 > ECharts图形-基本设置 > 2019-9-9 星期一 12-01-47.png

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

属性说明

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

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

预览效果

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

Smartbi V9 帮助中心 > ECharts图形-基本设置 > image2019-9-10 16:11:37.png

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

属性说明

设置所有区域背景颜色。

预览效果

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

Smartbi V9 帮助中心 > ECharts图形-基本设置 > image2019-9-10 16:11:53.png

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

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

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

属性说明

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

预览效果

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

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

属性说明

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

预览效果

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

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

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

属性说明

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

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

预览效果

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

Smartbi V9 帮助中心 > ECharts图形-基本设置 > image2019-9-27 16:8:49.png