LegendModel.js 5.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186
  1. var echarts = require("../../echarts");
  2. var zrUtil = require("zrender/lib/core/util");
  3. var Model = require("../../model/Model");
  4. var LegendModel = echarts.extendComponentModel({
  5. type: 'legend.plain',
  6. dependencies: ['series'],
  7. layoutMode: {
  8. type: 'box',
  9. // legend.width/height are maxWidth/maxHeight actually,
  10. // whereas realy width/height is calculated by its content.
  11. // (Setting {left: 10, right: 10} does not make sense).
  12. // So consider the case:
  13. // `setOption({legend: {left: 10});`
  14. // then `setOption({legend: {right: 10});`
  15. // The previous `left` should be cleared by setting `ignoreSize`.
  16. ignoreSize: true
  17. },
  18. init: function (option, parentModel, ecModel) {
  19. this.mergeDefaultAndTheme(option, ecModel);
  20. option.selected = option.selected || {};
  21. },
  22. mergeOption: function (option) {
  23. LegendModel.superCall(this, 'mergeOption', option);
  24. },
  25. optionUpdated: function () {
  26. this._updateData(this.ecModel);
  27. var legendData = this._data; // If selectedMode is single, try to select one
  28. if (legendData[0] && this.get('selectedMode') === 'single') {
  29. var hasSelected = false; // If has any selected in option.selected
  30. for (var i = 0; i < legendData.length; i++) {
  31. var name = legendData[i].get('name');
  32. if (this.isSelected(name)) {
  33. // Force to unselect others
  34. this.select(name);
  35. hasSelected = true;
  36. break;
  37. }
  38. } // Try select the first if selectedMode is single
  39. !hasSelected && this.select(legendData[0].get('name'));
  40. }
  41. },
  42. _updateData: function (ecModel) {
  43. var legendData = zrUtil.map(this.get('data') || [], function (dataItem) {
  44. // Can be string or number
  45. if (typeof dataItem === 'string' || typeof dataItem === 'number') {
  46. dataItem = {
  47. name: dataItem
  48. };
  49. }
  50. return new Model(dataItem, this, this.ecModel);
  51. }, this);
  52. this._data = legendData;
  53. var availableNames = zrUtil.map(ecModel.getSeries(), function (series) {
  54. return series.name;
  55. });
  56. ecModel.eachSeries(function (seriesModel) {
  57. if (seriesModel.legendDataProvider) {
  58. var data = seriesModel.legendDataProvider();
  59. availableNames = availableNames.concat(data.mapArray(data.getName));
  60. }
  61. });
  62. /**
  63. * @type {Array.<string>}
  64. * @private
  65. */
  66. this._availableNames = availableNames;
  67. },
  68. /**
  69. * @return {Array.<module:echarts/model/Model>}
  70. */
  71. getData: function () {
  72. return this._data;
  73. },
  74. /**
  75. * @param {string} name
  76. */
  77. select: function (name) {
  78. var selected = this.option.selected;
  79. var selectedMode = this.get('selectedMode');
  80. if (selectedMode === 'single') {
  81. var data = this._data;
  82. zrUtil.each(data, function (dataItem) {
  83. selected[dataItem.get('name')] = false;
  84. });
  85. }
  86. selected[name] = true;
  87. },
  88. /**
  89. * @param {string} name
  90. */
  91. unSelect: function (name) {
  92. if (this.get('selectedMode') !== 'single') {
  93. this.option.selected[name] = false;
  94. }
  95. },
  96. /**
  97. * @param {string} name
  98. */
  99. toggleSelected: function (name) {
  100. var selected = this.option.selected; // Default is true
  101. if (!selected.hasOwnProperty(name)) {
  102. selected[name] = true;
  103. }
  104. this[selected[name] ? 'unSelect' : 'select'](name);
  105. },
  106. /**
  107. * @param {string} name
  108. */
  109. isSelected: function (name) {
  110. var selected = this.option.selected;
  111. return !(selected.hasOwnProperty(name) && !selected[name]) && zrUtil.indexOf(this._availableNames, name) >= 0;
  112. },
  113. defaultOption: {
  114. // 一级层叠
  115. zlevel: 0,
  116. // 二级层叠
  117. z: 4,
  118. show: true,
  119. // 布局方式,默认为水平布局,可选为:
  120. // 'horizontal' | 'vertical'
  121. orient: 'horizontal',
  122. left: 'center',
  123. // right: 'center',
  124. top: 0,
  125. // bottom: null,
  126. // 水平对齐
  127. // 'auto' | 'left' | 'right'
  128. // 默认为 'auto', 根据 x 的位置判断是左对齐还是右对齐
  129. align: 'auto',
  130. backgroundColor: 'rgba(0,0,0,0)',
  131. // 图例边框颜色
  132. borderColor: '#ccc',
  133. borderRadius: 0,
  134. // 图例边框线宽,单位px,默认为0(无边框)
  135. borderWidth: 0,
  136. // 图例内边距,单位px,默认各方向内边距为5,
  137. // 接受数组分别设定上右下左边距,同css
  138. padding: 5,
  139. // 各个item之间的间隔,单位px,默认为10,
  140. // 横向布局时为水平间隔,纵向布局时为纵向间隔
  141. itemGap: 10,
  142. // 图例图形宽度
  143. itemWidth: 25,
  144. // 图例图形高度
  145. itemHeight: 14,
  146. // 图例关闭时候的颜色
  147. inactiveColor: '#ccc',
  148. textStyle: {
  149. // 图例文字颜色
  150. color: '#333'
  151. },
  152. // formatter: '',
  153. // 选择模式,默认开启图例开关
  154. selectedMode: true,
  155. // 配置默认选中状态,可配合LEGEND.SELECTED事件做动态数据载入
  156. // selected: null,
  157. // 图例内容(详见legend.data,数组中每一项代表一个item
  158. // data: [],
  159. // Tooltip 相关配置
  160. tooltip: {
  161. show: false
  162. }
  163. }
  164. });
  165. var _default = LegendModel;
  166. module.exports = _default;