Web数据可视化教程（基于ECharts）教案 电子活页2-12 图表标域的主要属性及其设置

Java程序设计任务驱动教程Web数据可视化教程（基于ECharts）Web数据可视化教程（基于ECharts）图表标域的主要属性及其设置Web数据可视化教程（基于ECharts）◆series-line.markArea.silentboolean类型，用于设置图形是否不响应和触发鼠标事件，默认为false，即响应和触发鼠标事件。◆series-line.markArea.labelObject类型，用于标域文本配置。◆series-line.markArea.itemStyleObject类型，用于设置该标域的样式。◆series-line.markArea.emphasisObject类型，用于设置高亮的标域样式◆series-line.markArea.blurObject类型，从v5.0.0开始支持，用于设置淡出的标域样式，淡出的规则跟随所在系列。◆series-line.markArea.dataany类型，用于设置标域的数据数组。每个数组项是一个两个项的数组，分别表示标域左上角和右下角的位置，每个项支持通过下面几种方式指定自己的位置。①通过x,y属性指定相对容器的屏幕坐标，单位像素，支持百分比。②用coord属性指定数据在相应坐标系上的坐标位置，单个维度支持设置'min'、'max'、'average'。③直接用type属性标注系列中的最大值，最小值。这时候可以使用valueIndex或者valueDim指定是在哪个维度上的最大值、最小值、平均值。④如果是笛卡尔坐标系的话，也可以通过只指定xAxis或者yAxis来实现X轴或者Y轴为某值的标域。当多个属性同时存在时，优先级按上述的顺序。data:[[{name:'平均值到最大值',type:'average'},{type:'max'}],[{name:'两个坐标之间的标域',coord:[10,20]},{coord:[20,30]}],[{name:'60分到80分',yAxis:60},{yAxis:80}],[{name:'所有数据范围区间',coord:['min','min']},{coord:['max','max']}],[{name:'两个屏幕坐标之间的标域',x:100,y:100},{x:'90%',y:'10%'}]]◆series-line.markArea.animationboolean类型，用于设置是否开启动画。series-line.markArea.animationThreshold=2000number类型，用于设置是否开启动画的阈值，当单个系列显示的图形数量大于这个阈值时会关闭动画。◆series-line.markArea.animationDuration=1000number或Function类型，用于设置初始动画的时长，支持回调函数，可以通过每个数据返回不同的时长实现更戏剧的初始动画效果，示例代码如下：animationDuration:function(idx){//越往后的数据时长越大returnidx*100;}◆series-line.markArea.animationEasing='cubicOut'string类型，初始动画的缓动效果。◆series-line.markArea.animationDelaynumber或Function类型，用于设置初始动画的延迟，支持回调函数，可以通过每个数据返回不同的delay时间实现更戏剧的初始动画效果。示例代码如下：animationDelay:function(idx){//越往后的数据延迟越大returnidx*100;}◆series-line.markArea.animationDurationUpdate=300number或Function类型，用于设置数据更新动画的时长。支持回调函数，可以通过每个数据返回不同的时长实现更戏剧的更新动画效果，示例代码如下：animationDurationUpdate:function(idx){//越往后的数据时长越大returnidx*100;}◆series-line.markArea.animationEasingUpdate='cubicInOut'string类型，用于设置数据更新动画的缓动效果。◆series-line.markArea.animationDelayUpdatenumber或Function类型，用于设置数据更新动画的延迟，支