页面历史

注意
该案例基于V10.5版本制作

1. 报表总览

1.1. 背景描述

数据分析作为目前企业经营中，发现问题、调整策略、优化方向的重要依据手段，已经逐渐在各个行业部门被重视起来。销售数据作为经营状况的直观体现，更需要深入分析，通过从多个角度分析企业的销售活动，以便进行市场预测，抢占市场先机，制定有效的营销策略。

目录

1.2. 需求分析

根据“主流热销车”数据实现以下目标：

查看预算、级别、车系、热度等需求指标对销售的影响；
了解各区域销售情况和总体基本销售情况；
了解车类、车型等因素对销售情况的影响。

2. 定制方法

2.1. 总体设计

根据需求规划整个大屏所展现的内容，以及具体通过哪些组件实现最终效果，整体布局设计如下：

总体设计详情可参考如何规划交互式仪表盘。

设置项说明如下：

设置项

参数

说明

布局方式

高宽自适应

设置了高宽自适应后，仪表盘会自动调整大小以填充用于显示仪表盘的窗口；

此种布局方式适用于单屏展示的仪表盘

数据

主流热销车

车类级别销量占比

本示例demo基于数据模型-主流热销车和车类级别销量占比制作

主题

深色主题

1、选择深色主题

2、在仪表盘中上传自定义背景并设置四周边距为2，间距为0

3、设置组件

4、图形

主题：iridescent

字体颜色：#A0B0C2

字号：10

5、筛选器

颜色设置为#608CEE

详情请参考自适应方式、交互式仪表盘-主题区。

2.2. 组件详解

2.2.1. 标题

拖拽文本组件到画布区，进入文本编辑页面

创建一个1*1大小的表格，设置表格属性中的高为40px，边框高度为0；
输入文本“全国汽车销量分析”，对齐方式为“中间对齐”，字号为24px，字体颜色为“07BAFF”；

最终效果如下：

详情请参考文本组件。

2.2.2. 各需求销售情况

组件类型

组件

数据

定制方法

效果

面积玫瑰图

各预算下汽车销量

【数据模型】主流热销车

① 标记区

颜色：维度-需求-“预算”；

角度：度量-“销量”

标签：度量-“销量”

1、点击左上角 组件 > 图表 > 饼图 选择 “面积玫瑰图” 组件拖入画布区。

2、在标记区中设置面积玫瑰图颜色为“#66CCFF”、“#5DC4FF”、“#5DA9FF”、“#6590FF”、“#677DFF”，销量快速计算全局占比。

3、组件设置中设置如下：

基础：【半径】内20%，外60%
组件：标题为“各预算下汽车销量”，隐藏浏览工具栏
图例：位置选择无图例

4、自定义属性

将下面这段代码粘贴到如图红框位置

代码块

language	js
linenumbers	true

"tooltip": {
		"confine": true
	},
	"series": [
		{
			"labelLine": {
				"normal": {
					"smooth": 0.2,
					"length": 2,
					"length2": 2
				}
			}
		}
	],

饼图

不同级别的汽车销量

【数据模型】主流热销车

① 标记区

颜色：维度-需求-“级别”；

角度：度量-“销量”

标签：度量-“销量”

1、点击左上角 组件 > 图表 > 饼图 选择 ”饼图“ 组件拖入画布区。

2、在标记区中，设置颜色为“#66CCFF”、“#5DC4FF”、“#5DA9FF”、“#6590FF”、“#677DFF”，销量快速计算全局占比。

3、组件设置中设置如下：

基础：【半径】内35%，外55%；【圆心位置】 x 47%，y 50%
组件：标题为“不同级别的汽车销量”，隐藏浏览工具栏
图例：位置选择无图例

4、自定义属性

将下面这段代码粘贴到如图红框位置

代码块

language	js
linenumbers	true

"series": [
		{
			"labelLine": {
				"normal": {
					"show": false,
					"length": 5,
					"length2": 5
				}
			}
		}
	],

雷达图

各车系销售量

【数据模型】主流热销车

① 数据区

列：维度-产品-“车系”

行：度量-“销量”

1、点击左上角 组件 > 图表 > 高级 选择 ”棱角面积雷达图“ 组件拖入画布区

2、在标记区中设置颜色为“#5DC4FF”

3、组件设置中设置如下：

基础：【数据点】大小为3；【半径】64%；隐藏隔区
组件：标题为“各车系销售量”，隐藏浏览工具栏

4、自定义属性

复制以下代码覆盖掉组件的自定义属性

代码块

language	js
title	自定义属性
linenumbers	true
collapse	true

{
	"radar": {
		"radius": "64%",
		"splitNumber": 5,
		"axisLine": {
			"show": true,
			"lineStyle": {
				"type": "solid",
				"width": 1,
				"color": "#a2a8cd"
			}
		},
		"splitLine": {
			"show": true,
			"lineStyle": {
				"type": "solid",
				"width": 1,
				"color": "#3B4568"
			}
		},
		"splitArea": {
			"show": false,
			"areaStyle": {
				"color": [
					"#282E4A",
					"#242840"
				]
			}
		},
		"nameGap": 10
	},
	"textStyle": {
		"fontFamily": "Microsoft YaHei",
		"fontWeight": "normal",
		"fontSize": 12,
		"color": "",
		"fontStyle": "normal",
		"textDecoration": "none"
	},
	"legend": {
		"left": "center",
		"top": "top",
		"orient": "horizontal",
		"show": true,
		"type": "scroll",
		"itemWidth": 10,
		"itemHeight": 10,
		"icon": "roundRect",
		"textStyle": {
			"fontFamily": "Microsoft YaHei",
			"fontWeight": "normal",
			"fontSize": 10,
			"color": "#999999",
			"fontStyle": "normal",
			"textDecoration": "none"
		}
	},
	"visualMap": {
		"left": "center",
		"top": "top",
		"orient": "horizontal",
		"show": true,
		"itemWidth": 10,
		"itemHeight": 100,
		"textStyle": {
			"fontFamily": "Microsoft YaHei",
			"fontWeight": "normal",
			"fontSize": 12,
			"color": "#515c68",
			"fontStyle": "normal",
			"textDecoration": "none"
		}
	},
	"tooltip": {
		"confine": true,
		"showContent": false
	},
	"series": [
		{
			"areaStyle": {
				"normal": {
					"opacity": 0.5
				}
			}
		}
	]
}

柱图

热度销售量

【数据模型】主流热销车

① 数据区

行：维度-需求-“热度”

列：度量-“销售量（单位：百万）”

② 标记区

颜色：维度-需求-“热度”

1、点击左上角 组件 > 图表 > 柱图 选择 “堆积柱图” 组件拖入画布区

2、在标记区中设置颜色分别为“#66CCFF”、“#5DC4FF”、“#5DA9FF”、“#6590FF”

3、组件设置中设置如下：

基础：【圆角】左上、右上、左下、右下为8px。【柱间距】同系列70%；【画布】左 16px，右 20px，上 2px，下 14px；
组件：标题为“热度销售量”，隐藏浏览工具栏
坐标轴：【分类轴】刻度颜色为“#00FFFF”，隐藏轴线；【指标轴】刻度设置为不显示，隐藏轴线
图例：位置选择无图例

详情请参考柱图/堆积柱图、饼图、雷达图。

2.2.3. 历年总销售规模

组件类型

数据

定制方法

效果

面积图

【数据模型】主流热销车

① 数据区

列：维度-时间维度层次-“月”

行：度量-“销售规模”

1、点击左上角 组件 > 图表 > 趋势图 选择 “曲线面积图” 组件拖入画布区

2、标记区中设置颜色为“#38A1D9”

3、组件设置中设置如下：

基础：【数据点】大小为0；【画布】左 16px，右 20px，上 2px，下 2px；
组件：设置标题名为“历年总销售规模”，隐藏标题和浏览工具栏
坐标轴：【分类轴】隐藏轴线；【指标轴】隐藏轴线

4、自定义属性

复制以下代码覆盖掉组件的自定义属性

代码块

language	js
linenumbers	true
collapse	true

{
	"textStyle": {
		"fontFamily": "Microsoft YaHei",
		"fontWeight": "normal",
		"fontSize": 12,
		"color": "",
		"fontStyle": "normal",
		"textDecoration": "none"
	},
	"xAxis": {
		"name": "",
		"nameTextStyle": {
			"fontFamily": "Microsoft YaHei",
			"fontWeight": "normal",
			"fontSize": 12,
			"color": "#515c68",
			"fontStyle": "normal",
			"textDecoration": "none"
		},
		"nameGap": 15,
		"axisLabel": {
			"rotate": "0",
			"show": true,
			"fontFamily": "Microsoft YaHei",
			"fontWeight": "normal",
			"fontSize": 12,
			"color": "rgba(36,157,195,1)",
			"fontStyle": "normal",
			"textDecoration": "none",
			"interval": 0
		},
		"axisLine": {
			"show": false,
			"lineStyle": {
				"type": "solid",
				"width": 1,
				"color": "#a2a8cd"
			}
		},
		"splitLine": {
			"show": false,
			"lineStyle": {
				"type": "solid",
				"width": 1,
				"color": "#3B4568"
			}
		},
		"splitArea": {
			"show": false,
			"areaStyle": {
				"color": [
					"#282E4A",
					"#242840"
				]
			}
		}
	},
	"yAxis": {
		"name": "",
		"nameTextStyle": {
			"fontFamily": "Microsoft YaHei",
			"fontWeight": "normal",
			"fontSize": 12,
			"color": "#515c68",
			"fontStyle": "normal",
			"textDecoration": "none"
		},
		"nameGap": 15,
		"axisLabel": {
			"rotate": "0",
			"show": true,
			"fontFamily": "Microsoft YaHei",
			"fontWeight": "normal",
			"fontSize": 12,
			"color": "rgba(36,157,195,1)",
			"fontStyle": "normal",
			"textDecoration": "none"
		},
		"axisLine": {
			"show": false,
			"lineStyle": {
				"type": "solid",
				"width": 1,
				"color": "#a2a8cd"
			}
		},
		"splitLine": {
			"show": false,
			"lineStyle": {
				"type": "solid",
				"width": 1,
				"color": "#3B4568"
			}
		},
		"splitArea": {
			"show": false,
			"areaStyle": {
				"color": [
					"#282E4A",
					"#242840"
				]
			}
		}
	},
	"legend": {
		"left": "center",
		"top": "top",
		"orient": "horizontal",
		"show": true,
		"type": "scroll",
		"itemWidth": 10,
		"itemHeight": 10,
		"icon": "roundRect",
		"textStyle": {
			"fontFamily": "Microsoft YaHei",
			"fontWeight": "normal",
			"fontSize": 10,
			"color": "#999999",
			"fontStyle": "normal",
			"textDecoration": "none"
		}
	},
	"visualMap": {
		"left": "center",
		"top": "top",
		"orient": "horizontal",
		"show": true,
		"itemWidth": 10,
		"itemHeight": 100,
		"textStyle": {
			"fontFamily": "Microsoft YaHei",
			"fontWeight": "normal",
			"fontSize": 12,
			"color": "#515c68",
			"fontStyle": "normal",
			"textDecoration": "none"
		}
	},
	"lineStyle": {
		"color": "#33ffff"
	},
	"grid": {
		"left": 16,
		"right": 20,
		"lineStyle": {
			"color": "#33ffff"
		},
		"top": 2,
		"bottom": 2
	},
	"tooltip": {
		"axisPointer": {
			"lineStyle": {
				"color": "#33ffff"
			}
		},
		"trigger": "axis"
	},
	"series": [
		{
			"type": "line",
			"itemStyle": {
				"normal": {
					"color": {
						"colorStops": [
							{
								"color": "#05325F",
								"offset": 0
							},
							{
								"color": "#000938",
								"offset": 1
							}
						],
						"global": false,
						"type": "linear",
						"x": 0,
						"x2": 0,
						"y": 0,
						"y2": 1
					}
				}
			}
		}
	]
}

筛选器

【数据模型】主流热销车

维度-时间维度层次-“年”

1、将字段“年”拖入筛选区中，选择筛选器类型为“下拉（单选）”

2、筛选器设置中列表选择中勾选“2018”

3、设置筛选器为浮动，拖拽到合适位置上。

4、组件设置中设置如下：

组件：【大小】宽90 高34；【边距】四周边距为0；设置组件标题为“年”，隐藏标题

5、设置筛选器的应用范围为组件“历年总销售规模”。

文本组件

无

【年份+年总销售规模】

1、点击左上角 组件 > 信息 拖拽”文本”组件到画布区，双击编辑组件，输入“年总销售规模”

2、年份：在工具栏中的字段下选择“筛选器>年”，添加到文字左边。

3、设置字体颜色为“A0B0C2”，字号为10px

详情请参考面积图/堆积面积图、交互式仪表盘-筛选排序、文本组件。

2.2.4. 全国各地区销量分布形式

组件类型

数据

定制方法

效果

地图

【数据模型】主流热销车

① 数据区

列：维度-地理层次-“总部省份”

大小：度量-“销量”

1、点击左上角 组件 > 图表 > 地图 选择 “散点地图” 组件拖入画布区

2、在标记区中设置颜色为“#FFFF00”，形状选择旗帜。

3、在组件设置中设置如下：

基础：高亮边界色为“#3FB1E3”，缩放比例为1.2
组件：标题为“全国各地区销量分布形式”，隐藏浏览工具栏
图例：无图例
高级：左键下钻选择“禁止”

4、自定义属性

复制以下代码覆盖掉组件的自定义属性

代码块

language	js
linenumbers	true
collapse	true

{
	"geo": {
		"map": "CHINA",
		"itemStyle": {
			"normal": {
				"areaColor": "#F2F5F5",
				"borderColor": "#aaaaaa"
			},
			"emphasis": {
				"areaColor": "rgba(63,177,227,0.25)",
				"borderColor": "#3fb1e3"
			},
			"areaColor": {
				"colorStops": [
					{
						"offset": 0,
						"color": "#5DA9FF"
					},
					{
						"offset": 1,
						"color": "blue"
					}
				],
				"global": false,
				"type": "linear",
				"x": 0,
				"y": 0,
				"x2": 0,
				"y2": 1
			}
		},
		"roam": true,
		"zoom": 1.2
	},
	"textStyle": {
		"fontFamily": "Microsoft YaHei",
		"fontWeight": "normal",
		"fontSize": 12,
		"color": "",
		"fontStyle": "normal",
		"textDecoration": "none"
	},
	"visualMap": {
		"itemWidth": 10,
		"itemHeight": 100,
		"pieceItemWidth": 14,
		"pieceItemHeight": 14,
		"textStyle": {
			"fontFamily": "Microsoft YaHei",
			"fontWeight": "normal",
			"fontSize": 12,
			"color": "#515c68",
			"fontStyle": "normal",
			"textDecoration": "none"
		},
		"show": false,
		"left": 4,
		"top": "auto",
		"right": "auto",
		"bottom": 4,
		"align": "left",
		"orient": "vertical"
	}
}

柱图

【数据模型】主流热销车

① 数据区

列：维度-地理层次-“总部省份”

行：度量-“销量”

1、点击左上角 组件 > 图表 > 柱图 选择 “柱图” 组件拖入画布区

2、标记区中颜色选择“#33FFFF”

3、在组件设置中设置如下：

基础：【圆角】左上、右上、左下、右下为8px。【柱间距】同系列70%；【画布】左 10px，右 15px，上 12px，下 10px；
组件：标题为“全国各地区销量”，隐藏标题和浏览工具栏
坐标轴：【分类轴】隐藏轴线；【指标轴】刻度设置为不显示，隐藏轴线
图例：位置选择无图例
高级：禁止左键下钻

详情请参考图形组件-地图、柱图/堆积柱图。

2.2.5. 每年的汽车销量

组件类型

数据

定制方法

效果

饼图

【数据模型】主流热销车

① 标记区：

颜色：时间维度层次-“年”

角度：度量-“销量”

标签：度量-“销量”

1、点击左上角 组件 > 图表 > 饼图 选择 ”饼图“ 组件拖入画布区。

2、标记区中，颜色为“#66CCFF”、“#5DC4FF”、“#5DA9FF”、“#6590FF”、“#677DFF”，【标签】位置为内，标签字号为10，标签字体颜色为“#FDFDFD”；销量快速计算全局占比。

3、组件设置中设置如下：

基础：【半径】内0%，外80%
组件：标题为“每年的汽车销量”，隐藏浏览工具栏
图例：位置选择无图例

详情请参考饼图。

2.2.6.车型销量排行

组件类型

数据

定制方法

效果

柱图

【数据模型】主流热销车

① 数据区

列：维度-产品-“车型”

行：度量-“销量”

1、点击左上角 组件 > 图表 > 柱图 选择 ”横条图“ 组件拖入画布区。

2、在标记区中设置颜色为“#00FFFF”；按销量降序排序。

3、在组件设置中设置如下：

基础：【柱间距】同系列30%；【画布】左 16px，右 40px，上 12px，下 18px
组件：标题为“车型销量排行”，隐藏浏览工具栏
坐标轴：【指标轴】分类轴，刻度设置为自动，隐藏轴线；指标轴，刻度设置为不显示，隐藏轴线；

4、自定义属性

复制以下代码覆盖掉组件的自定义属性

代码块

language	js
linenumbers	true
collapse	true

{
	"textStyle": {
		"fontFamily": "Microsoft YaHei",
		"fontWeight": "normal",
		"fontSize": 12,
		"color": "",
		"fontStyle": "normal",
		"textDecoration": "none"
	},
	"xAxis": {
		"name": "",
		"nameTextStyle": {
			"fontFamily": "Microsoft YaHei",
			"fontWeight": "normal",
			"fontSize": 12,
			"color": "#515c68",
			"fontStyle": "normal",
			"textDecoration": "none"
		},
		"nameGap": 15,
		"axisLabel": {
			"rotate": "0",
			"show": true,
			"fontFamily": "Microsoft YaHei",
			"fontWeight": "normal",
			"fontSize": 12,
			"color": "#515c68",
			"fontStyle": "normal",
			"textDecoration": "none",
			"interval": 0
		},
		"axisLine": {
			"show": false,
			"lineStyle": {
				"type": "solid",
				"width": 1,
				"color": "#a2a8cd"
			}
		},
		"splitLine": {
			"show": false,
			"lineStyle": {
				"type": "solid",
				"width": 1,
				"color": "#3B4568"
			}
		},
		"splitArea": {
			"show": false,
			"areaStyle": {
				"color": [
					"#282E4A",
					"#242840"
				]
			}
		}
	},
	"yAxis": {
		"name": "",
		"nameTextStyle": {
			"fontFamily": "Microsoft YaHei",
			"fontWeight": "normal",
			"fontSize": 12,
			"color": "#515c68",
			"fontStyle": "normal",
			"textDecoration": "none"
		},
		"nameGap": 15,
		"axisLabel": {
			"rotate": "0",
			"show": false,
			"fontFamily": "Microsoft YaHei",
			"fontWeight": "normal",
			"fontSize": 12,
			"color": "#515c68",
			"fontStyle": "normal",
			"textDecoration": "none"
		},
		"axisLine": {
			"show": false,
			"lineStyle": {
				"type": "solid",
				"width": 1,
				"color": "#a2a8cd"
			}
		},
		"splitLine": {
			"show": false,
			"lineStyle": {
				"type": "solid",
				"width": 1,
				"color": "#3B4568"
			}
		},
		"splitArea": {
			"show": false,
			"areaStyle": {
				"color": [
					"#282E4A",
					"#242840"
				]
			}
		}
	},
	"legend": {
		"left": "center",
		"top": "top",
		"orient": "horizontal",
		"show": true,
		"type": "scroll",
		"itemWidth": 10,
		"itemHeight": 10,
		"icon": "roundRect",
		"textStyle": {
			"fontFamily": "Microsoft YaHei",
			"fontWeight": "normal",
			"fontSize": 10,
			"color": "#999999",
			"fontStyle": "normal",
			"textDecoration": "none"
		}
	},
	"visualMap": {
		"left": "center",
		"top": "top",
		"orient": "horizontal",
		"show": true,
		"itemWidth": 10,
		"itemHeight": 100,
		"textStyle": {
			"fontFamily": "Microsoft YaHei",
			"fontWeight": "normal",
			"fontSize": 12,
			"color": "#515c68",
			"fontStyle": "normal",
			"textDecoration": "none"
		}
	},
	"dataZoom": [
		{
			"type": "slider",
			"show": true,
			"yAxisIndex": [
				0
			],
			"startValue": 100,
			"endValue": 95,
			"handleSize": 5,
			"width": 15,
			"showDetail": false,
			"right": 25
		}
	],
	"grid": {
		"left": 16,
		"right": 40,
		"top": 12,
		"bottom": 18
	}
}

详情请参考横条图/堆积横条图。

2.2.7. 各车企的销售情况

组件类型

数据

定制方法

效果

双Y联合图

【数据模型】主流热销车

① 数据区：

列：维度-产品-“车企”

行：度量-“销售量（单位：百万）”、度量-“销售规模”

1、点击左上角 组件 > 图表 > 联合图 选择 ”双Y联合图“ 组件拖入画布区。

2、标记区：

字段【全部】颜色选择“#1FB1FF”
字段【销售量（单位：百万）】选择左轴“柱图”，颜色“#E9BBFC”
字段【销售规模】选择右轴“线图”，颜色“#677DFF”

3、在组件设置中设置如下：

① 公共设置

基础：【画布】左 16px，右 23px，上 18px，下 16px
组件：标题为“各车企的销售情况”，隐藏浏览工具栏
坐标轴：【指标轴】左Y轴，名称为“销量”，距离轴线7px，隐藏轴线；右Y轴，名称为“销售规模”，距离轴线7px，隐藏轴线；
图例：位置选择“无图例”

② 销售规模

基础：数据点大小为3

详情请参考图形组件-双Y联合图。

2.2.8. 各车类销量占比分析

组件类型

数据

定制方法

效果

文本组件

无

1、点击左上角 组件 > 信息 选择 ”文本“ 组件拖入画布区。

2、在文本编辑页面输入“ 各车类销量占比分析”，字号为10px，字体颜色为“07BAFF”；

饼图

【数据模型】主流热销车

① 标记区：

颜色： 维度-需求-“车类”

角度：度量-“销量”

1、点击左上角 组件 > 图表 > 饼图 选择 ”饼图“ 组件拖入画布区。

2、标记区中，【标签】不显示；【提示】隐藏提示；销量快速计算全局占比

3、组件设置中设置如下：

基础：【半径】内 0%，外 85%
组件：标题名为“车类销售占比”，隐藏标题和浏览工具栏
图例：位置选择无图例

4、将该组件复制两份

5、自定义属性

复制以下代码分别覆盖掉三个组件的自定义属性

代码块

language	js
title	轿车
linenumbers	true
collapse	true

{
	"textStyle": {
		"fontFamily": "Microsoft YaHei",
		"fontWeight": "normal",
		"fontSize": 12,
		"color": "",
		"fontStyle": "normal",
		"textDecoration": "none"
	},
	"legend": {
		"left": "center",
		"top": "top",
		"orient": "horizontal",
		"show": false,
		"content": {
			"_types": {
				"classify": true,
				"metric": false,
				"percent": false
			}
		},
		"type": "scroll",
		"itemWidth": 10,
		"itemHeight": 10,
		"icon": "roundRect",
		"textStyle": {
			"fontFamily": "Microsoft YaHei",
			"fontWeight": "normal",
			"fontSize": 10,
			"color": "#999999",
			"fontStyle": "normal",
			"textDecoration": "none"
		}
	},
	"visualMap": {
		"left": "center",
		"top": "top",
		"orient": "horizontal",
		"show": true,
		"itemWidth": 10,
		"itemHeight": 100,
		"textStyle": {
			"fontFamily": "Microsoft YaHei",
			"fontWeight": "normal",
			"fontSize": 12,
			"color": "#515c68",
			"fontStyle": "normal",
			"textDecoration": "none"
		}
	},
	"series": [
		{
			"center": [
				"50%",
				"50%"
			],
			"radius": [
				"55%",
				"60%"
			],
			"clockWise": false,
			"hoverAnimation": false,
			"type": "pie",
			"data": [
				{
					"label": {
						"show": false
					},
					"itemStyle": {
						"color": "rgba(255, 255, 255, 1)"
					}
				},
				{
					"label": {
						"show": false
					},
					"itemStyle": {
						"color": "rgba(255, 255, 255, 1)"
					}
				},
				{
					"label": {
						"normal": {
							"show": true,
							"position": "center",
							"textStyle": {
								"fontSize": 10,
								"color": "#ff9900"
							},
							"formatter": "{b}\n{d}%"
						}
					},
					"itemStyle": {
						"color": "#33ffff",
						"borderColor": "#33ffff",
						"borderWidth": 10
					}
				}
			]
		}
	],
	"roseType": "",
	"tooltip": {
		"show": false
	}
}

代码块

language	js
title	SUV
linenumbers	true
collapse	true

{
	"textStyle": {
		"fontFamily": "Microsoft YaHei",
		"fontWeight": "normal",
		"fontSize": 12,
		"color": "",
		"fontStyle": "normal",
		"textDecoration": "none"
	},
	"legend": {
		"left": "center",
		"top": "top",
		"orient": "horizontal",
		"show": false,
		"content": {
			"_types": {
				"classify": true,
				"metric": false,
				"percent": false
			}
		},
		"type": "scroll",
		"itemWidth": 10,
		"itemHeight": 10,
		"icon": "roundRect",
		"textStyle": {
			"fontFamily": "Microsoft YaHei",
			"fontWeight": "normal",
			"fontSize": 10,
			"color": "#999999",
			"fontStyle": "normal",
			"textDecoration": "none"
		}
	},
	"visualMap": {
		"left": "center",
		"top": "top",
		"orient": "horizontal",
		"show": true,
		"itemWidth": 10,
		"itemHeight": 100,
		"textStyle": {
			"fontFamily": "Microsoft YaHei",
			"fontWeight": "normal",
			"fontSize": 12,
			"color": "#515c68",
			"fontStyle": "normal",
			"textDecoration": "none"
		}
	},
	"series": [
		{
			"center": [
				"50%",
				"50%"
			],
			"radius": [
				"55%",
				"60%"
			],
			"clockWise": false,
			"hoverAnimation": false,
			"type": "pie",
			"data": [
				{
					"label": {
						"show": false
					},
					"itemStyle": {
						"color": "rgba(255, 255, 255, 1)"
					}
				},
				{
					"label": {
						"normal": {
							"show": true,
							"position": "center",
							"textStyle": {
								"fontSize": 10,
								"color": "#ff9900"
							},
							"formatter": "{b}\n{d}%"
						}
					},
					"itemStyle": {
						"color": "#5886f0",
						"borderColor": "#5886f0",
						"borderWidth": 10
					}
				},
				{
					"itemStyle": {
						"color": "rgba(255, 255, 255, 1)"
					}
				}
			]
		}
	],
	"roseType": "",
	"tooltip": {
		"show": false
	}
}

代码块

language	js
title	MPV
linenumbers	true
collapse	true

{
	"textStyle": {
		"fontFamily": "Microsoft YaHei",
		"fontWeight": "normal",
		"fontSize": 12,
		"color": "",
		"fontStyle": "normal",
		"textDecoration": "none"
	},
	"legend": {
		"left": "center",
		"top": "top",
		"orient": "horizontal",
		"show": false,
		"content": {
			"_types": {
				"classify": true,
				"metric": false,
				"percent": false
			}
		},
		"type": "scroll",
		"itemWidth": 10,
		"itemHeight": 10,
		"icon": "roundRect",
		"textStyle": {
			"fontFamily": "Microsoft YaHei",
			"fontWeight": "normal",
			"fontSize": 10,
			"color": "#999999",
			"fontStyle": "normal",
			"textDecoration": "none"
		}
	},
	"visualMap": {
		"left": "center",
		"top": "top",
		"orient": "horizontal",
		"show": true,
		"itemWidth": 10,
		"itemHeight": 100,
		"textStyle": {
			"fontFamily": "Microsoft YaHei",
			"fontWeight": "normal",
			"fontSize": 12,
			"color": "#515c68",
			"fontStyle": "normal",
			"textDecoration": "none"
		}
	},
	"series": [
		{
			"center": [
				"50%",
				"50%"
			],
			"radius": [
				"55%",
				"60%"
			],
			"clockWise": false,
			"hoverAnimation": false,
			"type": "pie",
			"data": [
				{
					"label": {
						"normal": {
							"show": true,
							"position": "center",
							"textStyle": {
								"fontSize": 10,
								"color": "#ff9900"
							},
							"formatter": "{b}\n{d}%"
						}
					},
					"itemStyle": {
						"normal": {
							"color": "#5886f0",
							"borderColor": "#FD77F5",
							"borderWidth": 10
						}
					}
				},
				{
					"itemStyle": {
						"normal": {
							"color": "rgba(255,255,255,1)",
							"borderColor": "rgba(0,0,0,0)",
							"borderWidth": 10
						},
						"emphasis": {
							"color": ""
						}
					}
				},
				{
					"itemStyle": {
						"normal": {
							"color": "rgba(255,255,255,1",
							"borderColor": "rgba(0,0,0,0)",
							"borderWidth": 10
						},
						"emphasis": {
							"color": ""
						}
					}
				}
			]
		}
	],
	"roseType": "",
	"tooltip": {
		"show": false
	}
}

详情请参考文本组件、饼图。

2.2.9. 各车类分级别的销量占比

组件类型

数据

定制方法

效果

文本组件

无

1、点击左上角 组件 > 信息 选择 ”文本“ 组件拖入画布区。

2、在文本编辑页面输入“ 各车类分级别的销量占比”，对齐方式为中间对齐，字号为10px，字体颜色为“07BAFF”；

饼图

【数据模型】车类级别销量占比

① 标记区

颜色：维度-“车类级别”

角度：度量-“销售量占比”

注意
这里需要手动切换数据为【数据模型】车类级别销量占比

1、点击左上角 组件 > 图表 > 饼图 选择 ”环形图 组件拖入画布区。

2、标记区中【标签】不显示；

3、组件设置中设置如下：

基础：【半径】内 40%，外 60%；【圆心位置】x 50%，y 40%
组件：标题为“车类分级别”，隐藏标题和浏览工具栏
图例：位置选择无图例

4、自定义属性

将以下代码粘贴到如图所示位置1507px

代码块

language	js
linenumbers	true
collapse	true

,
"series": [
		{
			"avoidLabelOverlap": false,
			"label": {
				"normal": {
					"show": true,
					"position": "center",
					"textStyle": {
						"fontSize": 10,
						"color": "#00ffff"
					},
					"formatter": "function(a){if(a.data.name==='需要修改的位置'){return a.data.displayValue} else {return ''}}"
				}
			},
			"textStyle": {
				"color": "#33ffff"
			},
			"color": [
				"#33ffff",
				"#001951"
			]
		}
	],

5、将饼图复制8份，将这九个饼图依次从1到9排序命名修改其组件标题，参考下图依次修改饼图的自定义属性中的关键字“需要修改的位置”为对应名称。如第一个饼图将关键字修改为“MPV中型”，第二个饼图将关键字修改为“SUV中型”，以此类推。

6、将字段“车类级别”分别拖拽到九个饼图的“筛选”上，勾选各个饼图筛选器内相应的值，顺序同上。

7、隐藏九个筛选器组件。

8、通过宏资源包实现图表特殊样式

在“公共设置”的“宏资源包”下新建一个“资源包”。

填写资源包名称，设置资源包适用类型为仪表盘，并且只能对指定报表生效，将本示例demo报表添加进“适用范围描述”内。

新建客户端宏：【名称】饼图销售量占比；【对象】组件；【事件】onBeforeRender(组件渲染前)，将以下宏代码复制进去

代码块

language	js
linenumbers	true
collapse	true

function main(page: IPage, portlet: IEChartsPortlet) {
    if (typeof portlet.getChartOptions !== 'function') return
    let options = portlet.getChartOptions()
    let { series } = options
    if (series[0].name !== '销售量占比' || series[0].type !== 'pie') return
    let { data } = series[0]
    let disValue = parseFloat(data[0].displayValue[1])
    let value = parseFloat(data[0].value[0])
    let newData = {
        colIndex: 0,
        displayValue: ['其他', 100 - disValue + '%'],
        name: '其他',
        rowIndex: [1, 1],
        value: [1 - value]
    }
    data.push(newData)
    series[0].label = series[0].label || {}
    series[0].label.position = 'center'
    series[0].label.normal = series[0].label.normal || {}
    series[0].label.normal.formatter = data[0].displayValue[1]

    options.title.left = 'center'
    options.title.top = 'bottom'
    options.title.show = true
    options.title.text = data[0].name
    options.title.textStyle.color = '#33ffff'
    portlet.setChartOptions(options)
}

新建客户端宏：【名称】车类级别销售量占比；【对象】组件；【事件】onBeforeRender(组件渲染前)

将以下宏代码复制进去

代码块

language	js
linenumbers	true
collapse	true

function main(page: IPage, portlet: IEChartsPortlet) {
    if (typeof portlet.getChartOptions !== 'function') return
    let options = portlet.getChartOptions()
    let { series } = options
    let { data } = series[0]
    if (series[0].name !== '销量 (全局占比)' || series[0].type !== 'pie' || data.length > 3) return
    let names = ['MPV', 'SUV', '轿车']
    let values = []
    for (let i = 0; i < data.length; i++) {
        let name = data[i].name
        if (name) {
            let index = names.indexOf(name)
            values[index] = data[i].value
        }
    }
    for (let i = 0; i < data.length; i++) {
        data[i].name = names[i]
        data[i].values = values[i]
    }
    portlet.setChartOptions(options)
}

2.3. 界面美化

2.3.1. 添加动态图片实现动态效果

可以通过添加动态图片实现动态效果，下载动态素材，将素材插入到合适的位置上。

下载动态素材GIF.zip
在更多组件中，选择图片组件，上传准备好的动态GIF图，调整图片位置、大小，效果如图：

详情请参考组件设置-图片。

2.3.2. 筛选器实现联动效果

1、在地图组件上，点击右上角浮窗内的 作为筛选器 按钮。

2、右键更多中选择“影响报表>自定义”，勾选需要影响的组件名：

详情请参考联动设置。

2.3.4. 修改图层布局

在图层区内可以设置“布局设置”

设置该布局组件的边距、间距等属性

3.资源下载

名称	下载
数据资源	demodata.rar
报表资源	全国汽车销量分析资源文件.xml
图片资源	GIF.zip、大屏底图.png

页面树结构

版本比较

旧版本 14

新版本 15

标识

1. 报表总览

1.1. 背景描述

2. 定制方法

2.1. 总体设计

2.2. 组件详解

2.2.1. 标题

2.2.2. 各需求销售情况

2.2.3. 历年总销售规模

2.2.4. 全国各地区销量分布形式

2.2.5. 每年的汽车销量

2.2.6.车型销量排行

2.2.7. 各车企的销售情况

2.2.8. 各车类销量占比分析

2.2.9. 各车类分级别的销量占比

2.3. 界面美化

2.3.1. 添加动态图片实现动态效果

2.3.2. 筛选器实现联动效果

2.3.4. 修改图层布局

3.资源下载