/*
title: Combine-Separate Morphing
category: custom
titleCN: 聚合分割形变
difficulty: 11
*/

var PIE_COLORS = [
  '#e06343',
  '#37a354',
  '#b55dba',
  '#b5bd48',
  '#8378EA',
  '#96BFFF'
];
var CLUSTER_COLORS = [
  '#cc5664',
  '#9bd6ec',
  '#ea946e',
  '#8acaaa',
  '#f1ec64',
  '#ee8686',
  '#a48dc1',
  '#5da6bc',
  '#b9dcae'
];
var Z_TAG_COLORS = [
  '#5470c6',
  '#91cc75',
  '#fac858',
  '#ee6666',
  '#73c0de',
  '#3ba272',
  '#fc8452',
  '#9a60b4',
  '#ea7ccc'
];
var Z_TAG_COLORS_2 = [
  '#51689b',
  '#ce5c5c',
  '#fbc357',
  '#8fbf8f',
  '#659d84',
  '#fb8e6a',
  '#c77288',
  '#786090',
  '#91c4c5',
  '#6890ba'
];
var SYMBOL_PATHS = [
  'path://m67.25,28.9c27.42,-69.1 134.84,0 0,88.85c-134.84,-88.85 -27.42,-157.96 0,-88.85z',
  'path://M16 0c-8.837 0-16 7.163-16 16s7.163 16 16 16 16-7.163 16-16-7.163-16-16-16zM22 8c1.105 0 2 1.343 2 3s-0.895 3-2 3-2-1.343-2-3 0.895-3 2-3zM10 8c1.105 0 2 1.343 2 3s-0.895 3-2 3-2-1.343-2-3 0.895-3 2-3zM16 28c-5.215 0-9.544-4.371-10-9.947 2.93 1.691 6.377 2.658 10 2.658s7.070-0.963 10-2.654c-0.455 5.576-4.785 9.942-10 9.942z',
  'path://M16 0c-8.837 0-16 7.163-16 16s7.163 16 16 16c8.837 0 16-7.163 16-16s-7.163-16-16-16zM22 7.375c1.999 0 3.625 1.626 3.625 3.625 0 0.199-0.017 0.402-0.051 0.604-0.051 0.301-0.311 0.521-0.616 0.521s-0.566-0.22-0.616-0.522c-0.192-1.146-1.177-1.666-2.341-1.666s-2.149 0.52-2.341 1.666c-0.050 0.301-0.311 0.522-0.616 0.522-0 0 0 0-0 0-0.305 0-0.566-0.22-0.616-0.521-0.034-0.201-0.051-0.404-0.051-0.604 0-1.999 1.626-3.625 3.625-3.625zM10 7.375c1.999 0 3.625 1.626 3.625 3.625 0 0.199-0.017 0.402-0.051 0.604-0.051 0.301-0.311 0.521-0.616 0.521s-0.566-0.22-0.616-0.522c-0.193-1.146-1.177-1.666-2.341-1.666s-2.149 0.52-2.341 1.666c-0.051 0.301-0.311 0.522-0.616 0.522 0 0 0 0 0 0-0.305 0-0.566-0.22-0.616-0.521-0.034-0.201-0.051-0.404-0.051-0.604 0-1.999 1.626-3.625 3.625-3.625zM6 18h6v7.745c-3.44-0.894-6-4.035-6-7.745zM14 26v-8h4v8h-4zM20 25.745v-7.745h6c0 3.71-2.559 6.851-6 7.745z',
  'path://M23.6 2c4.637 0 8.4 3.764 8.4 8.401 0 9.132-9.87 11.964-15.999 21.232-6.485-9.326-16.001-11.799-16.001-21.232 0-4.637 3.763-8.401 8.4-8.401 1.886 0 3.625 0.86 5.025 2.12l-2.425 3.88 7 4-4 10 11-12-7-4 1.934-2.901c1.107-0.68 2.35-1.099 3.665-1.099z',
  'path://M237.062,81.761L237.062,81.761c-12.144-14.24-25.701-20.1-40.68-19.072 c-10.843,0.747-20.938,5.154-30.257,13.127c-9.51-5.843-19.8-9.227-30.859-10.366c0.521-3.197,1.46-6.306,2.85-9.363 c3.458-7.038,8.907-12.741,16.331-17.296c-5.609-3.384-11.227-6.799-16.854-10.279c-16.257,8.104-25.06,20.601-26.463,38.417 c-7.599,1.705-14.685,4.486-21.247,8.437c-9.164-7.677-18.996-11.917-29.496-12.632c-14.819-0.998-28.467,4.787-40.938,18.827 C6.445,96.182,0,114.867,0,136.242c-0.007,6.371,0.674,12.646,2.053,18.738c4.593,22.785,15.398,41.367,32.558,55.344 c15.43,12.773,29.901,18.023,43.362,16.981c7.074-0.561,13.624-3.977,19.685-10.192c10.534,5.49,20.391,8.217,29.561,8.203 c9.856-0.012,20.236-2.953,31.125-8.898c6.227,6.692,12.966,10.346,20.211,10.933c13.795,1.073,28.614-4.111,44.377-16.84 c17.49-14.104,28.043-32.79,31.796-55.485c0.836-5.624,1.272-11.292,1.272-16.966C255.998,115.814,249.707,96.601,237.062,81.761z  M54.795,97.7l40.661,14.496c-4.402,8.811-10.766,13.219-19.06,13.219c-2.542,0-4.917-0.419-7.122-1.274 C58.103,118.38,53.263,109.572,54.795,97.7z M150.613,185.396l-9.156-8.389l-7.619,12.951c-3.391,0.341-6.615,0.514-9.665,0.514 c-4.401,0-8.635-0.263-12.708-0.777l-8.634-14.973l-9.151,9.909c-4.91-2.717-9.15-5.856-12.708-9.413 c-8.81-8.295-13.384-17.959-13.727-28.97c2.877,1.692,7.427,3.461,13.675,5.308l10.636,13.629l9.44-9.852 c4.734,0.702,9.234,1.12,13.466,1.275l10.689,11.498l9.671-11.949c3.559-0.173,7.285-0.515,11.182-1.01l9.924,10.159l10.933-14.227 c5.931-1.351,11.196-2.798,15.771-4.323C179.747,163.538,169.068,176.414,150.613,185.396z M175.258,124.907 c-2.209,0.849-4.66,1.273-7.369,1.273c-8.134,0-14.489-4.415-19.052-13.224l40.905-14.477 C191.105,110.331,186.273,119.141,175.258,124.907z',
  'path://M237.062,81.761L237.062,81.761c-12.144-14.24-25.701-20.1-40.68-19.072 c-10.843,0.747-20.938,5.154-30.257,13.127c-9.51-5.843-19.8-9.227-30.859-10.366c0.521-3.197,1.46-6.306,2.85-9.363 c3.458-7.038,8.907-12.741,16.331-17.296c-5.609-3.384-11.227-6.799-16.854-10.279c-16.257,8.104-25.06,20.601-26.463,38.417 c-7.599,1.705-14.685,4.486-21.247,8.437c-9.164-7.677-18.996-11.917-29.496-12.632c-14.819-0.998-28.467,4.787-40.938,18.827 C6.445,96.182,0,114.867,0,136.242c-0.007,6.371,0.674,12.646,2.053,18.738c4.593,22.785,15.398,41.367,32.558,55.344 c15.43,12.773,29.901,18.023,43.362,16.981c7.074-0.561,13.624-3.977,19.685-10.192c10.534,5.49,20.391,8.217,29.561,8.203 c9.856-0.012,20.236-2.953,31.125-8.898c6.227,6.692,12.966,10.346,20.211,10.933c13.795,1.073,28.614-4.111,44.377-16.84 c17.49-14.104,28.043-32.79,31.796-55.485c0.836-5.624,1.272-11.292,1.272-16.966C255.998,115.814,249.707,96.601,237.062,81.761z  M54.795,97.7l40.661,14.496c-4.402,8.811-10.766,13.219-19.06,13.219c-2.542,0-4.917-0.419-7.122-1.274 C58.103,118.38,53.263,109.572,54.795,97.7z M150.613,185.396l-9.156-8.389l-7.619,12.951c-3.391,0.341-6.615,0.514-9.665,0.514 c-4.401,0-8.635-0.263-12.708-0.777l-8.634-14.973l-9.151,9.909c-4.91-2.717-9.15-5.856-12.708-9.413 c-8.81-8.295-13.384-17.959-13.727-28.97c2.877,1.692,7.427,3.461,13.675,5.308l10.636,13.629l9.44-9.852 c4.734,0.702,9.234,1.12,13.466,1.275l10.689,11.498l9.671-11.949c3.559-0.173,7.285-0.515,11.182-1.01l9.924,10.159l10.933-14.227 c5.931-1.351,11.196-2.798,15.771-4.323C179.747,163.538,169.068,176.414,150.613,185.396z M175.258,124.907 c-2.209,0.849-4.66,1.273-7.369,1.273c-8.134,0-14.489-4.415-19.052-13.224l40.905-14.477 C191.105,110.331,186.273,119.141,175.258,124.907z'
];
var CONTENT_COLOR = '#37A2DA';
var ANIMATION_DURATION_UPDATE = 1500;

var RAW_DATA = [
  [1425139200000, 34, 0.13, 2, 'MD', 'ZD', 'P0'],
  [1425225600000, 28, 0.71, 1.5, 'MB', 'ZD', 'P1'],
  [1425312000000, 23, 0.9, 2.8, 'MA', 'ZC', 'P2'],
  [1425398400000, 21, 0.58, 6, 'MB', 'ZC', 'P3'],
  [1425484800000, 14, 0.1, 1.6, 'MC', 'ZA', 'P4'],
  [1425571200000, 21, 0.6, 7.7, 'MC', 'ZA', 'P5'],
  [1425657600000, 23, 0.31, 2.6, 'MC', 'ZC', 'P6'],
  [1425744000000, 34, 0.74, 2.4, 'MD', 'ZE', 'P7'],
  [1425830400000, 14, 0.59, 2.3, 'MB', 'ZD', 'P8'],
  [1425916800000, 18, 0.85, 5.1, 'MB', 'ZB', 'P9'],
  [1426003200000, 36, 0.96, 1.2, 'MC', 'ZC', 'P10'],
  [1426089600000, 18, 0.28, 2.5, 'MA', 'ZC', 'P11'],
  [1426176000000, 20, 0.62, 6, 'MB', 'ZD', 'P12'],
  [1426262400000, 32, 0.79, 1.7, 'MB', 'ZA', 'P13'],
  [1426348800000, 17, 0.58, 4.4, 'MD', 'ZB', 'P14'],
  [1426435200000, 23, 0.77, 3, 'MB', 'ZA', 'P15'],
  [1426521600000, 39, 0.87, 4.6, 'MC', 'ZA', 'P16'],
  [1426608000000, 15, 0.7, 6, 'MB', 'ZC', 'P17'],
  [1426694400000, 21, 0.94, 2.7, 'MB', 'ZD', 'P18'],
  [1426780800000, 28, 0.48, 4.5, 'MC', 'ZC', 'P19'],
  [1426867200000, 31, 0.49, 9.8, 'MA', 'ZC', 'P20'],
  [1426953600000, 27, 0.87, 7.7, 'MB', 'ZB', 'P21'],
  [1427040000000, 27, 0.82, 5.5, 'MC', 'ZB', 'P22'],
  [1427126400000, 11, 0.53, 2.7, 'MD', 'ZC', 'P23'],
  [1427212800000, 13, 0.7, 7.6, 'MB', 'ZD', 'P24'],
  [1427299200000, 39, 0.99, 4.8, 'MB', 'ZD', 'P25'],
  [1427385600000, 32, 0.91, 2.1, 'MB', 'ZE', 'P26'],
  [1427472000000, 20, 0.97, 5, 'MB', 'ZA', 'P27'],
  [1427558400000, 36, 0.01, 8.9, 'MB', 'ZD', 'P28'],
  [1427644800000, 22, 0.08, 9.2, 'MB', 'ZE', 'P29'],
  [1427731200000, 21, 0.36, 3.1, 'MD', 'ZC', 'P30'],
  [1427817600000, 11, 0.15, 5.8, 'MD', 'ZB', 'P31'],
  [1427904000000, 39, 0.02, 1.4, 'MC', 'ZD', 'P32'],
  [1427990400000, 20, 0.86, 8.7, 'MB', 'ZD', 'P33'],
  [1428076800000, 23, 0.24, 7.2, 'MD', 'ZB', 'P34'],
  [1428163200000, 12, 0.06, 2, 'MD', 'ZB', 'P35'],
  [1428249600000, 36, 0.42, 8.2, 'MA', 'ZB', 'P36'],
  [1428336000000, 17, 0.48, 7.5, 'MB', 'ZC', 'P37'],
  [1428422400000, 19, 0.12, 6.6, 'MB', 'ZB', 'P38'],
  [1428508800000, 39, 0.58, 3.1, 'MC', 'ZE', 'P39'],
  [1428595200000, 10, 0.18, 6.6, 'MC', 'ZD', 'P40'],
  [1428681600000, 22, 0.28, 2.1, 'MB', 'ZE', 'P41'],
  [1428768000000, 27, 0.33, 1.9, 'MC', 'ZB', 'P42'],
  [1428854400000, 37, 0.46, 9.4, 'MD', 'ZE', 'P43'],
  [1428940800000, 18, 0.96, 5.5, 'MB', 'ZA', 'P44'],
  [1429027200000, 11, 0.61, 8.2, 'MD', 'ZC', 'P45'],
  [1429113600000, 15, 0.88, 4.6, 'MD', 'ZA', 'P46'],
  [1429200000000, 38, 0.89, 7.2, 'MD', 'ZC', 'P47'],
  [1429286400000, 20, 0.39, 5.4, 'MB', 'ZB', 'P48'],
  [1429372800000, 30, 0.71, 5.5, 'MA', 'ZA', 'P49']
];

var RAW_DATA_DIMENSIONS = ['DATE', 'ATA', 'STE', 'CTZ', 'M_TAG', 'Z_TAG', 'ID'];
var M_TAG_SUM_DIMENSIONS = ['ATA', 'STE', 'CTZ', 'M_TAG'];
var RAW_CLUSTER_DIMENSIONS = [
  'DATE',
  'ATA',
  'STE',
  'CTZ',
  'M_TAG',
  'Z_TAG',
  'ID',
  'CLUSTER_IDX',
  'CLUSTER_CENTER_ATA',
  'CLUSTER_CENTER_STE'
];
var RAW_CLUSTER_CENTERS_DIMENSIONS = [
  'COUNT',
  'CLUSTER_IDX',
  'CLUSTER_CENTER_ATA',
  'CLUSTER_CENTER_STE'
];

function getFromPalette(value, palette) {
  if (!palette.__colorMap) {
    palette.__colorMap = {};
  }
  if (palette.__colorIdx == null) {
    palette.__colorIdx = 0;
  }
  if (!palette.__colorMap[value]) {
    palette.__colorMap[value] = palette[palette.__colorIdx];
    palette.__colorIdx++;
    if (palette.__colorIdx >= palette.length) {
      palette.__colorIdx = 0;
    }
  }
  return palette.__colorMap[value];
}

var baseOption = {
  dataset: [
    {
      id: 'raw',
      dimensions: RAW_DATA_DIMENSIONS,
      source: RAW_DATA
    },
    {
      id: 'mTagSum',
      fromDatasetId: 'raw',
      transform: {
        type: 'ecSimpleTransform:aggregate',
        config: {
          resultDimensions: [
            { from: 'ATA', method: 'sum' },
            { from: 'STE', method: 'sum' },
            { from: 'CTZ', method: 'sum' },
            { from: 'M_TAG' }
          ],
          groupBy: 'M_TAG'
        }
      }
    },
    {
      id: 'rawClusters',
      fromDatasetId: 'raw',
      transform: {
        type: 'ecStat:clustering',
        // print: true,
        config: {
          clusterCount: 4,
          dimensions: ['ATA', 'STE'],
          outputClusterIndexDimension: {
            index: RAW_CLUSTER_DIMENSIONS.indexOf('CLUSTER_IDX'),
            name: 'CLUSTER_IDX'
          },
          outputCentroidDimensions: [
            {
              index: RAW_CLUSTER_DIMENSIONS.indexOf('CLUSTER_CENTER_ATA'),
              name: 'CLUSTER_CENTER_ATA'
            },
            {
              index: RAW_CLUSTER_DIMENSIONS.indexOf('CLUSTER_CENTER_STE'),
              name: 'CLUSTER_CENTER_STE'
            }
          ]
        }
      }
    },
    {
      id: 'rawClusterCenters',
      fromDatasetId: 'rawClusters',
      transform: {
        type: 'ecSimpleTransform:aggregate',
        // print: true,
        config: {
          resultDimensions: [
            { name: 'COUNT', from: 'ATA', method: 'count' },
            { from: 'CLUSTER_CENTER_ATA' },
            { from: 'CLUSTER_CENTER_STE' },
            { from: 'CLUSTER_IDX' }
          ],
          groupBy: 'CLUSTER_IDX'
        }
      }
    }
  ],
  tooltip: {}
};

function makeScatterOptionCreator(renderItem) {
  return function () {
    var datasetId = 'rawClusters';
    return {
      datasetId: datasetId,
      option: {
        grid: {
          containLabel: true
        },
        xAxis: {
          name: 'STE'
        },
        yAxis: {
          name: 'ATA'
        },
        series: {
          type: 'custom',
          coordinateSystem: 'cartesian2d',
          animationDurationUpdate: ANIMATION_DURATION_UPDATE,
          datasetId: datasetId,
          encode: {
            itemName: 'ID',
            x: 'STE',
            y: 'ATA',
            tooltip: ['STE', 'ATA']
          },
          renderItem: renderItem
        }
      }
    };
  };
}

var optionCreators = {
  Scatter: makeScatterOptionCreator(function (params, api) {
    var pos = api.coord([api.value('STE'), api.value('ATA')]);
    var zTagVal = api.value('Z_TAG');
    var color = getFromPalette(zTagVal, Z_TAG_COLORS);
    return {
      type: 'circle',
      morph: true,
      shape: {
        cx: pos[0],
        cy: pos[1],
        r: 10
      },
      style: {
        fill: color
      },
      transition: ['shape', 'style']
    };
  }),

  Glyph: makeScatterOptionCreator(function (params, api) {
    var pos = api.coord([api.value('STE'), api.value('ATA')]);
    var zTagVal = api.value('Z_TAG');
    var color = getFromPalette(zTagVal, Z_TAG_COLORS);
    var symbolPath = getFromPalette(zTagVal, SYMBOL_PATHS);
    return {
      type: 'path',
      morph: true,
      x: pos[0],
      y: pos[1],
      shape: {
        pathData: symbolPath,
        width: 40,
        height: 40
      },
      style: {
        fill: color
      },
      transition: ['style']
    };
  }),

  House: makeScatterOptionCreator(function (params, api) {
    var pos = api.coord([api.value('STE'), api.value('ATA')]);
    var zTagVal = api.value('Z_TAG');
    var color1 = getFromPalette(zTagVal, Z_TAG_COLORS);
    var color2 = '#aaa';
    return {
      type: 'group',
      x: pos[0],
      y: pos[1],
      children: [
        {
          type: 'polygon',
          morph: true,
          shape: {
            points: [
              [-25, -1],
              [25, -1],
              [0, -20]
            ]
          },
          style: {
            fill: color1
          },
          transition: ['shape', 'style']
        },
        {
          type: 'rect',
          morph: true,
          shape: {
            x: -15,
            y: 0,
            width: 30,
            height: 20
          },
          style: {
            fill: color2,
            stroke: '#fff',
            lineWidth: 1
          },
          transition: ['shape', 'style']
        }
      ]
    };
  }),

  Bar_Sum: function () {
    var datasetId = 'mTagSum';
    return {
      datasetId: datasetId,
      option: {
        grid: {
          containLabel: true
        },
        xAxis: {
          type: 'category'
        },
        yAxis: {},
        series: {
          type: 'custom',
          coordinateSystem: 'cartesian2d',
          animationDurationUpdate: ANIMATION_DURATION_UPDATE,
          datasetId: datasetId,
          encode: {
            x: 'M_TAG',
            y: 'ATA',
            tooltip: ['M_TAG', 'ATA']
          },
          renderItem: function (params, api) {
            var mTagVal = api.value('M_TAG');
            var ataVal = api.value('ATA');
            var tarPos = api.coord([mTagVal, ataVal]);
            var zeroPos = api.coord([mTagVal, 0]);
            var size = api.size([mTagVal, ataVal]);
            var width = size[0] * 0.4;
            return {
              type: 'rect',
              morph: true,
              shape: {
                x: tarPos[0] - width / 2,
                y: tarPos[1],
                height: zeroPos[1] - tarPos[1],
                width: width
              },
              style: {
                fill: CONTENT_COLOR
              },
              transition: ['shape', 'style']
            };
          }
        }
      }
    };
  },

  Pie_Sum: function () {
    var datasetId = 'mTagSum';
    return {
      datasetId: datasetId,
      option: {
        series: {
          type: 'custom',
          coordinateSystem: 'none',
          animationDurationUpdate: ANIMATION_DURATION_UPDATE,
          datasetId: datasetId,
          encode: {
            itemName: 'M_TAG',
            value: 'ATA',
            tooltip: 'ATA'
          },
          renderItem: function (params, api) {
            var context = params.context;
            if (!context.layout) {
              context.layout = true;
              var totalValue = 0;
              for (var i = 0; i < params.dataInsideLength; i++) {
                totalValue += api.value('ATA', i);
              }
              var angles = [];
              var colors = [];
              var currentAngle = -Math.PI / 2;
              for (var i = 0; i < params.dataInsideLength; i++) {
                colors.push(PIE_COLORS[i]);
                var angle = (api.value('ATA', i) / totalValue) * Math.PI * 2;
                angles.push([currentAngle, angle + currentAngle - 0.01]);
                currentAngle += angle;
              }
              context.angles = angles;
              context.colors = colors;
            }

            var width = myChart.getWidth();
            var height = myChart.getHeight();
            return {
              type: 'sector',
              morph: true,
              shape: {
                cx: width / 2,
                cy: height / 2,
                r: Math.min(width, height) / 3,
                r0: Math.min(width, height) / 5,
                startAngle: context.angles[params.dataIndex][0],
                endAngle: context.angles[params.dataIndex][1],
                clockwise: true
              },
              style: {
                // fill: CONTENT_COLOR,
                fill: context.colors[params.dataIndex]
              },
              transition: ['shape', 'style']
            };
          }
        }
      }
    };
  },

  Clustered: function () {
    var datasetId = 'rawClusterCenters';
    return {
      datasetId: datasetId,
      option: {
        grid: {
          containLabel: true
        },
        xAxis: {
          name: 'STE'
        },
        yAxis: {
          name: 'ATA'
        },
        series: {
          type: 'custom',
          coordinateSystem: 'cartesian2d',
          animationDurationUpdate: ANIMATION_DURATION_UPDATE,
          datasetId: datasetId,
          encode: {
            x: 'CLUSTER_CENTER_STE',
            y: 'CLUSTER_CENTER_ATA',
            tooltip: ['CLUSTER_CENTER_STE', 'CLUSTER_CENTER_ATA']
          },
          renderItem: function (params, api) {
            var context = params.context;
            if (!context.layout) {
              context.layout = true;
              context.totalCount = 0;
              for (var i = 0; i < params.dataInsideLength; i++) {
                context.totalCount += api.value('COUNT', i);
              }
            }

            var pos = api.coord([
              api.value('CLUSTER_CENTER_STE'),
              api.value('CLUSTER_CENTER_ATA')
            ]);
            var count = api.value('COUNT');
            var radius = (count / context.totalCount) * 100 + 10;
            return {
              type: 'circle',
              morph: true,
              shape: {
                cx: pos[0],
                cy: pos[1],
                r: radius
              },
              style: {
                // fill: CONTENT_COLOR,
                fill: CLUSTER_COLORS[params.dataIndex]
              },
              transition: ['shape', 'style']
            };
          }
        }
      }
    };
  }
};

var _player;
var _optionList = [];
app.config = {};
echarts.util.each(optionCreators, function (creator, key) {
  var optionWrap = creator();
  _optionList.push({
    key: key,
    dataMetaKey: optionWrap.datasetId,
    option: optionWrap.option
  });
  app.config[key] = function () {
    _player.go(key);
  };
});
console.log(app.config);

$.when(
  $.getScript(
    'https://fastly.jsdelivr.net/npm/echarts-simple-transform/dist/ecSimpleTransform.min.js'
  ),
  $.getScript(
    'https://fastly.jsdelivr.net/npm/echarts-simple-option-player/dist/ecSimpleOptionPlayer.min.js'
  )
).done(function () {
  run();
});

function run() {
  echarts.registerTransform(ecSimpleTransform.aggregate);
  echarts.registerTransform(ecStat.transform.clustering);

  _player = ecSimpleOptionPlayer.create({
    chart: function () {
      return myChart;
    },
    seriesIndex: 0,
    replaceMerge: ['xAxis', 'yAxis'],
    dataMeta: {
      raw: {
        dimensions: RAW_DATA_DIMENSIONS,
        uniqueDimension: 'ID'
      },
      mTagSum: {
        dimensions: M_TAG_SUM_DIMENSIONS,
        uniqueDimension: 'M_TAG'
      },
      rawClusters: {
        dimensions: RAW_CLUSTER_DIMENSIONS,
        uniqueDimension: 'ID',
        dividingMethod: 'duplicate'
      },
      rawClusterCenters: {
        dimensions: RAW_CLUSTER_CENTERS_DIMENSIONS,
        uniqueDimension: 'CLUSTER_IDX'
      }
    },
    optionList: _optionList
  });

  myChart.setOption(baseOption, { lazyUpdate: true });

  _player.go('Glyph');
}