123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746 |
- define('echarts/chart/pie', [
- 'require',
- './base',
- 'zrender/shape/Text',
- 'zrender/shape/Ring',
- 'zrender/shape/Circle',
- 'zrender/shape/Sector',
- 'zrender/shape/Polyline',
- '../config',
- '../util/ecData',
- 'zrender/tool/util',
- 'zrender/tool/math',
- 'zrender/tool/color',
- '../chart'
- ], function (require) {
- var ChartBase = require('./base');
- var TextShape = require('zrender/shape/Text');
- var RingShape = require('zrender/shape/Ring');
- var CircleShape = require('zrender/shape/Circle');
- var SectorShape = require('zrender/shape/Sector');
- var PolylineShape = require('zrender/shape/Polyline');
- var ecConfig = require('../config');
- ecConfig.pie = {
- zlevel: 0,
- z: 2,
- clickable: true,
- legendHoverLink: true,
- center: [
- '50%',
- '50%'
- ],
- radius: [
- 0,
- '75%'
- ],
- clockWise: true,
- startAngle: 90,
- minAngle: 0,
- selectedOffset: 10,
- itemStyle: {
- normal: {
- borderColor: 'rgba(0,0,0,0)',
- borderWidth: 1,
- label: {
- show: true,
- position: 'outer'
- },
- labelLine: {
- show: true,
- length: 20,
- lineStyle: {
- width: 1,
- type: 'solid'
- }
- }
- },
- emphasis: {
- borderColor: 'rgba(0,0,0,0)',
- borderWidth: 1,
- label: { show: false },
- labelLine: {
- show: false,
- length: 20,
- lineStyle: {
- width: 1,
- type: 'solid'
- }
- }
- }
- }
- };
- var ecData = require('../util/ecData');
- var zrUtil = require('zrender/tool/util');
- var zrMath = require('zrender/tool/math');
- var zrColor = require('zrender/tool/color');
- function Pie(ecTheme, messageCenter, zr, option, myChart) {
- ChartBase.call(this, ecTheme, messageCenter, zr, option, myChart);
- var self = this;
- self.shapeHandler.onmouseover = function (param) {
- var shape = param.target;
- var seriesIndex = ecData.get(shape, 'seriesIndex');
- var dataIndex = ecData.get(shape, 'dataIndex');
- var percent = ecData.get(shape, 'special');
- var center = [
- shape.style.x,
- shape.style.y
- ];
- var startAngle = shape.style.startAngle;
- var endAngle = shape.style.endAngle;
- var midAngle = ((endAngle + startAngle) / 2 + 360) % 360;
- var defaultColor = shape.highlightStyle.color;
- var label = self.getLabel(seriesIndex, dataIndex, percent, center, midAngle, defaultColor, true);
- if (label) {
- self.zr.addHoverShape(label);
- }
- var labelLine = self.getLabelLine(seriesIndex, dataIndex, center, shape.style.r0, shape.style.r, midAngle, defaultColor, true);
- if (labelLine) {
- self.zr.addHoverShape(labelLine);
- }
- };
- this.refresh(option);
- }
- Pie.prototype = {
- type: ecConfig.CHART_TYPE_PIE,
- _buildShape: function () {
- var series = this.series;
- var legend = this.component.legend;
- this.selectedMap = {};
- this._selected = {};
- var center;
- var radius;
- var pieCase;
- this._selectedMode = false;
- var serieName;
- for (var i = 0, l = series.length; i < l; i++) {
- if (series[i].type === ecConfig.CHART_TYPE_PIE) {
- series[i] = this.reformOption(series[i]);
- this.legendHoverLink = series[i].legendHoverLink || this.legendHoverLink;
- serieName = series[i].name || '';
- this.selectedMap[serieName] = legend ? legend.isSelected(serieName) : true;
- if (!this.selectedMap[serieName]) {
- continue;
- }
- center = this.parseCenter(this.zr, series[i].center);
- radius = this.parseRadius(this.zr, series[i].radius);
- this._selectedMode = this._selectedMode || series[i].selectedMode;
- this._selected[i] = [];
- if (this.deepQuery([
- series[i],
- this.option
- ], 'calculable')) {
- pieCase = {
- zlevel: this.getZlevelBase(),
- z: this.getZBase(),
- hoverable: false,
- style: {
- x: center[0],
- y: center[1],
- r0: radius[0] <= 10 ? 0 : radius[0] - 10,
- r: radius[1] + 10,
- brushType: 'stroke',
- lineWidth: 1,
- strokeColor: series[i].calculableHolderColor || this.ecTheme.calculableHolderColor || ecConfig.calculableHolderColor
- }
- };
- ecData.pack(pieCase, series[i], i, undefined, -1);
- this.setCalculable(pieCase);
- pieCase = radius[0] <= 10 ? new CircleShape(pieCase) : new RingShape(pieCase);
- this.shapeList.push(pieCase);
- }
- this._buildSinglePie(i);
- this.buildMark(i);
- }
- }
- this.addShapeList();
- },
- _buildSinglePie: function (seriesIndex) {
- var series = this.series;
- var serie = series[seriesIndex];
- var data = serie.data;
- var legend = this.component.legend;
- var itemName;
- var totalSelected = 0;
- var totalSelectedValue0 = 0;
- var totalValue = 0;
- var maxValue = Number.NEGATIVE_INFINITY;
- var singleShapeList = [];
- for (var i = 0, l = data.length; i < l; i++) {
- itemName = data[i].name;
- this.selectedMap[itemName] = legend ? legend.isSelected(itemName) : true;
- if (this.selectedMap[itemName] && !isNaN(data[i].value)) {
- if (+data[i].value !== 0) {
- totalSelected++;
- } else {
- totalSelectedValue0++;
- }
- totalValue += +data[i].value;
- maxValue = Math.max(maxValue, +data[i].value);
- }
- }
- if (totalValue === 0) {
- return;
- }
- var percent = 100;
- var clockWise = serie.clockWise;
- var startAngle = (serie.startAngle.toFixed(2) - 0 + 360) % 360;
- var endAngle;
- var minAngle = serie.minAngle || 0.01;
- var totalAngle = 360 - minAngle * totalSelected - 0.01 * totalSelectedValue0;
- var defaultColor;
- var roseType = serie.roseType;
- var center;
- var radius;
- var r0;
- var r1;
- for (var i = 0, l = data.length; i < l; i++) {
- itemName = data[i].name;
- if (!this.selectedMap[itemName] || isNaN(data[i].value)) {
- continue;
- }
- defaultColor = legend ? legend.getColor(itemName) : this.zr.getColor(i);
- percent = data[i].value / totalValue;
- if (roseType != 'area') {
- endAngle = clockWise ? startAngle - percent * totalAngle - (percent !== 0 ? minAngle : 0.01) : percent * totalAngle + startAngle + (percent !== 0 ? minAngle : 0.01);
- } else {
- endAngle = clockWise ? startAngle - 360 / l : 360 / l + startAngle;
- }
- endAngle = endAngle.toFixed(2) - 0;
- percent = (percent * 100).toFixed(2);
- center = this.parseCenter(this.zr, serie.center);
- radius = this.parseRadius(this.zr, serie.radius);
- r0 = +radius[0];
- r1 = +radius[1];
- if (roseType === 'radius') {
- r1 = data[i].value / maxValue * (r1 - r0) * 0.8 + (r1 - r0) * 0.2 + r0;
- } else if (roseType === 'area') {
- r1 = Math.sqrt(data[i].value / maxValue) * (r1 - r0) + r0;
- }
- if (clockWise) {
- var temp;
- temp = startAngle;
- startAngle = endAngle;
- endAngle = temp;
- }
- this._buildItem(singleShapeList, seriesIndex, i, percent, data[i].selected, center, r0, r1, startAngle, endAngle, defaultColor);
- if (!clockWise) {
- startAngle = endAngle;
- }
- }
- this._autoLabelLayout(singleShapeList, center, r1);
- for (var i = 0, l = singleShapeList.length; i < l; i++) {
- this.shapeList.push(singleShapeList[i]);
- }
- singleShapeList = null;
- },
- _buildItem: function (singleShapeList, seriesIndex, dataIndex, percent, isSelected, center, r0, r1, startAngle, endAngle, defaultColor) {
- var series = this.series;
- var midAngle = ((endAngle + startAngle) / 2 + 360) % 360;
- var sector = this.getSector(seriesIndex, dataIndex, percent, isSelected, center, r0, r1, startAngle, endAngle, defaultColor);
- ecData.pack(sector, series[seriesIndex], seriesIndex, series[seriesIndex].data[dataIndex], dataIndex, series[seriesIndex].data[dataIndex].name, percent);
- singleShapeList.push(sector);
- var label = this.getLabel(seriesIndex, dataIndex, percent, center, midAngle, defaultColor, false);
- var labelLine = this.getLabelLine(seriesIndex, dataIndex, center, r0, r1, midAngle, defaultColor, false);
- if (labelLine) {
- ecData.pack(labelLine, series[seriesIndex], seriesIndex, series[seriesIndex].data[dataIndex], dataIndex, series[seriesIndex].data[dataIndex].name, percent);
- singleShapeList.push(labelLine);
- }
- if (label) {
- ecData.pack(label, series[seriesIndex], seriesIndex, series[seriesIndex].data[dataIndex], dataIndex, series[seriesIndex].data[dataIndex].name, percent);
- label._labelLine = labelLine;
- singleShapeList.push(label);
- }
- },
- getSector: function (seriesIndex, dataIndex, percent, isSelected, center, r0, r1, startAngle, endAngle, defaultColor) {
- var series = this.series;
- var serie = series[seriesIndex];
- var data = serie.data[dataIndex];
- var queryTarget = [
- data,
- serie
- ];
- var normal = this.deepMerge(queryTarget, 'itemStyle.normal') || {};
- var emphasis = this.deepMerge(queryTarget, 'itemStyle.emphasis') || {};
- var normalColor = this.getItemStyleColor(normal.color, seriesIndex, dataIndex, data) || defaultColor;
- var emphasisColor = this.getItemStyleColor(emphasis.color, seriesIndex, dataIndex, data) || (typeof normalColor === 'string' ? zrColor.lift(normalColor, -0.2) : normalColor);
- var sector = {
- zlevel: this.getZlevelBase(),
- z: this.getZBase(),
- clickable: this.deepQuery(queryTarget, 'clickable'),
- style: {
- x: center[0],
- y: center[1],
- r0: r0,
- r: r1,
- startAngle: startAngle,
- endAngle: endAngle,
- brushType: 'both',
- color: normalColor,
- lineWidth: normal.borderWidth,
- strokeColor: normal.borderColor,
- lineJoin: 'round'
- },
- highlightStyle: {
- color: emphasisColor,
- lineWidth: emphasis.borderWidth,
- strokeColor: emphasis.borderColor,
- lineJoin: 'round'
- },
- _seriesIndex: seriesIndex,
- _dataIndex: dataIndex
- };
- if (isSelected) {
- var midAngle = ((sector.style.startAngle + sector.style.endAngle) / 2).toFixed(2) - 0;
- sector.style._hasSelected = true;
- sector.style._x = sector.style.x;
- sector.style._y = sector.style.y;
- var offset = this.query(serie, 'selectedOffset');
- sector.style.x += zrMath.cos(midAngle, true) * offset;
- sector.style.y -= zrMath.sin(midAngle, true) * offset;
- this._selected[seriesIndex][dataIndex] = true;
- } else {
- this._selected[seriesIndex][dataIndex] = false;
- }
- if (this._selectedMode) {
- sector.onclick = this.shapeHandler.onclick;
- }
- if (this.deepQuery([
- data,
- serie,
- this.option
- ], 'calculable')) {
- this.setCalculable(sector);
- sector.draggable = true;
- }
- if (this._needLabel(serie, data, true) || this._needLabelLine(serie, data, true)) {
- sector.onmouseover = this.shapeHandler.onmouseover;
- }
- sector = new SectorShape(sector);
- return sector;
- },
- getLabel: function (seriesIndex, dataIndex, percent, center, midAngle, defaultColor, isEmphasis) {
- var series = this.series;
- var serie = series[seriesIndex];
- var data = serie.data[dataIndex];
- if (!this._needLabel(serie, data, isEmphasis)) {
- return;
- }
- var status = isEmphasis ? 'emphasis' : 'normal';
- var itemStyle = zrUtil.merge(zrUtil.clone(data.itemStyle) || {}, serie.itemStyle);
- var labelControl = itemStyle[status].label;
- var textStyle = labelControl.textStyle || {};
- var centerX = center[0];
- var centerY = center[1];
- var x;
- var y;
- var radius = this.parseRadius(this.zr, serie.radius);
- var textAlign;
- var textBaseline = 'middle';
- labelControl.position = labelControl.position || itemStyle.normal.label.position;
- if (labelControl.position === 'center') {
- x = centerX;
- y = centerY;
- textAlign = 'center';
- } else if (labelControl.position === 'inner' || labelControl.position === 'inside') {
- radius = (radius[0] + radius[1]) * (labelControl.distance || 0.5);
- x = Math.round(centerX + radius * zrMath.cos(midAngle, true));
- y = Math.round(centerY - radius * zrMath.sin(midAngle, true));
- defaultColor = '#fff';
- textAlign = 'center';
- } else {
- radius = radius[1] - -itemStyle[status].labelLine.length;
- x = Math.round(centerX + radius * zrMath.cos(midAngle, true));
- y = Math.round(centerY - radius * zrMath.sin(midAngle, true));
- textAlign = midAngle >= 90 && midAngle <= 270 ? 'right' : 'left';
- }
- if (labelControl.position != 'center' && labelControl.position != 'inner' && labelControl.position != 'inside') {
- x += textAlign === 'left' ? 20 : -20;
- }
- data.__labelX = x - (textAlign === 'left' ? 5 : -5);
- data.__labelY = y;
- var ts = new TextShape({
- zlevel: this.getZlevelBase(),
- z: this.getZBase() + 1,
- hoverable: false,
- style: {
- x: x,
- y: y,
- color: textStyle.color || defaultColor,
- text: this.getLabelText(seriesIndex, dataIndex, percent, status),
- textAlign: textStyle.align || textAlign,
- textBaseline: textStyle.baseline || textBaseline,
- textFont: this.getFont(textStyle)
- },
- highlightStyle: { brushType: 'fill' }
- });
- ts._radius = radius;
- ts._labelPosition = labelControl.position || 'outer';
- ts._rect = ts.getRect(ts.style);
- ts._seriesIndex = seriesIndex;
- ts._dataIndex = dataIndex;
- return ts;
- },
- getLabelText: function (seriesIndex, dataIndex, percent, status) {
- var series = this.series;
- var serie = series[seriesIndex];
- var data = serie.data[dataIndex];
- var formatter = this.deepQuery([
- data,
- serie
- ], 'itemStyle.' + status + '.label.formatter');
- if (formatter) {
- if (typeof formatter === 'function') {
- return formatter.call(this.myChart, {
- seriesIndex: seriesIndex,
- seriesName: serie.name || '',
- series: serie,
- dataIndex: dataIndex,
- data: data,
- name: data.name,
- value: data.value,
- percent: percent
- });
- } else if (typeof formatter === 'string') {
- formatter = formatter.replace('{a}', '{a0}').replace('{b}', '{b0}').replace('{c}', '{c0}').replace('{d}', '{d0}');
- formatter = formatter.replace('{a0}', serie.name).replace('{b0}', data.name).replace('{c0}', data.value).replace('{d0}', percent);
- return formatter;
- }
- } else {
- return data.name;
- }
- },
- getLabelLine: function (seriesIndex, dataIndex, center, r0, r1, midAngle, defaultColor, isEmphasis) {
- var series = this.series;
- var serie = series[seriesIndex];
- var data = serie.data[dataIndex];
- if (this._needLabelLine(serie, data, isEmphasis)) {
- var status = isEmphasis ? 'emphasis' : 'normal';
- var itemStyle = zrUtil.merge(zrUtil.clone(data.itemStyle) || {}, serie.itemStyle);
- var labelLineControl = itemStyle[status].labelLine;
- var lineStyle = labelLineControl.lineStyle || {};
- var centerX = center[0];
- var centerY = center[1];
- var minRadius = r1;
- var maxRadius = this.parseRadius(this.zr, serie.radius)[1] - -labelLineControl.length;
- var cosValue = zrMath.cos(midAngle, true);
- var sinValue = zrMath.sin(midAngle, true);
- return new PolylineShape({
- zlevel: this.getZlevelBase(),
- z: this.getZBase() + 1,
- hoverable: false,
- style: {
- pointList: [
- [
- centerX + minRadius * cosValue,
- centerY - minRadius * sinValue
- ],
- [
- centerX + maxRadius * cosValue,
- centerY - maxRadius * sinValue
- ],
- [
- data.__labelX,
- data.__labelY
- ]
- ],
- strokeColor: lineStyle.color || defaultColor,
- lineType: lineStyle.type,
- lineWidth: lineStyle.width
- },
- _seriesIndex: seriesIndex,
- _dataIndex: dataIndex
- });
- } else {
- return;
- }
- },
- _needLabel: function (serie, data, isEmphasis) {
- return this.deepQuery([
- data,
- serie
- ], 'itemStyle.' + (isEmphasis ? 'emphasis' : 'normal') + '.label.show');
- },
- _needLabelLine: function (serie, data, isEmphasis) {
- return this.deepQuery([
- data,
- serie
- ], 'itemStyle.' + (isEmphasis ? 'emphasis' : 'normal') + '.labelLine.show');
- },
- _autoLabelLayout: function (sList, center, r) {
- var leftList = [];
- var rightList = [];
- for (var i = 0, l = sList.length; i < l; i++) {
- if (sList[i]._labelPosition === 'outer' || sList[i]._labelPosition === 'outside') {
- sList[i]._rect._y = sList[i]._rect.y;
- if (sList[i]._rect.x < center[0]) {
- leftList.push(sList[i]);
- } else {
- rightList.push(sList[i]);
- }
- }
- }
- this._layoutCalculate(leftList, center, r, -1);
- this._layoutCalculate(rightList, center, r, 1);
- },
- _layoutCalculate: function (tList, center, r, direction) {
- tList.sort(function (a, b) {
- return a._rect.y - b._rect.y;
- });
- function _changeDown(start, end, delta, direction) {
- for (var j = start; j < end; j++) {
- tList[j]._rect.y += delta;
- tList[j].style.y += delta;
- if (tList[j]._labelLine) {
- tList[j]._labelLine.style.pointList[1][1] += delta;
- tList[j]._labelLine.style.pointList[2][1] += delta;
- }
- if (j > start && j + 1 < end && tList[j + 1]._rect.y > tList[j]._rect.y + tList[j]._rect.height) {
- _changeUp(j, delta / 2);
- return;
- }
- }
- _changeUp(end - 1, delta / 2);
- }
- function _changeUp(end, delta) {
- for (var j = end; j >= 0; j--) {
- tList[j]._rect.y -= delta;
- tList[j].style.y -= delta;
- if (tList[j]._labelLine) {
- tList[j]._labelLine.style.pointList[1][1] -= delta;
- tList[j]._labelLine.style.pointList[2][1] -= delta;
- }
- if (j > 0 && tList[j]._rect.y > tList[j - 1]._rect.y + tList[j - 1]._rect.height) {
- break;
- }
- }
- }
- function _changeX(sList, isDownList, center, r, direction) {
- var x = center[0];
- var y = center[1];
- var deltaX;
- var deltaY;
- var length;
- var lastDeltaX = direction > 0 ? isDownList ? Number.MAX_VALUE : 0 : isDownList ? Number.MAX_VALUE : 0;
- for (var i = 0, l = sList.length; i < l; i++) {
- deltaY = Math.abs(sList[i]._rect.y - y);
- length = sList[i]._radius - r;
- deltaX = deltaY < r + length ? Math.sqrt((r + length + 20) * (r + length + 20) - Math.pow(sList[i]._rect.y - y, 2)) : Math.abs(sList[i]._rect.x + (direction > 0 ? 0 : sList[i]._rect.width) - x);
- if (isDownList && deltaX >= lastDeltaX) {
- deltaX = lastDeltaX - 10;
- }
- if (!isDownList && deltaX <= lastDeltaX) {
- deltaX = lastDeltaX + 10;
- }
- sList[i]._rect.x = sList[i].style.x = x + deltaX * direction;
- if (sList[i]._labelLine) {
- sList[i]._labelLine.style.pointList[2][0] = x + (deltaX - 5) * direction;
- sList[i]._labelLine.style.pointList[1][0] = x + (deltaX - 20) * direction;
- }
- lastDeltaX = deltaX;
- }
- }
- var lastY = 0;
- var delta;
- var len = tList.length;
- var upList = [];
- var downList = [];
- for (var i = 0; i < len; i++) {
- delta = tList[i]._rect.y - lastY;
- if (delta < 0) {
- _changeDown(i, len, -delta, direction);
- }
- lastY = tList[i]._rect.y + tList[i]._rect.height;
- }
- if (this.zr.getHeight() - lastY < 0) {
- _changeUp(len - 1, lastY - this.zr.getHeight());
- }
- for (var i = 0; i < len; i++) {
- if (tList[i]._rect.y >= center[1]) {
- downList.push(tList[i]);
- } else {
- upList.push(tList[i]);
- }
- }
- _changeX(downList, true, center, r, direction);
- _changeX(upList, false, center, r, direction);
- },
- reformOption: function (opt) {
- var _merge = zrUtil.merge;
- opt = _merge(_merge(opt || {}, zrUtil.clone(this.ecTheme.pie || {})), zrUtil.clone(ecConfig.pie));
- opt.itemStyle.normal.label.textStyle = this.getTextStyle(opt.itemStyle.normal.label.textStyle);
- opt.itemStyle.emphasis.label.textStyle = this.getTextStyle(opt.itemStyle.emphasis.label.textStyle);
- this.z = opt.z;
- this.zlevel = opt.zlevel;
- return opt;
- },
- refresh: function (newOption) {
- if (newOption) {
- this.option = newOption;
- this.series = newOption.series;
- }
- this.backupShapeList();
- this._buildShape();
- },
- addDataAnimation: function (params, done) {
- var series = this.series;
- var aniMap = {};
- for (var i = 0, l = params.length; i < l; i++) {
- aniMap[params[i][0]] = params[i];
- }
- var aniCount = 0;
- function animationDone() {
- aniCount--;
- if (aniCount === 0) {
- done && done();
- }
- }
- var sectorMap = {};
- var textMap = {};
- var lineMap = {};
- var backupShapeList = this.shapeList;
- this.shapeList = [];
- var seriesIndex;
- var isHead;
- var dataGrow;
- var deltaIdxMap = {};
- for (var i = 0, l = params.length; i < l; i++) {
- seriesIndex = params[i][0];
- isHead = params[i][2];
- dataGrow = params[i][3];
- if (series[seriesIndex] && series[seriesIndex].type === ecConfig.CHART_TYPE_PIE) {
- if (isHead) {
- if (!dataGrow) {
- sectorMap[seriesIndex + '_' + series[seriesIndex].data.length] = 'delete';
- }
- deltaIdxMap[seriesIndex] = 1;
- } else {
- if (!dataGrow) {
- sectorMap[seriesIndex + '_-1'] = 'delete';
- deltaIdxMap[seriesIndex] = -1;
- } else {
- deltaIdxMap[seriesIndex] = 0;
- }
- }
- this._buildSinglePie(seriesIndex);
- }
- }
- var dataIndex;
- var key;
- for (var i = 0, l = this.shapeList.length; i < l; i++) {
- seriesIndex = this.shapeList[i]._seriesIndex;
- dataIndex = this.shapeList[i]._dataIndex;
- key = seriesIndex + '_' + dataIndex;
- switch (this.shapeList[i].type) {
- case 'sector':
- sectorMap[key] = this.shapeList[i];
- break;
- case 'text':
- textMap[key] = this.shapeList[i];
- break;
- case 'polyline':
- lineMap[key] = this.shapeList[i];
- break;
- }
- }
- this.shapeList = [];
- var targeSector;
- for (var i = 0, l = backupShapeList.length; i < l; i++) {
- seriesIndex = backupShapeList[i]._seriesIndex;
- if (aniMap[seriesIndex]) {
- dataIndex = backupShapeList[i]._dataIndex + deltaIdxMap[seriesIndex];
- key = seriesIndex + '_' + dataIndex;
- targeSector = sectorMap[key];
- if (!targeSector) {
- continue;
- }
- if (backupShapeList[i].type === 'sector') {
- if (targeSector != 'delete') {
- aniCount++;
- this.zr.animate(backupShapeList[i].id, 'style').when(400, {
- startAngle: targeSector.style.startAngle,
- endAngle: targeSector.style.endAngle
- }).done(animationDone).start();
- } else {
- aniCount++;
- this.zr.animate(backupShapeList[i].id, 'style').when(400, deltaIdxMap[seriesIndex] < 0 ? { startAngle: backupShapeList[i].style.startAngle } : { endAngle: backupShapeList[i].style.endAngle }).done(animationDone).start();
- }
- } else if (backupShapeList[i].type === 'text' || backupShapeList[i].type === 'polyline') {
- if (targeSector === 'delete') {
- this.zr.delShape(backupShapeList[i].id);
- } else {
- switch (backupShapeList[i].type) {
- case 'text':
- aniCount++;
- targeSector = textMap[key];
- this.zr.animate(backupShapeList[i].id, 'style').when(400, {
- x: targeSector.style.x,
- y: targeSector.style.y
- }).done(animationDone).start();
- break;
- case 'polyline':
- aniCount++;
- targeSector = lineMap[key];
- this.zr.animate(backupShapeList[i].id, 'style').when(400, { pointList: targeSector.style.pointList }).done(animationDone).start();
- break;
- }
- }
- }
- }
- }
- this.shapeList = backupShapeList;
- if (!aniCount) {
- animationDone();
- }
- },
- onclick: function (param) {
- var series = this.series;
- if (!this.isClick || !param.target) {
- return;
- }
- this.isClick = false;
- var offset;
- var target = param.target;
- var style = target.style;
- var seriesIndex = ecData.get(target, 'seriesIndex');
- var dataIndex = ecData.get(target, 'dataIndex');
- for (var i = 0, len = this.shapeList.length; i < len; i++) {
- if (this.shapeList[i].id === target.id) {
- seriesIndex = ecData.get(target, 'seriesIndex');
- dataIndex = ecData.get(target, 'dataIndex');
- if (!style._hasSelected) {
- var midAngle = ((style.startAngle + style.endAngle) / 2).toFixed(2) - 0;
- target.style._hasSelected = true;
- this._selected[seriesIndex][dataIndex] = true;
- target.style._x = target.style.x;
- target.style._y = target.style.y;
- offset = this.query(series[seriesIndex], 'selectedOffset');
- target.style.x += zrMath.cos(midAngle, true) * offset;
- target.style.y -= zrMath.sin(midAngle, true) * offset;
- } else {
- target.style.x = target.style._x;
- target.style.y = target.style._y;
- target.style._hasSelected = false;
- this._selected[seriesIndex][dataIndex] = false;
- }
- this.zr.modShape(target.id, target);
- } else if (this.shapeList[i].style._hasSelected && this._selectedMode === 'single') {
- seriesIndex = ecData.get(this.shapeList[i], 'seriesIndex');
- dataIndex = ecData.get(this.shapeList[i], 'dataIndex');
- this.shapeList[i].style.x = this.shapeList[i].style._x;
- this.shapeList[i].style.y = this.shapeList[i].style._y;
- this.shapeList[i].style._hasSelected = false;
- this._selected[seriesIndex][dataIndex] = false;
- this.zr.modShape(this.shapeList[i].id, this.shapeList[i]);
- }
- }
- this.messageCenter.dispatch(ecConfig.EVENT.PIE_SELECTED, param.event, {
- selected: this._selected,
- target: ecData.get(target, 'name')
- }, this.myChart);
- this.zr.refreshNextFrame();
- }
- };
- zrUtil.inherits(Pie, ChartBase);
- require('../chart').define('pie', Pie);
- return Pie;
- });
|