325 lines
14 KiB
JavaScript
325 lines
14 KiB
JavaScript
define('echarts/chart/k', [
|
|
'require',
|
|
'./base',
|
|
'../util/shape/Candle',
|
|
'../component/axis',
|
|
'../component/grid',
|
|
'../component/dataZoom',
|
|
'../config',
|
|
'../util/ecData',
|
|
'zrender/tool/util',
|
|
'../chart'
|
|
], function (require) {
|
|
var ChartBase = require('./base');
|
|
var CandleShape = require('../util/shape/Candle');
|
|
require('../component/axis');
|
|
require('../component/grid');
|
|
require('../component/dataZoom');
|
|
var ecConfig = require('../config');
|
|
ecConfig.k = {
|
|
zlevel: 0,
|
|
z: 2,
|
|
clickable: true,
|
|
hoverable: true,
|
|
legendHoverLink: false,
|
|
xAxisIndex: 0,
|
|
yAxisIndex: 0,
|
|
itemStyle: {
|
|
normal: {
|
|
color: '#fff',
|
|
color0: '#00aa11',
|
|
lineStyle: {
|
|
width: 1,
|
|
color: '#ff3200',
|
|
color0: '#00aa11'
|
|
},
|
|
label: { show: false }
|
|
},
|
|
emphasis: { label: { show: false } }
|
|
}
|
|
};
|
|
var ecData = require('../util/ecData');
|
|
var zrUtil = require('zrender/tool/util');
|
|
function K(ecTheme, messageCenter, zr, option, myChart) {
|
|
ChartBase.call(this, ecTheme, messageCenter, zr, option, myChart);
|
|
this.refresh(option);
|
|
}
|
|
K.prototype = {
|
|
type: ecConfig.CHART_TYPE_K,
|
|
_buildShape: function () {
|
|
var series = this.series;
|
|
this.selectedMap = {};
|
|
var _position2sIndexMap = {
|
|
top: [],
|
|
bottom: []
|
|
};
|
|
var xAxis;
|
|
for (var i = 0, l = series.length; i < l; i++) {
|
|
if (series[i].type === ecConfig.CHART_TYPE_K) {
|
|
series[i] = this.reformOption(series[i]);
|
|
this.legendHoverLink = series[i].legendHoverLink || this.legendHoverLink;
|
|
xAxis = this.component.xAxis.getAxis(series[i].xAxisIndex);
|
|
if (xAxis.type === ecConfig.COMPONENT_TYPE_AXIS_CATEGORY) {
|
|
_position2sIndexMap[xAxis.getPosition()].push(i);
|
|
}
|
|
}
|
|
}
|
|
for (var position in _position2sIndexMap) {
|
|
if (_position2sIndexMap[position].length > 0) {
|
|
this._buildSinglePosition(position, _position2sIndexMap[position]);
|
|
}
|
|
}
|
|
this.addShapeList();
|
|
},
|
|
_buildSinglePosition: function (position, seriesArray) {
|
|
var mapData = this._mapData(seriesArray);
|
|
var locationMap = mapData.locationMap;
|
|
var maxDataLength = mapData.maxDataLength;
|
|
if (maxDataLength === 0 || locationMap.length === 0) {
|
|
return;
|
|
}
|
|
this._buildHorizontal(seriesArray, maxDataLength, locationMap);
|
|
for (var i = 0, l = seriesArray.length; i < l; i++) {
|
|
this.buildMark(seriesArray[i]);
|
|
}
|
|
},
|
|
_mapData: function (seriesArray) {
|
|
var series = this.series;
|
|
var serie;
|
|
var serieName;
|
|
var legend = this.component.legend;
|
|
var locationMap = [];
|
|
var maxDataLength = 0;
|
|
for (var i = 0, l = seriesArray.length; i < l; i++) {
|
|
serie = series[seriesArray[i]];
|
|
serieName = serie.name;
|
|
this.selectedMap[serieName] = legend ? legend.isSelected(serieName) : true;
|
|
if (this.selectedMap[serieName]) {
|
|
locationMap.push(seriesArray[i]);
|
|
}
|
|
maxDataLength = Math.max(maxDataLength, serie.data.length);
|
|
}
|
|
return {
|
|
locationMap: locationMap,
|
|
maxDataLength: maxDataLength
|
|
};
|
|
},
|
|
_buildHorizontal: function (seriesArray, maxDataLength, locationMap) {
|
|
var series = this.series;
|
|
var seriesIndex;
|
|
var serie;
|
|
var xAxisIndex;
|
|
var categoryAxis;
|
|
var yAxisIndex;
|
|
var valueAxis;
|
|
var pointList = {};
|
|
var candleWidth;
|
|
var data;
|
|
var value;
|
|
var barMaxWidth;
|
|
for (var j = 0, k = locationMap.length; j < k; j++) {
|
|
seriesIndex = locationMap[j];
|
|
serie = series[seriesIndex];
|
|
xAxisIndex = serie.xAxisIndex || 0;
|
|
categoryAxis = this.component.xAxis.getAxis(xAxisIndex);
|
|
candleWidth = serie.barWidth || Math.floor(categoryAxis.getGap() / 2);
|
|
barMaxWidth = serie.barMaxWidth;
|
|
if (barMaxWidth && barMaxWidth < candleWidth) {
|
|
candleWidth = barMaxWidth;
|
|
}
|
|
yAxisIndex = serie.yAxisIndex || 0;
|
|
valueAxis = this.component.yAxis.getAxis(yAxisIndex);
|
|
pointList[seriesIndex] = [];
|
|
for (var i = 0, l = maxDataLength; i < l; i++) {
|
|
if (categoryAxis.getNameByIndex(i) == null) {
|
|
break;
|
|
}
|
|
data = serie.data[i];
|
|
value = this.getDataFromOption(data, '-');
|
|
if (value === '-' || value.length != 4) {
|
|
continue;
|
|
}
|
|
pointList[seriesIndex].push([
|
|
categoryAxis.getCoordByIndex(i),
|
|
candleWidth,
|
|
valueAxis.getCoord(value[0]),
|
|
valueAxis.getCoord(value[1]),
|
|
valueAxis.getCoord(value[2]),
|
|
valueAxis.getCoord(value[3]),
|
|
i,
|
|
categoryAxis.getNameByIndex(i)
|
|
]);
|
|
}
|
|
}
|
|
this._buildKLine(seriesArray, pointList);
|
|
},
|
|
_buildKLine: function (seriesArray, pointList) {
|
|
var series = this.series;
|
|
var nLineWidth;
|
|
var nLineColor;
|
|
var nLineColor0;
|
|
var nColor;
|
|
var nColor0;
|
|
var eLineWidth;
|
|
var eLineColor;
|
|
var eLineColor0;
|
|
var eColor;
|
|
var eColor0;
|
|
var serie;
|
|
var queryTarget;
|
|
var data;
|
|
var seriesPL;
|
|
var singlePoint;
|
|
var candleType;
|
|
var seriesIndex;
|
|
for (var sIdx = 0, len = seriesArray.length; sIdx < len; sIdx++) {
|
|
seriesIndex = seriesArray[sIdx];
|
|
serie = series[seriesIndex];
|
|
seriesPL = pointList[seriesIndex];
|
|
if (this._isLarge(seriesPL)) {
|
|
seriesPL = this._getLargePointList(seriesPL);
|
|
}
|
|
if (serie.type === ecConfig.CHART_TYPE_K && seriesPL != null) {
|
|
queryTarget = serie;
|
|
nLineWidth = this.query(queryTarget, 'itemStyle.normal.lineStyle.width');
|
|
nLineColor = this.query(queryTarget, 'itemStyle.normal.lineStyle.color');
|
|
nLineColor0 = this.query(queryTarget, 'itemStyle.normal.lineStyle.color0');
|
|
nColor = this.query(queryTarget, 'itemStyle.normal.color');
|
|
nColor0 = this.query(queryTarget, 'itemStyle.normal.color0');
|
|
eLineWidth = this.query(queryTarget, 'itemStyle.emphasis.lineStyle.width');
|
|
eLineColor = this.query(queryTarget, 'itemStyle.emphasis.lineStyle.color');
|
|
eLineColor0 = this.query(queryTarget, 'itemStyle.emphasis.lineStyle.color0');
|
|
eColor = this.query(queryTarget, 'itemStyle.emphasis.color');
|
|
eColor0 = this.query(queryTarget, 'itemStyle.emphasis.color0');
|
|
for (var i = 0, l = seriesPL.length; i < l; i++) {
|
|
singlePoint = seriesPL[i];
|
|
data = serie.data[singlePoint[6]];
|
|
queryTarget = data;
|
|
candleType = singlePoint[3] < singlePoint[2];
|
|
this.shapeList.push(this._getCandle(seriesIndex, singlePoint[6], singlePoint[7], singlePoint[0], singlePoint[1], singlePoint[2], singlePoint[3], singlePoint[4], singlePoint[5], candleType ? this.query(queryTarget, 'itemStyle.normal.color') || nColor : this.query(queryTarget, 'itemStyle.normal.color0') || nColor0, this.query(queryTarget, 'itemStyle.normal.lineStyle.width') || nLineWidth, candleType ? this.query(queryTarget, 'itemStyle.normal.lineStyle.color') || nLineColor : this.query(queryTarget, 'itemStyle.normal.lineStyle.color0') || nLineColor0, candleType ? this.query(queryTarget, 'itemStyle.emphasis.color') || eColor || nColor : this.query(queryTarget, 'itemStyle.emphasis.color0') || eColor0 || nColor0, this.query(queryTarget, 'itemStyle.emphasis.lineStyle.width') || eLineWidth || nLineWidth, candleType ? this.query(queryTarget, 'itemStyle.emphasis.lineStyle.color') || eLineColor || nLineColor : this.query(queryTarget, 'itemStyle.emphasis.lineStyle.color0') || eLineColor0 || nLineColor0));
|
|
}
|
|
}
|
|
}
|
|
},
|
|
_isLarge: function (singlePL) {
|
|
return singlePL[0][1] < 0.5;
|
|
},
|
|
_getLargePointList: function (singlePL) {
|
|
var total = this.component.grid.getWidth();
|
|
var len = singlePL.length;
|
|
var newList = [];
|
|
for (var i = 0; i < total; i++) {
|
|
newList[i] = singlePL[Math.floor(len / total * i)];
|
|
}
|
|
return newList;
|
|
},
|
|
_getCandle: function (seriesIndex, dataIndex, name, x, width, y0, y1, y2, y3, nColor, nLinewidth, nLineColor, eColor, eLinewidth, eLineColor) {
|
|
var series = this.series;
|
|
var serie = series[seriesIndex];
|
|
var data = serie.data[dataIndex];
|
|
var queryTarget = [
|
|
data,
|
|
serie
|
|
];
|
|
var itemShape = {
|
|
zlevel: serie.zlevel,
|
|
z: serie.z,
|
|
clickable: this.deepQuery(queryTarget, 'clickable'),
|
|
hoverable: this.deepQuery(queryTarget, 'hoverable'),
|
|
style: {
|
|
x: x,
|
|
y: [
|
|
y0,
|
|
y1,
|
|
y2,
|
|
y3
|
|
],
|
|
width: width,
|
|
color: nColor,
|
|
strokeColor: nLineColor,
|
|
lineWidth: nLinewidth,
|
|
brushType: 'both'
|
|
},
|
|
highlightStyle: {
|
|
color: eColor,
|
|
strokeColor: eLineColor,
|
|
lineWidth: eLinewidth
|
|
},
|
|
_seriesIndex: seriesIndex
|
|
};
|
|
itemShape = this.addLabel(itemShape, serie, data, name);
|
|
ecData.pack(itemShape, serie, seriesIndex, data, dataIndex, name);
|
|
itemShape = new CandleShape(itemShape);
|
|
return itemShape;
|
|
},
|
|
getMarkCoord: function (seriesIndex, mpData) {
|
|
var serie = this.series[seriesIndex];
|
|
var xAxis = this.component.xAxis.getAxis(serie.xAxisIndex);
|
|
var yAxis = this.component.yAxis.getAxis(serie.yAxisIndex);
|
|
return [
|
|
typeof mpData.xAxis != 'string' && xAxis.getCoordByIndex ? xAxis.getCoordByIndex(mpData.xAxis || 0) : xAxis.getCoord(mpData.xAxis || 0),
|
|
typeof mpData.yAxis != 'string' && yAxis.getCoordByIndex ? yAxis.getCoordByIndex(mpData.yAxis || 0) : yAxis.getCoord(mpData.yAxis || 0)
|
|
];
|
|
},
|
|
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 x;
|
|
var dx;
|
|
var y;
|
|
var serie;
|
|
var seriesIndex;
|
|
var dataIndex;
|
|
var aniCount = 0;
|
|
function animationDone() {
|
|
aniCount--;
|
|
if (aniCount === 0) {
|
|
done && done();
|
|
}
|
|
}
|
|
for (var i = 0, l = this.shapeList.length; i < l; i++) {
|
|
seriesIndex = this.shapeList[i]._seriesIndex;
|
|
if (aniMap[seriesIndex] && !aniMap[seriesIndex][3]) {
|
|
if (this.shapeList[i].type === 'candle') {
|
|
dataIndex = ecData.get(this.shapeList[i], 'dataIndex');
|
|
serie = series[seriesIndex];
|
|
if (aniMap[seriesIndex][2] && dataIndex === serie.data.length - 1) {
|
|
this.zr.delShape(this.shapeList[i].id);
|
|
continue;
|
|
} else if (!aniMap[seriesIndex][2] && dataIndex === 0) {
|
|
this.zr.delShape(this.shapeList[i].id);
|
|
continue;
|
|
}
|
|
dx = this.component.xAxis.getAxis(serie.xAxisIndex || 0).getGap();
|
|
x = aniMap[seriesIndex][2] ? dx : -dx;
|
|
y = 0;
|
|
aniCount++;
|
|
this.zr.animate(this.shapeList[i].id, '').when(this.query(this.option, 'animationDurationUpdate'), {
|
|
position: [
|
|
x,
|
|
y
|
|
]
|
|
}).done(animationDone).start();
|
|
}
|
|
}
|
|
}
|
|
if (!aniCount) {
|
|
done && done();
|
|
}
|
|
}
|
|
};
|
|
zrUtil.inherits(K, ChartBase);
|
|
require('../chart').define('k', K);
|
|
return K;
|
|
}); |