059ba06e0c22124e34e611c9ff9ac14b95d1afdfb376934733cd9d0bc77a2613a9b888a681e51e77275457e9976ba8eccc49ddcb8ce590bdafde27dac63664 10.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431
  1. import { doUpdate } from '../class/updater.class'
  2. import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
  3. import { legendConfig } from '../config'
  4. import { deepMerge, mulAdd } from '../util'
  5. export function legend (chart, option = {}) {
  6. let { legend } = option
  7. if (legend) {
  8. legend = deepMerge(deepClone(legendConfig, true), legend)
  9. legend = initLegendData(legend)
  10. legend = filterInvalidData(legend, option, chart)
  11. legend = calcLegendTextWidth(legend, chart)
  12. legend = calcLegendPosition(legend, chart)
  13. legend = [legend]
  14. } else {
  15. legend = []
  16. }
  17. doUpdate({
  18. chart,
  19. series: legend,
  20. key: 'legendIcon',
  21. getGraphConfig: getIconConfig
  22. })
  23. doUpdate({
  24. chart,
  25. series: legend,
  26. key: 'legendText',
  27. getGraphConfig: getTextConfig
  28. })
  29. }
  30. function initLegendData (legend) {
  31. const { data } = legend
  32. legend.data = data.map(item => {
  33. const itemType = typeof item
  34. if (itemType === 'string') {
  35. return { name: item }
  36. } else if (itemType === 'object') {
  37. return item
  38. }
  39. return { name: '' }
  40. })
  41. return legend
  42. }
  43. function filterInvalidData (legend, option, chart) {
  44. const { series } = option
  45. let { legendStatus } = chart
  46. const data = legend.data.filter(item => {
  47. const { name } = item
  48. const result = series.find(({ name: sn }) => name === sn)
  49. if (!result) return false
  50. if (!item.color) item.color = result.color
  51. if (!item.icon) item.icon = result.type
  52. return item
  53. })
  54. if (!legendStatus || legendStatus.length !== legend.data.length) legendStatus = new Array(legend.data.length).fill(true)
  55. data.forEach((item, i) => (item.status = legendStatus[i]))
  56. legend.data = data
  57. chart.legendStatus = legendStatus
  58. return legend
  59. }
  60. function calcLegendTextWidth (legend, chart) {
  61. const { ctx } = chart.render
  62. const { data, textStyle, textUnselectedStyle } = legend
  63. data.forEach(item => {
  64. const { status, name } = item
  65. item.textWidth = getTextWidth(ctx, name, status ? textStyle : textUnselectedStyle)
  66. })
  67. return legend
  68. }
  69. function getTextWidth (ctx, text, style) {
  70. ctx.font = getFontConfig(style)
  71. return ctx.measureText(text).width
  72. }
  73. function getFontConfig (style) {
  74. const { fontFamily, fontSize } = style
  75. return `${fontSize}px ${fontFamily}`
  76. }
  77. function calcLegendPosition (legend, chart) {
  78. const { orient } = legend
  79. if (orient === 'vertical') {
  80. calcVerticalPosition(legend, chart)
  81. } else {
  82. calcHorizontalPosition(legend, chart)
  83. }
  84. return legend
  85. }
  86. function calcHorizontalPosition (legend, chart) {
  87. const { iconHeight, itemGap } = legend
  88. const lines = calcDefaultHorizontalPosition(legend, chart)
  89. const xOffsets = lines.map(line => getHorizontalXOffset(line, legend, chart))
  90. const yOffset = getHorizontalYOffset(legend, chart)
  91. const align = { textAlign: 'left', textBaseline: 'middle' }
  92. lines.forEach((line, i) => line.forEach(item => {
  93. const { iconPosition, textPosition } = item
  94. let xOffset = xOffsets[i]
  95. const realYOffset = yOffset + i * (itemGap + iconHeight)
  96. item.iconPosition = mergeOffset(iconPosition, [xOffset, realYOffset])
  97. item.textPosition = mergeOffset(textPosition, [xOffset, realYOffset])
  98. item.align = align
  99. })
  100. )
  101. }
  102. function calcDefaultHorizontalPosition (legend, chart) {
  103. const { data, iconWidth } = legend
  104. const w = chart.render.area[0]
  105. let startIndex = 0
  106. const lines = [[]]
  107. data.forEach((item, i) => {
  108. let beforeWidth = getBeforeWidth(startIndex, i, legend)
  109. const endXPos = beforeWidth + iconWidth + 5 + item.textWidth
  110. if (endXPos >= w) {
  111. startIndex = i
  112. beforeWidth = getBeforeWidth(startIndex, i, legend)
  113. lines.push([])
  114. }
  115. item.iconPosition = [beforeWidth, 0]
  116. item.textPosition = [beforeWidth + iconWidth + 5, 0]
  117. lines.slice(-1)[0].push(item)
  118. })
  119. return lines
  120. }
  121. function getBeforeWidth (startIndex, currentIndex, legend) {
  122. const { data, iconWidth, itemGap } = legend
  123. const beforeItem = data.slice(startIndex, currentIndex)
  124. return mulAdd(beforeItem.map(({ textWidth }) => textWidth)) + (currentIndex - startIndex) * (itemGap + 5 + iconWidth)
  125. }
  126. function getHorizontalXOffset (data, legend, chart) {
  127. let { left, right, iconWidth, itemGap } = legend
  128. const w = chart.render.area[0]
  129. const dataNum = data.length
  130. const allWidth = mulAdd(data.map(({ textWidth }) => textWidth)) + dataNum * (5 + iconWidth) + (dataNum - 1) * itemGap
  131. const horizontal = [left, right].findIndex(pos => pos !== 'auto')
  132. if (horizontal === -1) {
  133. return (w - allWidth) / 2
  134. } else if (horizontal === 0) {
  135. if (typeof left === 'number') return left
  136. return parseInt(left) / 100 * w
  137. } else {
  138. if (typeof right !== 'number') right = parseInt(right) / 100 * w
  139. return w - (allWidth + right)
  140. }
  141. }
  142. function getHorizontalYOffset (legend, chart) {
  143. let { top, bottom, iconHeight } = legend
  144. const h = chart.render.area[1]
  145. const vertical = [top, bottom].findIndex(pos => pos !== 'auto')
  146. const halfIconHeight = iconHeight / 2
  147. if (vertical === -1) {
  148. const { y, h: height } = chart.gridArea
  149. return y + height + 45 - halfIconHeight
  150. } else if (vertical === 0) {
  151. if (typeof top === 'number') return top - halfIconHeight
  152. return parseInt(top) / 100 * h - halfIconHeight
  153. } else {
  154. if (typeof bottom !== 'number') bottom = parseInt(bottom) / 100 * h
  155. return h - bottom - halfIconHeight
  156. }
  157. }
  158. function mergeOffset ([x, y], [ox, oy]) {
  159. return [x + ox, y + oy]
  160. }
  161. function calcVerticalPosition (legend, chart) {
  162. const [isRight, xOffset] = getVerticalXOffset(legend, chart)
  163. const yOffset = getVerticalYOffset(legend, chart)
  164. calcDefaultVerticalPosition(legend, isRight)
  165. let align = { textAlign: 'left', textBaseline: 'middle' }
  166. legend.data.forEach(item => {
  167. const { textPosition, iconPosition } = item
  168. item.textPosition = mergeOffset(textPosition, [xOffset, yOffset])
  169. item.iconPosition = mergeOffset(iconPosition, [xOffset, yOffset])
  170. item.align = align
  171. })
  172. }
  173. function getVerticalXOffset (legend, chart) {
  174. const { left, right } = legend
  175. const w = chart.render.area[0]
  176. const horizontal = [left, right].findIndex(pos => pos !== 'auto')
  177. if (horizontal === -1) {
  178. return [
  179. true,
  180. w - 10
  181. ]
  182. } else {
  183. let offset = [left, right][horizontal]
  184. if (typeof offset !== 'number') offset = parseInt(offset) / 100 * w
  185. return [
  186. Boolean(horizontal),
  187. offset
  188. ]
  189. }
  190. }
  191. function getVerticalYOffset (legend, chart) {
  192. const { iconHeight, itemGap, data, top, bottom } = legend
  193. const h = chart.render.area[1]
  194. const dataNum = data.length
  195. const allHeight = dataNum * iconHeight + (dataNum - 1) * itemGap
  196. const vertical = [top, bottom].findIndex(pos => pos !== 'auto')
  197. if (vertical === -1) {
  198. return (h - allHeight) / 2
  199. } else {
  200. let offset = [top, bottom][vertical]
  201. if (typeof offset !== 'number') offset = parseInt(offset) / 100 * h
  202. if (vertical === 1) offset = h - offset - allHeight
  203. return offset
  204. }
  205. }
  206. function calcDefaultVerticalPosition (legend, isRight) {
  207. const { data, iconWidth, iconHeight, itemGap } = legend
  208. const halfIconHeight = iconHeight / 2
  209. data.forEach((item, i) => {
  210. const { textWidth } = item
  211. const yPos = (iconHeight + itemGap) * i + halfIconHeight
  212. const iconXPos = isRight ? (0 - iconWidth) : 0
  213. const textXpos = isRight ? (iconXPos - 5 - textWidth) : (iconWidth + 5)
  214. item.iconPosition = [iconXPos, yPos]
  215. item.textPosition = [textXpos, yPos]
  216. })
  217. }
  218. function getIconConfig (legendItem, updater) {
  219. const { data, selectAble, animationCurve, animationFrame, rLevel } = legendItem
  220. return data.map((item, i) => ({
  221. name: item.icon === 'line' ? 'lineIcon' : 'rect',
  222. index: rLevel,
  223. visible: legendItem.show,
  224. hover: selectAble,
  225. click: selectAble,
  226. animationCurve,
  227. animationFrame,
  228. shape: getIconShape(legendItem, i),
  229. style: getIconStyle(legendItem, i),
  230. click: createClickCallBack(legendItem, i, updater)
  231. }))
  232. }
  233. function getIconShape (legendItem, i) {
  234. const { data, iconWidth, iconHeight } = legendItem
  235. const [x, y] = data[i].iconPosition
  236. const halfIconHeight = iconHeight / 2
  237. return {
  238. x,
  239. y: y - halfIconHeight,
  240. w: iconWidth,
  241. h: iconHeight
  242. }
  243. }
  244. function getIconStyle (legendItem, i) {
  245. const { data, iconStyle, iconUnselectedStyle } = legendItem
  246. const { status, color } = data[i]
  247. const style = status ? iconStyle : iconUnselectedStyle
  248. return deepMerge({ fill: color }, style)
  249. }
  250. function getTextConfig (legendItem, updater) {
  251. const { data, selectAble, animationCurve, animationFrame, rLevel } = legendItem
  252. return data.map((foo, i) => ({
  253. name: 'text',
  254. index: rLevel,
  255. visible: legendItem.show,
  256. hover: selectAble,
  257. animationCurve,
  258. animationFrame,
  259. hoverRect: getTextHoverRect(legendItem, i),
  260. shape: getTextShape(legendItem, i),
  261. style: getTextStyle(legendItem, i),
  262. click: createClickCallBack(legendItem, i, updater)
  263. }))
  264. }
  265. function getTextShape (legendItem, i) {
  266. const { textPosition, name } = legendItem.data[i]
  267. return {
  268. content: name,
  269. position: textPosition
  270. }
  271. }
  272. function getTextStyle (legendItem, i) {
  273. const { textStyle, textUnselectedStyle } = legendItem
  274. const { status, align } = legendItem.data[i]
  275. const style = status ? textStyle : textUnselectedStyle
  276. return deepMerge(deepClone(style, true), align)
  277. }
  278. function getTextHoverRect (legendItem, i) {
  279. const { textStyle, textUnselectedStyle } = legendItem
  280. const { status, textPosition: [x, y], textWidth } = legendItem.data[i]
  281. const style = status ? textStyle : textUnselectedStyle
  282. const { fontSize } = style
  283. return [x, y - (fontSize / 2), textWidth, fontSize]
  284. }
  285. function createClickCallBack (legendItem, index, updater) {
  286. const { name } = legendItem.data[index]
  287. return () => {
  288. const { legendStatus, option } = updater.chart
  289. const status = !legendStatus[index]
  290. const change = option.series.find(({ name: sn }) => sn === name)
  291. change.show = status
  292. legendStatus[index] = status
  293. updater.chart.setOption(option)
  294. }
  295. }