图形增强
本章节的主要内容
指标图
无
饼状图
图形设置
进入图表设计界面，右侧高级页签中，点击图形设置图标，弹出图形设置框
| 项 | 说明 |
|---|---|
| 内外半径 | 通过该属性调节环形大小 |
| 位置 | 以左上顶角作为0坐标，调节位置 |
| 南丁格尔图 | 展示成南丁格尔图 |
| 扩展参数 | 填写JSON格式数据，如关闭动画 {"animation":false} |
效果演示
| 内外半径图配置信息 | |
 | |
| 内外半径图、默认饼图 | |
 |
|
| 南丁格尔半径图、面积图配置信息 | |
 |
|
| 南丁格尔半径图、面积图 | |
 |
|
| 扩展参数配置 | |
 |
|
| 配置扩展参数前 | 配置扩展参数后 |
 |
 |
| 移动端效果图 | |
 |
|
- 维度指标有多个分组时，图表都是居中显示的，需要通过图形设置中的
位置来调节- 更多扩展参数参见ECHARTS官网-文档-配置项手册中的
- 扩展参数的优先级高于页面配置的属性
柱状图
图形设置
 |
| 项 | 说明 |
|---|---|
| 面积 | 调整图形大小 |
| 位置 | 以左上顶角作为0坐标，调节位置 |
| 旋转 | 设置图形顺时针旋转角度，默认是0，可设置旋转90度 |
| 倒转 | 开启/关闭图形倒转，默认未开启 |
| 堆叠分类 | 堆叠显示 |
| 扩展参数 | 填写JSON格式数据，如关闭动画 {"animation":false} |
效果演示
| 配置旋转90度效果图 | |
 |
|
| 开启倒转 | |
 |
|
| 不堆叠 | 堆叠 |
 |
 |
| 扩展参数配置 | |
 |
|
| 配置扩展参数前 | 配置扩展参数后 |
 |
 |
| 移动端效果图 | |
 |
|
- 一个分组中指标或者维度是多个这样的配置，设置堆叠才能看出堆叠效果
- 设置堆叠不仅可以清晰地比较某一个维度数据中不同类型数据之间的差异，还可以比较总数的差别
- 更多扩展参数参见ECHARTS官网-文档-配置项手册
折线图
图形设置
 |
| 项 | 说明 |
|---|---|
| 面积 | 调整图形大小 |
| 位置 | 以左上顶角作为0坐标，调节位置 |
| 旋转 | 设置图形顺时针旋转角度，默认是0，可设置旋转90度 |
| 堆叠分类 | 堆叠显示 |
| 扩展参数 | 填写JSON格式数据，如关闭动画 {"animation":false} |
效果演示
| 配置旋转90度效果图 | |
 | |
| 不堆叠 | 堆叠 |
 |
 |
| 扩展参数配置 | |
 |
|
| 配置扩展参数前 | 配置扩展参数后 |
 |
 |
| 移动端效果图 | |
 |
|
更多扩展参数参见ECHARTS官网-文档-配置项手册
面积图
图形设置
 |
| 项 | 说明 |
|---|---|
| 面积 | 调整图形大小 |
| 位置 | 以左上顶角作为0坐标，调节位置 |
| 旋转 | 设置图形顺时针旋转角度，默认是0，可设置旋转90度 |
| 堆叠分类 | 堆叠显示 |
| 扩展参数 | 填写JSON格式数据，如关闭动画 {"animation":false} |
效果演示
| 配置旋转90度效果图 | |
 | |
| 不堆叠 | 堆叠 |
 |
 |
| 扩展参数配置 | |
 |
|
| 配置扩展参数前 | 配置扩展参数后 |
|
 |
| 移动端效果图 | |
 |
|
更多扩展参数参见ECHARTS官网-文档-配置项手册
漏斗图
图形设置
 |
| 项 | 说明 |
|---|---|
| 面积 | 调整图形大小 |
| 位置 | 以左上顶角作为0坐标，调节位置 |
| 图形类型 | 设置图形显示类型 |
效果演示
| 图形类型居中 | |
 | |
| 图形类型居右 | |
 | |
| 扩展参数配置 | |
 |
|
| 配置扩展参数前 | 配置扩展参数后 |
|
 |
| 移动端效果图 | |
 |
|
更多扩展参数参见ECHARTS官网-文档-配置项手册
雷达图
图形设置
 |
| 项 | 说明 |
|---|---|
| 半径 | 调节图形大小 |
| 位置 | 以左上顶角作为0坐标，调节位置 |
| 图形类型 | 雷达图图形类型 |
| 扩展参数 | 填写JSON格式数据，如关闭动画 {"animation":false} |
| 多边形 | |
 | |
| 圆形 | |
 | |
| 扩展参数配置 | |
 |
|
| 配置扩展参数前 | 配置扩展参数后 |
|
 |
| 移动端效果图 | |
 |
|
更多扩展参数参见ECHARTS官网-文档-配置项手册
仪表盘
图形设置
 |
| 项 | 说明 |
|---|---|
| 半径 | 调节图形大小 |
| 位置 | 以左上顶角作为0坐标，调节位置 |
| 图形角度 | 默认起始角度225，结束角度-45 |
| 扩展参数 | 填写JSON格式数据，如关闭动画 {"animation":false} |
效果演示
| 仪表盘 | |
 | |
| 扩展参数配置 | |
 |
|
| 配置扩展参数前 | 配置扩展参数后 |
|
 |
| 移动端效果图 | |
 |
|
更多扩展参数参见ECHARTS官网-文档-配置项手册
地图
图形设置
 |
| 项 | 说明 |
|---|---|
| 面积 | 调整图形大小 |
| 位置 | 以左上顶角作为0坐标，调节位置 |
| 平移&缩放 | 平移是通过鼠标拖动地图上下左右移动位置；缩放通过鼠标滚轮缩放地图大小 |
| 扩展参数 | 填写JSON格式数据，如设置数据项颜色 {"itemStyle":{"color":"#CCCCCC"}} |
效果演示
| 平移 | |
 | |
| 缩放 | |
 | |
| 世界地图 | |
 |
|
| 中国地图 | |
 |
|
| 各省地图 | |
 |
|
| 移动端效果图 | |
 |
散点图
图形设置
 |
| 项 | 说明 |
|---|---|
| 面积 | 调整图形大小 |
| 位置 | 以左上顶角作为0坐标，调节位置 |
| 扩展参数 | 填写JSON格式数据，如设置数据项颜色 {"itemStyle":{"color":"#CCCCCC"}} |
效果演示
| 扩展参数配置 | |
 |
|
| 配置扩展参数前 | 配置扩展参数后 |
 |
 |
| 移动端效果图 | |
 |
|
散点地图
图形设置
效果演示
| PC效果图 | |
 | |
| 移动端效果图 | |
 |
双轴图
图形设置
 |
| 项 | 说明 |
|---|---|
| 面积 | 调整图形大小 |
| 位置 | 以左上顶角作为0坐标，调节位置 |
| 倒转 | 开启/关闭图形倒转 |
| 扩展参数 | 填写JSON格式数据，如关闭动画 {"animation":false} |
效果演示
| 折线面积组合双轴图 | |
 | |
| 柱状折线组合双轴图 | |
 | |
| 开启倒转 | |
 |
|
| 扩展参数配置 | |
 |
|
| 配置扩展参数前 | 配置扩展参数后 |
|
 |
| 移动端效果图 | |
 |
|
更多扩展参数参见ECHARTS官网-文档-配置项手册
Seven
010-62962343-690
liujx@actionsoft.com.cn
感谢您对该文档的关注！如果您对当前页面内容有疑问或好的建议，请与我联系。如果您需要解答相关技术问题请登录AWS客户成功社区