zh/builder/src/echarts3/chart/radar/RadarView.js

import * as echarts from '../../echarts';
import * as graphic from '../../util/graphic';
import * as zrUtil from 'zrender/src/core/util';
import * as symbolUtil from '../../util/symbol';

function normalizeSymbolSize(symbolSize) {
  if (!zrUtil.isArray(symbolSize)) {
    symbolSize = [+symbolSize, +symbolSize];
  }

  return symbolSize;
}

export default echarts.extendChartView({
  type: 'radar',
  render: function (seriesModel, ecModel, api) {
    var polar = seriesModel.coordinateSystem;
    var group = this.group;
    var data = seriesModel.getData();
    var oldData = this._data;

    function createSymbol(data, idx) {
      var symbolType = data.getItemVisual(idx, 'symbol') || 'circle';
      var color = data.getItemVisual(idx, 'color');

      if (symbolType === 'none') {
        return;
      }

      var symbolSize = normalizeSymbolSize(data.getItemVisual(idx, 'symbolSize'));
      var symbolPath = symbolUtil.createSymbol(symbolType, -1, -1, 2, 2, color);
      symbolPath.attr({
        style: {
          strokeNoScale: true
        },
        z2: 100,
        scale: [symbolSize[0] / 2, symbolSize[1] / 2]
      });
      return symbolPath;
    }

    function updateSymbols(oldPoints, newPoints, symbolGroup, data, idx, isInit) {
      // Simply rerender all
      symbolGroup.removeAll();

      for (var i = 0; i < newPoints.length - 1; i++) {
        var symbolPath = createSymbol(data, idx);

        if (symbolPath) {
          symbolPath.__dimIdx = i;

          if (oldPoints[i]) {
            symbolPath.attr('position', oldPoints[i]);
            graphic[isInit ? 'initProps' : 'updateProps'](symbolPath, {
              position: newPoints[i]
            }, seriesModel, idx);
          } else {
            symbolPath.attr('position', newPoints[i]);
          }

          symbolGroup.add(symbolPath);
        }
      }
    }

    function getInitialPoints(points) {
      return zrUtil.map(points, function (pt) {
        return [polar.cx, polar.cy];
      });
    }

    data.diff(oldData).add(function (idx) {
      var points = data.getItemLayout(idx);

      if (!points) {
        return;
      }

      var polygon = new graphic.Polygon();
      var polyline = new graphic.Polyline();
      var target = {
        shape: {
          points: points
        }
      };
      polygon.shape.points = getInitialPoints(points);
      polyline.shape.points = getInitialPoints(points);
      graphic.initProps(polygon, target, seriesModel, idx);
      graphic.initProps(polyline, target, seriesModel, idx);
      var itemGroup = new graphic.Group();
      var symbolGroup = new graphic.Group();
      itemGroup.add(polyline);
      itemGroup.add(polygon);
      itemGroup.add(symbolGroup);
      updateSymbols(polyline.shape.points, points, symbolGroup, data, idx, true);
      data.setItemGraphicEl(idx, itemGroup);
    }).update(function (newIdx, oldIdx) {
      var itemGroup = oldData.getItemGraphicEl(oldIdx);
      var polyline = itemGroup.childAt(0);
      var polygon = itemGroup.childAt(1);
      var symbolGroup = itemGroup.childAt(2);
      var target = {
        shape: {
          points: data.getItemLayout(newIdx)
        }
      };

      if (!target.shape.points) {
        return;
      }

      updateSymbols(polyline.shape.points, target.shape.points, symbolGroup, data, newIdx, false);
      graphic.updateProps(polyline, target, seriesModel);
      graphic.updateProps(polygon, target, seriesModel);
      data.setItemGraphicEl(newIdx, itemGroup);
    }).remove(function (idx) {
      group.remove(oldData.getItemGraphicEl(idx));
    }).execute();
    data.eachItemGraphicEl(function (itemGroup, idx) {
      var itemModel = data.getItemModel(idx);
      var polyline = itemGroup.childAt(0);
      var polygon = itemGroup.childAt(1);
      var symbolGroup = itemGroup.childAt(2);
      var color = data.getItemVisual(idx, 'color');
      group.add(itemGroup);
      polyline.useStyle(zrUtil.defaults(itemModel.getModel('lineStyle.normal').getLineStyle(), {
        fill: 'none',
        stroke: color
      }));
      polyline.hoverStyle = itemModel.getModel('lineStyle.emphasis').getLineStyle();
      var areaStyleModel = itemModel.getModel('areaStyle.normal');
      var hoverAreaStyleModel = itemModel.getModel('areaStyle.emphasis');
      var polygonIgnore = areaStyleModel.isEmpty() && areaStyleModel.parentModel.isEmpty();
      var hoverPolygonIgnore = hoverAreaStyleModel.isEmpty() && hoverAreaStyleModel.parentModel.isEmpty();
      hoverPolygonIgnore = hoverPolygonIgnore && polygonIgnore;
      polygon.ignore = polygonIgnore;
      polygon.useStyle(zrUtil.defaults(areaStyleModel.getAreaStyle(), {
        fill: color,
        opacity: 0.7
      }));
      polygon.hoverStyle = hoverAreaStyleModel.getAreaStyle();
      var itemStyle = itemModel.getModel('itemStyle.normal').getItemStyle(['color']);
      var itemHoverStyle = itemModel.getModel('itemStyle.emphasis').getItemStyle();
      var labelModel = itemModel.getModel('label.normal');
      var labelHoverModel = itemModel.getModel('label.emphasis');
      symbolGroup.eachChild(function (symbolPath) {
        symbolPath.setStyle(itemStyle);
        symbolPath.hoverStyle = zrUtil.clone(itemHoverStyle);
        graphic.setLabelStyle(symbolPath.style, symbolPath.hoverStyle, labelModel, labelHoverModel, {
          labelFetcher: data.hostModel,
          labelDataIndex: idx,
          labelDimIndex: symbolPath.__dimIdx,
          defaultText: data.get(data.dimensions[symbolPath.__dimIdx], idx),
          autoColor: color,
          isRectText: true
        });
      });

      function onEmphasis() {
        polygon.attr('ignore', hoverPolygonIgnore);
      }

      function onNormal() {
        polygon.attr('ignore', polygonIgnore);
      }

      itemGroup.off('mouseover').off('mouseout').off('normal').off('emphasis');
      itemGroup.on('emphasis', onEmphasis).on('mouseover', onEmphasis).on('normal', onNormal).on('mouseout', onNormal);
      graphic.setHoverStyle(itemGroup);
    });
    this._data = data;
  },
  remove: function () {
    this.group.removeAll();
    this._data = null;
  },
  dispose: function () {}
});