123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325 |
- 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: this.getZlevelBase(),
- z: this.getZBase(),
- 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) {
- animationDone();
- }
- }
- };
- zrUtil.inherits(K, ChartBase);
- require('../chart').define('k', K);
- return K;
- });
|