LargeLineDraw.js 3.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125
  1. var graphic = require("../../util/graphic");
  2. var lineContain = require("zrender/lib/contain/line");
  3. var quadraticContain = require("zrender/lib/contain/quadratic");
  4. // TODO Batch by color
  5. var LargeLineShape = graphic.extendShape({
  6. shape: {
  7. polyline: false,
  8. segs: []
  9. },
  10. buildPath: function (path, shape) {
  11. var segs = shape.segs;
  12. var isPolyline = shape.polyline;
  13. for (var i = 0; i < segs.length; i++) {
  14. var seg = segs[i];
  15. if (isPolyline) {
  16. path.moveTo(seg[0][0], seg[0][1]);
  17. for (var j = 1; j < seg.length; j++) {
  18. path.lineTo(seg[j][0], seg[j][1]);
  19. }
  20. } else {
  21. path.moveTo(seg[0][0], seg[0][1]);
  22. if (seg.length > 2) {
  23. path.quadraticCurveTo(seg[2][0], seg[2][1], seg[1][0], seg[1][1]);
  24. } else {
  25. path.lineTo(seg[1][0], seg[1][1]);
  26. }
  27. }
  28. }
  29. },
  30. findDataIndex: function (x, y) {
  31. var shape = this.shape;
  32. var segs = shape.segs;
  33. var isPolyline = shape.polyline;
  34. var lineWidth = Math.max(this.style.lineWidth, 1); // Not consider transform
  35. for (var i = 0; i < segs.length; i++) {
  36. var seg = segs[i];
  37. if (isPolyline) {
  38. for (var j = 1; j < seg.length; j++) {
  39. if (lineContain.containStroke(seg[j - 1][0], seg[j - 1][1], seg[j][0], seg[j][1], lineWidth, x, y)) {
  40. return i;
  41. }
  42. }
  43. } else {
  44. if (seg.length > 2) {
  45. if (quadraticContain.containStroke(seg[0][0], seg[0][1], seg[2][0], seg[2][1], seg[1][0], seg[1][1], lineWidth, x, y)) {
  46. return i;
  47. }
  48. } else {
  49. if (lineContain.containStroke(seg[0][0], seg[0][1], seg[1][0], seg[1][1], lineWidth, x, y)) {
  50. return i;
  51. }
  52. }
  53. }
  54. }
  55. return -1;
  56. }
  57. });
  58. function LargeLineDraw() {
  59. this.group = new graphic.Group();
  60. this._lineEl = new LargeLineShape();
  61. }
  62. var largeLineProto = LargeLineDraw.prototype;
  63. /**
  64. * Update symbols draw by new data
  65. * @param {module:echarts/data/List} data
  66. */
  67. largeLineProto.updateData = function (data) {
  68. this.group.removeAll();
  69. var lineEl = this._lineEl;
  70. var seriesModel = data.hostModel;
  71. lineEl.setShape({
  72. segs: data.mapArray(data.getItemLayout),
  73. polyline: seriesModel.get('polyline')
  74. });
  75. lineEl.useStyle(seriesModel.getModel('lineStyle.normal').getLineStyle());
  76. var visualColor = data.getVisual('color');
  77. if (visualColor) {
  78. lineEl.setStyle('stroke', visualColor);
  79. }
  80. lineEl.setStyle('fill'); // Enable tooltip
  81. // PENDING May have performance issue when path is extremely large
  82. lineEl.seriesIndex = seriesModel.seriesIndex;
  83. lineEl.on('mousemove', function (e) {
  84. lineEl.dataIndex = null;
  85. var dataIndex = lineEl.findDataIndex(e.offsetX, e.offsetY);
  86. if (dataIndex > 0) {
  87. // Provide dataIndex for tooltip
  88. lineEl.dataIndex = dataIndex;
  89. }
  90. }); // Add back
  91. this.group.add(lineEl);
  92. };
  93. largeLineProto.updateLayout = function (seriesModel) {
  94. var data = seriesModel.getData();
  95. this._lineEl.setShape({
  96. segs: data.mapArray(data.getItemLayout)
  97. });
  98. };
  99. largeLineProto.remove = function () {
  100. this.group.removeAll();
  101. };
  102. var _default = LargeLineDraw;
  103. module.exports = _default;