Skip to content

Commit

Permalink
修改K线内存问题
Browse files Browse the repository at this point in the history
  • Loading branch information
@zcZhang123
zcZhang123 committed Apr 10, 2019
1 parent 7ea126c commit 0ab4921
Show file tree
Hide file tree
Showing 13 changed files with 179 additions and 164 deletions.
1 change: 1 addition & 0 deletions .babelrc
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@
"test": {
"presets": [
"env",
"es2015",
"stage-2"
],
"plugins": [
Expand Down
215 changes: 115 additions & 100 deletions src/components/MACDChart.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,54 +9,59 @@
<font style="color: #fd1d57;">DIFF:{{toolTipData.diff}}&nbsp;</font>
<font style="color: #ffd801;">DEA:{{toolTipData.dea}}&nbsp;</font>
</div>
<i v-show = "isPC" @click = "closeMacd" style="position:absolute;right:70px;z-index:5;margin-top:3px" class="close-icon"></i>
<div ref="macd" :style="{height: `${macdSize.height}`, width: `${macdSize.width}`}"
@mousemove="getToolTipData()"
<i
v-show="isPC"
@click="closeMacd"
style="position:absolute;right:70px;z-index:5;margin-top:3px"
class="close-icon"
></i>
<div
ref="macd"
:style="{height: `${macdSize.height}`, width: `${macdSize.width}`}"
@mousemove="getToolTipData()"
></div>
</div>
</template>

<script>
import ChartController from '../js/Charts'
import { getLanguage } from '../js/utils'
import ChartController from "../js/Charts";
import { getLanguage } from "../js/utils";
export default {
name: "MACD",
data() {
return {
coinType: '',
chartType: 'MACD',
currentCycle: '',
coinType: "",
chartType: "MACD",
currentCycle: "",
refreshCycle: 0,
isRefresh: true,
macdData:"",
macdData: "",
toolTipData: null,
macd: '',
isPC:false,
macd: "",
isPC: false,
macdSize: {
height: '',
width: ''
height: "",
width: ""
}
};
},
props: {
chartDataObj: {
type: Object,
default: () => {
return {}
return {};
}
},
klineConfig: {
type: Object,
default: () => {
return {
}
return {};
}
},
resizeSize: {
type: Object,
default: () => {
return {
}
return {};
}
},
toolTipIndex: {
Expand All @@ -65,118 +70,125 @@ export default {
},
cycle: {
type: String,
default: 'hour'
default: "hour"
}
},
watch: {
cycle () {
cycle() {
if (this.cycle !== this.currentCycle) {
this.clearChart();
this.macd.showMacdLoading()
this.isRefresh = true
this.init(true);
this.isRefresh = true;
}
this.currentCycle = JSON.parse(JSON.stringify(this.cycle))
this.currentCycle = JSON.parse(JSON.stringify(this.cycle));
},
resizeSize() {
this.resize()
this.resize();
},
toolTipIndex() {
let index = this.toolTipIndex;
if (this.macdData) {
let length = this.macdData.times.length;
if (this.cycle==="week" && length-1<index){
index = length-1;
if (this.cycle === "week" && length - 1 < index) {
index = length - 1;
}
if (this.cycle==="month" && length-1<index){
index = length-1;
if (this.cycle === "month" && length - 1 < index) {
index = length - 1;
}
this.toolTipData = {
macd: this.macdData.macds[index],
diff: this.macdData.difs[index],
dea: this.macdData.deas[index]
}
};
}
},
chartDataObj() {
if (this.chartDataObj.candleData && this.chartDataObj.cycle !== 'everyhour') {
let data = this.chartDataObj.candleData
data.precision = this.chartDataObj.precision
if (
this.chartDataObj.candleData &&
this.chartDataObj.cycle !== "everyhour"
) {
let data = this.chartDataObj.candleData;
data.precision = this.chartDataObj.precision;
if (data.MACDData && data.categoryData) {
var macdData = this.splitData(data.MACDData);
this.macdData = macdData;
// if (this.macdData) {
// let index = this.toolTipIndex;
// this.$emit("listenToTipIndex", index);
// this.toolTipData = {
// macd: this.macdData.macds[index],
// diff: this.macdData.difs[index],
// dea: this.macdData.deas[index]
// }
// }
if(JSON.stringify(this.coinType) !== JSON.stringify(this.chartDataObj.coinType) || this.isRefresh) {
this.isRefresh = false
this.clearChart();
this.refreshCycle = 0
this.cycle = this.chartDataObj.cycle
if (
JSON.stringify(this.coinType) !==
JSON.stringify(this.chartDataObj.coinType) ||
this.isRefresh
) {
this.isRefresh = false;
this.init(true);
this.refreshCycle = 0;
this.cycle = this.chartDataObj.cycle;
this.macd.setMACDOption(macdData);
this.coinType = this.chartDataObj.coinType
this.coinType = this.chartDataObj.coinType;
} else {
this.macd.updateMACDOption(macdData);
}
}
}
if (this.chartDataObj.divisionData && this.chartDataObj.cycle === 'everyhour') {
}
if (
this.chartDataObj.divisionData &&
this.chartDataObj.cycle === "everyhour"
) {
let data = this.chartDataObj.divisionData;
if (data.MACDData) {
var macdData = this.splitData(data.MACDData);
this.macdData = macdData;
if (JSON.stringify(this.coinType) !== JSON.stringify(this.chartDataObj.coinType) || this.isRefresh) {
this.isRefresh = false
this.clearChart();
this.cycle = this.chartDataObj.cycle
if (
JSON.stringify(this.coinType) !==
JSON.stringify(this.chartDataObj.coinType) ||
this.isRefresh
) {
this.isRefresh = false;
this.init(true);
this.cycle = this.chartDataObj.cycle;
this.macd.setMACDOption(macdData);
this.coinType = this.chartDataObj.coinType
this.coinType = this.chartDataObj.coinType;
} else {
this.macd.updateMACDOption(macdData);
}
}
}
},
klineConfig() {
if (this.klineConfig.platform === 'pc') {
if (this.klineConfig.platform === "pc") {
let size = {
width: this.klineConfig.size.width + 'px',
height: this.klineConfig.size.height + 'px'
}
if (JSON.stringify(size) !== JSON.stringify(this.macdSize) && this.klineConfig.defaultSize === false) {
width: this.klineConfig.size.width + "px",
height: this.klineConfig.size.height + "px"
};
if (
JSON.stringify(size) !== JSON.stringify(this.macdSize) &&
this.klineConfig.defaultSize === false
) {
this.macdSize = {
width: this.klineConfig.size.width + 'px',
height: this.klineConfig.size.height * 0.25　+ 'px'
}
width: this.klineConfig.size.width + "px",
height: this.klineConfig.size.height * 0.25 + "px"
};
this.resize();
}
}
}
},
created() {
if (this.klineConfig.platform === 'pc') {
if (this.klineConfig.platform === "pc") {
this.isPC = true;
if (!this.klineConfig.defaultSize) {
this.macdSize.height = this.klineConfig.size.height * 0.25 + 'px'
this.macdSize.width = this.klineConfig.size.width + 'px'
this.macdSize.height = this.klineConfig.size.height * 0.25 + "px";
this.macdSize.width = this.klineConfig.size.width + "px";
} else {
this.macdSize = {
height: '527px',
width: '100%'
}
height: "527px",
width: "100%"
};
}
} else {
this.macdSize.height = this.klineConfig.size.height * 0.3 + 'px'
this.macdSize.width = this.klineConfig.size.width + 'px'
this.macdSize.height = this.klineConfig.size.height * 0.3 + "px";
this.macdSize.width = this.klineConfig.size.width + "px";
}
this.klineConfig.chartType = 'MACD';
this.klineConfig.chartType = "MACD";
this.macd = new ChartController(this.klineConfig);
},
mounted() {
Expand All @@ -189,51 +201,54 @@ export default {
if (this.klineConfig.defaultSize === true) {
window.removeEventListener("resize", this.resize);
}
this.dispose()
this.dispose();
},
methods: {
init() {
this.macd.initMACDECharts(this.$refs.macd);
init(clear) {
this.macd.initMACDECharts(this.$refs.macd, clear);
this.resize();
},
getToolTipData() {
let index = this.macd.getMacdTipData();
this.$emit("listenToTipIndex", index);
},
resize() {
if (this.klineConfig.platform === 'pc') {
let isFullScreen = this.$parent.getState()
this.macd.resizeMACDChart(this.$refs.macd, isFullScreen, this.klineConfig.size);
if (this.klineConfig.platform === "pc") {
let isFullScreen = this.$parent.getState();
this.macd.resizeMACDChart(
this.$refs.macd,
isFullScreen,
this.klineConfig.size
);
}
},
clearChart() {
this.macd.clearMACDEcharts();
},
dispose() {
this.macd.disposeMACDEChart()
this.macd.disposeMACDEChart();
},
splitData(rawData) {
var times = [];
var macds = []; var difs = []; var deas = [];
for (var i = 0; i < rawData.length; i++) {
times.push(rawData[i].splice(0, 1)[0]);
macds.push(rawData[i][2]);
difs.push(rawData[i][0]);
deas.push(rawData[i][1]);
}
return {
times: times,
macds: macds,
difs: difs,
deas: deas
};
var times = [];
var macds = [];
var difs = [];
var deas = [];
for (var i = 0; i < rawData.length; i++) {
times.push(rawData[i].splice(0, 1)[0]);
macds.push(rawData[i][2]);
difs.push(rawData[i][0]);
deas.push(rawData[i][1]);
}
return {
times: times,
macds: macds,
difs: difs,
deas: deas
};
},
closeMacd() {
this.$emit("listenMacdChartClose", true)
this.$emit("listenMacdChartClose", true);
},
changeDataZoom(type) {
this.macd.changeMacdDataZoom(type);
}
}
}
};
</script>

0 comments on commit 0ab4921

Please sign in to comment.