VisualMapView.js 3.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153
  1. var echarts = require("../../echarts");
  2. var zrUtil = require("zrender/lib/core/util");
  3. var graphic = require("../../util/graphic");
  4. var formatUtil = require("../../util/format");
  5. var layout = require("../../util/layout");
  6. var VisualMapping = require("../../visual/VisualMapping");
  7. var _default = echarts.extendComponentView({
  8. type: 'visualMap',
  9. /**
  10. * @readOnly
  11. * @type {Object}
  12. */
  13. autoPositionValues: {
  14. left: 1,
  15. right: 1,
  16. top: 1,
  17. bottom: 1
  18. },
  19. init: function (ecModel, api) {
  20. /**
  21. * @readOnly
  22. * @type {module:echarts/model/Global}
  23. */
  24. this.ecModel = ecModel;
  25. /**
  26. * @readOnly
  27. * @type {module:echarts/ExtensionAPI}
  28. */
  29. this.api = api;
  30. /**
  31. * @readOnly
  32. * @type {module:echarts/component/visualMap/visualMapModel}
  33. */
  34. this.visualMapModel;
  35. },
  36. /**
  37. * @protected
  38. */
  39. render: function (visualMapModel, ecModel, api, payload) {
  40. this.visualMapModel = visualMapModel;
  41. if (visualMapModel.get('show') === false) {
  42. this.group.removeAll();
  43. return;
  44. }
  45. this.doRender.apply(this, arguments);
  46. },
  47. /**
  48. * @protected
  49. */
  50. renderBackground: function (group) {
  51. var visualMapModel = this.visualMapModel;
  52. var padding = formatUtil.normalizeCssArray(visualMapModel.get('padding') || 0);
  53. var rect = group.getBoundingRect();
  54. group.add(new graphic.Rect({
  55. z2: -1,
  56. // Lay background rect on the lowest layer.
  57. silent: true,
  58. shape: {
  59. x: rect.x - padding[3],
  60. y: rect.y - padding[0],
  61. width: rect.width + padding[3] + padding[1],
  62. height: rect.height + padding[0] + padding[2]
  63. },
  64. style: {
  65. fill: visualMapModel.get('backgroundColor'),
  66. stroke: visualMapModel.get('borderColor'),
  67. lineWidth: visualMapModel.get('borderWidth')
  68. }
  69. }));
  70. },
  71. /**
  72. * @protected
  73. * @param {number} targetValue can be Infinity or -Infinity
  74. * @param {string=} visualCluster Only can be 'color' 'opacity' 'symbol' 'symbolSize'
  75. * @param {Object} [opts]
  76. * @param {string=} [opts.forceState] Specify state, instead of using getValueState method.
  77. * @param {string=} [opts.convertOpacityToAlpha=false] For color gradient in controller widget.
  78. * @return {*} Visual value.
  79. */
  80. getControllerVisual: function (targetValue, visualCluster, opts) {
  81. opts = opts || {};
  82. var forceState = opts.forceState;
  83. var visualMapModel = this.visualMapModel;
  84. var visualObj = {}; // Default values.
  85. if (visualCluster === 'symbol') {
  86. visualObj.symbol = visualMapModel.get('itemSymbol');
  87. }
  88. if (visualCluster === 'color') {
  89. var defaultColor = visualMapModel.get('contentColor');
  90. visualObj.color = defaultColor;
  91. }
  92. function getter(key) {
  93. return visualObj[key];
  94. }
  95. function setter(key, value) {
  96. visualObj[key] = value;
  97. }
  98. var mappings = visualMapModel.controllerVisuals[forceState || visualMapModel.getValueState(targetValue)];
  99. var visualTypes = VisualMapping.prepareVisualTypes(mappings);
  100. zrUtil.each(visualTypes, function (type) {
  101. var visualMapping = mappings[type];
  102. if (opts.convertOpacityToAlpha && type === 'opacity') {
  103. type = 'colorAlpha';
  104. visualMapping = mappings.__alphaForOpacity;
  105. }
  106. if (VisualMapping.dependsOn(type, visualCluster)) {
  107. visualMapping && visualMapping.applyVisual(targetValue, getter, setter);
  108. }
  109. });
  110. return visualObj[visualCluster];
  111. },
  112. /**
  113. * @protected
  114. */
  115. positionGroup: function (group) {
  116. var model = this.visualMapModel;
  117. var api = this.api;
  118. layout.positionElement(group, model.getBoxLayoutParams(), {
  119. width: api.getWidth(),
  120. height: api.getHeight()
  121. });
  122. },
  123. /**
  124. * @protected
  125. * @abstract
  126. */
  127. doRender: zrUtil.noop
  128. });
  129. module.exports = _default;