SliderTimelineModel.js 5.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142
  1. /*
  2. * Licensed to the Apache Software Foundation (ASF) under one
  3. * or more contributor license agreements. See the NOTICE file
  4. * distributed with this work for additional information
  5. * regarding copyright ownership. The ASF licenses this file
  6. * to you under the Apache License, Version 2.0 (the
  7. * "License"); you may not use this file except in compliance
  8. * with the License. You may obtain a copy of the License at
  9. *
  10. * http://www.apache.org/licenses/LICENSE-2.0
  11. *
  12. * Unless required by applicable law or agreed to in writing,
  13. * software distributed under the License is distributed on an
  14. * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
  15. * KIND, either express or implied. See the License for the
  16. * specific language governing permissions and limitations
  17. * under the License.
  18. */
  19. var zrUtil = require("zrender/lib/core/util");
  20. var TimelineModel = require("./TimelineModel");
  21. var dataFormatMixin = require("../../model/mixin/dataFormat");
  22. /*
  23. * Licensed to the Apache Software Foundation (ASF) under one
  24. * or more contributor license agreements. See the NOTICE file
  25. * distributed with this work for additional information
  26. * regarding copyright ownership. The ASF licenses this file
  27. * to you under the Apache License, Version 2.0 (the
  28. * "License"); you may not use this file except in compliance
  29. * with the License. You may obtain a copy of the License at
  30. *
  31. * http://www.apache.org/licenses/LICENSE-2.0
  32. *
  33. * Unless required by applicable law or agreed to in writing,
  34. * software distributed under the License is distributed on an
  35. * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
  36. * KIND, either express or implied. See the License for the
  37. * specific language governing permissions and limitations
  38. * under the License.
  39. */
  40. var SliderTimelineModel = TimelineModel.extend({
  41. type: 'timeline.slider',
  42. /**
  43. * @protected
  44. */
  45. defaultOption: {
  46. backgroundColor: 'rgba(0,0,0,0)',
  47. // 时间轴背景颜色
  48. borderColor: '#ccc',
  49. // 时间轴边框颜色
  50. borderWidth: 0,
  51. // 时间轴边框线宽,单位px,默认为0(无边框)
  52. orient: 'horizontal',
  53. // 'vertical'
  54. inverse: false,
  55. tooltip: {
  56. // boolean or Object
  57. trigger: 'item' // data item may also have tootip attr.
  58. },
  59. symbol: 'emptyCircle',
  60. symbolSize: 10,
  61. lineStyle: {
  62. show: true,
  63. width: 2,
  64. color: '#304654'
  65. },
  66. label: {
  67. // 文本标签
  68. position: 'auto',
  69. // auto left right top bottom
  70. // When using number, label position is not
  71. // restricted by viewRect.
  72. // positive: right/bottom, negative: left/top
  73. show: true,
  74. interval: 'auto',
  75. rotate: 0,
  76. // formatter: null,
  77. // 其余属性默认使用全局文本样式,详见TEXTSTYLE
  78. color: '#304654'
  79. },
  80. itemStyle: {
  81. color: '#304654',
  82. borderWidth: 1
  83. },
  84. checkpointStyle: {
  85. symbol: 'circle',
  86. symbolSize: 13,
  87. color: '#c23531',
  88. borderWidth: 5,
  89. borderColor: 'rgba(194,53,49, 0.5)',
  90. animation: true,
  91. animationDuration: 300,
  92. animationEasing: 'quinticInOut'
  93. },
  94. controlStyle: {
  95. show: true,
  96. showPlayBtn: true,
  97. showPrevBtn: true,
  98. showNextBtn: true,
  99. itemSize: 22,
  100. itemGap: 12,
  101. position: 'left',
  102. // 'left' 'right' 'top' 'bottom'
  103. playIcon: 'path://M31.6,53C17.5,53,6,41.5,6,27.4S17.5,1.8,31.6,1.8C45.7,1.8,57.2,13.3,57.2,27.4S45.7,53,31.6,53z M31.6,3.3 C18.4,3.3,7.5,14.1,7.5,27.4c0,13.3,10.8,24.1,24.1,24.1C44.9,51.5,55.7,40.7,55.7,27.4C55.7,14.1,44.9,3.3,31.6,3.3z M24.9,21.3 c0-2.2,1.6-3.1,3.5-2l10.5,6.1c1.899,1.1,1.899,2.9,0,4l-10.5,6.1c-1.9,1.1-3.5,0.2-3.5-2V21.3z',
  104. // jshint ignore:line
  105. stopIcon: 'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z',
  106. // jshint ignore:line
  107. nextIcon: 'path://M18.6,50.8l22.5-22.5c0.2-0.2,0.3-0.4,0.3-0.7c0-0.3-0.1-0.5-0.3-0.7L18.7,4.4c-0.1-0.1-0.2-0.3-0.2-0.5 c0-0.4,0.3-0.8,0.8-0.8c0.2,0,0.5,0.1,0.6,0.3l23.5,23.5l0,0c0.2,0.2,0.3,0.4,0.3,0.7c0,0.3-0.1,0.5-0.3,0.7l-0.1,0.1L19.7,52 c-0.1,0.1-0.3,0.2-0.5,0.2c-0.4,0-0.8-0.3-0.8-0.8C18.4,51.2,18.5,51,18.6,50.8z',
  108. // jshint ignore:line
  109. prevIcon: 'path://M43,52.8L20.4,30.3c-0.2-0.2-0.3-0.4-0.3-0.7c0-0.3,0.1-0.5,0.3-0.7L42.9,6.4c0.1-0.1,0.2-0.3,0.2-0.5 c0-0.4-0.3-0.8-0.8-0.8c-0.2,0-0.5,0.1-0.6,0.3L18.3,28.8l0,0c-0.2,0.2-0.3,0.4-0.3,0.7c0,0.3,0.1,0.5,0.3,0.7l0.1,0.1L41.9,54 c0.1,0.1,0.3,0.2,0.5,0.2c0.4,0,0.8-0.3,0.8-0.8C43.2,53.2,43.1,53,43,52.8z',
  110. // jshint ignore:line
  111. color: '#304654',
  112. borderColor: '#304654',
  113. borderWidth: 1
  114. },
  115. emphasis: {
  116. label: {
  117. show: true,
  118. // 其余属性默认使用全局文本样式,详见TEXTSTYLE
  119. color: '#c23531'
  120. },
  121. itemStyle: {
  122. color: '#c23531'
  123. },
  124. controlStyle: {
  125. color: '#c23531',
  126. borderColor: '#c23531',
  127. borderWidth: 2
  128. }
  129. },
  130. data: []
  131. }
  132. });
  133. zrUtil.mixin(SliderTimelineModel, dataFormatMixin);
  134. var _default = SliderTimelineModel;
  135. module.exports = _default;