项目三电商数据可视化项目交互式设计数据可视化技术与应用26.pptxVIP

主讲教师：王晓项目三：电商数据可视化项目交互式设计任务2：设置直角坐标系下的坐标轴数据可视化技术与应用

030102目录CONTENTS坐标轴的简介坐标轴的属性坐标轴示例

案例展示观察一下图形的坐标轴，有什么特点？思考什么情况下需要这样去设置坐标轴？

坐标轴的简介直角坐标系下有3种类型的坐标轴（axis）：类目型（category）、数值型（value）和时间型（time）。（1）类目型：必须指定类目列表，坐标轴内有且仅有这些指定类目坐标。（2）数值型：需要指定数值区间，如果没有指定，将由系统自动计算从而确定计算数值范围，坐标轴内包含数值区间内的全部坐标。（3）时间型：时间型坐标轴用法与数值型的非常相似，只是目标处理和格式化显示时会自动转变为时间，并且随着时间跨度的不同而自动切换需要显示的时间粒度，例如：时间跨度为一年，系统将自动显示以月为单位的时间粒度；时间跨度为几个小时，系统将自动显示以分钟为单位的时间粒度。

坐标轴的简介X轴直角坐标系grid中的x轴，一般情况下单个grid组件最多只能放上下两个x轴，多于两个x轴需要通过配置offset属性防止同个位置多个×轴的重叠。Y轴直角坐标系grid中的y轴，一般情况下单个grid组件最多只能放左右两个y轴，多于两个y轴需要通过配置offset属性防止同个位置多个Y轴的重叠。

坐标轴的属性坐标轴组件属性示意图如图所示。

坐标轴的属性参数默认值描述{string}typecategory、value、time、log坐标轴类型，横轴默认为类目型category，纵轴默认为数值型value{boolean}showtrue是否显示坐标轴，可选为：true（显示）和false（隐藏）{string}positionbottom、left坐标轴类型，横轴默认为类目型bottom，纵轴默认为数值型left，可选为：bottom、top、left、right{string}name坐标轴名称{string}nameLocationend坐标轴名称位置，可选为：start、middle、center、end{Object}nameTextStyle{}坐标轴名称文字样式，颜色跟随axisLine主色

坐标轴的属性参数默认值描述{boolean}boundaryGaptrue类目起始和结束两端的空白策略，默认为true（留空），false则为顶头{Array}boundaryGap[0,0]坐标轴两端空白策略，为一个具有两个值的数组，分别表示数据最小值和最大值的延伸范围，可以直接设置数值或相对的百分比，在设置min和max后无效{number}minnull指定的最小值，会自动根据具体数值调整，指定后将忽略boundaryGap[0]{number}maxnull指定的最大值，会自动根据具体数值调整，指定后将忽略boundaryGap[1]{boolean}scalefalse是否脱离0值比例，设置成true后，坐标刻度不会强制包含零刻度；在设置min和max之后，该配置项无效{number}splitNumbernull分割段数，不指定时根据min、max算法调整

坐标轴的示例利用某一年的蒸发量、降水量、最低气温和最高气温数据绘制双x轴和双y轴的折柱混搭图，并设置坐标轴的相关属性，如图所示。由图可知，有上、下两条横轴，左、右两条纵轴，并且下边的横轴中有一个数据项标签较为突出，这是因为ECharts允许对个别标签进行个性化定义，数组项可设置为一个对象，并使用子属性textStyle设置个性化标签。

上机练习坐标轴配置独立绘制折柱混合图展示某电商平台2023年各省份平均消费额（四舍五入保留两位小数）和地区平均消费额（四舍五入保留两位小数）的对比情况，柱状图展示平均消费额最高的5个省份，折线图展示这5个省所在的地区的平均消费额变化，左边坐标轴展示柱状图数据，右边坐标轴展示折线图数据。

1、掌握什么是坐标轴配置

2、掌握坐标轴配置项的基本属性总结

谢谢观看！数据可视化技术与应用