天津投入产出系统后端
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 
 

1142 lines
44 KiB

/**
* echarts图表类:饼图
*
* @desc echarts基于Canvas,纯Javascript图表库,提供直观,生动,可交互,可个性化定制的数据统计图表。
* @author Kener (@Kener-林峰, kener.linfeng@gmail.com)
*
*/
define(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, // 最小角度改为0
selectedOffset: 10, // 选中是扇区偏移量
// selectedMode: false, // 选择模式,默认关闭,可选single,multiple
// roseType: null, // 南丁格尔玫瑰图模式,'radius'(半径) | 'area'(面积)
itemStyle: {
normal: {
// color: 各异,
borderColor: 'rgba(0,0,0,0)',
borderWidth: 1,
label: {
show: true,
position: 'outer'
// formatter: 标签文本格式器,同Tooltip.formatter,不支持异步回调
// textStyle: null // 默认使用全局文本样式,详见TEXTSTYLE
// distance: 当position为inner时有效,为label位置到圆心的距离与圆半径(环状图为内外半径和)的比例系数
},
labelLine: {
show: true,
length: 20,
lineStyle: {
// color: 各异,
width: 1,
type: 'solid'
}
}
},
emphasis: {
// color: 各异,
borderColor: 'rgba(0,0,0,0)',
borderWidth: 1,
label: {
show: false
// position: 'outer'
// formatter: 标签文本格式器,同Tooltip.formatter,不支持异步回调
// textStyle: null // 默认使用全局文本样式,详见TEXTSTYLE
// distance: 当position为inner时有效,为label位置到圆心的距离与圆半径(环状图为内外半径和)的比例系数
},
labelLine: {
show: false,
length: 20,
lineStyle: {
// color: 各异,
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');
/**
* 构造函数
* @param {Object} messageCenter echart消息中心
* @param {ZRender} zr zrender实例
* @param {Object} series 数据
* @param {Object} component 组件
*/
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();
},
/**
* 构建单个饼图
*
* @param {number} seriesIndex 系列索引
*/
_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; // 迭代累计选中且非0个数
var totalSelectedValue0 = 0; // 迭代累计选中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; // #bugfixed
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;
}
// “emphasis显示”添加事件响应
if (this._needLabel(serie, data, true) // emphasis下显示文本
|| this._needLabelLine(serie, data, true) // emphasis下显示引导线
) {
sector.onmouseover = this.shapeHandler.onmouseover;
}
sector = new SectorShape(sector);
return sector;
},
/**
* 需要显示则会有返回构建好的shape,否则返回undefined
*/
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';
// serie里有默认配置,放心大胆的用!
var itemStyle = zrUtil.merge(
zrUtil.clone(data.itemStyle) || {},
serie.itemStyle
);
// label配置
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') {
// 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 {
// 外部显示,默认 labelControl.position === 'outer')
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;
},
/**
* 根据lable.format计算label text
*/
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;
}
},
/**
* 需要显示则会有返回构建好的shape,否则返回undefined
*/
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';
// serie里有默认配置,放心大胆的用!
var itemStyle = zrUtil.merge(
zrUtil.clone(data.itemStyle) || {},
serie.itemStyle
);
// labelLine配置
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
]
],
//xStart: centerX + minRadius * cosValue,
//yStart: centerY - minRadius * sinValue,
//xEnd: centerX + maxRadius * cosValue,
//yEnd: centerY - maxRadius * sinValue,
strokeColor: lineStyle.color || defaultColor,
lineType: lineStyle.type,
lineWidth: lineStyle.width
},
_seriesIndex: seriesIndex,
_dataIndex: dataIndex
});
}
else {
return;
}
},
/**
* 返回特定状态(normal or emphasis)下是否需要显示label标签文本
* @param {Object} serie
* @param {Object} data
* @param {boolean} isEmphasis true is 'emphasis' and false is 'normal'
*/
_needLabel: function (serie, data, isEmphasis) {
return this.deepQuery(
[data, serie],
'itemStyle.'
+ (isEmphasis ? 'emphasis' : 'normal')
+ '.label.show'
);
},
/**
* 返回特定状态(normal or emphasis)下是否需要显示labelLine标签视觉引导线
* @param {Object} serie
* @param {Object} data
* @param {boolean} isEmphasis true is 'emphasis' and false is 'normal'
*/
_needLabelLine: function (serie, data, isEmphasis) {
return this.deepQuery(
[data, serie],
'itemStyle.'
+ (isEmphasis ? 'emphasis' : 'normal')
+'.labelLine.show'
);
},
/**
* @param {Array.<Object>} sList 单系列图形集合
*/
_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);
},
/**
* @param {Array.<Object>} tList 单系列文本图形集合
* @param {number} direction 水平方向参数,left为-1,right为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);
},
/**
* 参数修正&默认值赋值,重载基类方法
* @param {Object} opt 参数
*/
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 = {}; // seriesIndex索引参数
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 = {}; // 修正新增数据后会对dataIndex产生错位匹配
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;
// map映射让n*n变n
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);
}
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.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;
});