Vue中使用socket和echart画K线行情
2018-10-10 本文已影响237人
嘤夏影
<template>
<div>
<div id="container" style="height:600px;width:100%"></div>
</div>
</template>
<script>
import echarts from "echarts";
import Sockjs from "sockjs-client"
import Stomp from "stompjs";
export default {
data() {
return {
option: null,
uskline:[],
myChart:{},
rawData:[],
};
},
props:["id"],
methods: {
getsoket() {
let me = this;
var url2 = "xxxxxxxxxt";
var socketer2 = new Sockjs(url2);
me.sockClient2 = Stomp.over(socketer2);
// 订阅地址
var subscribe2 = "xxxxxxxxxx" + this.id;
me.sockClient2.debug = false;
// 连接
me.sockClient2.connect(
{},
function(res) {
// 订阅
me.sockClient2.subscribe(subscribe2, function(sdata) {
me.uskline = JSON.parse(sdata.body);
me.kline();
});
},
function() {
me.sockClient2.disconnect();
}
);
},
kline() {
let me = this;
me.rawData = me.uskline.one.lines;
me.updateOption();
},
updateOption() {
function calculateMA(dayCount, data) {
var result = [];
for (var i = 0, len = data.length; i < len; i++) {
if (i < dayCount) {
result.push("-");
continue;
}
var sum = 0;
for (var j = 0; j < dayCount; j++) {
sum += data[i - j][1];
}
result.push(sum / dayCount);
}
return result;
}
var dates = this.rawData.map(function(item) {
return item[0];
});
var ydates = this.rawData.map(function(item) {
return item[5];
});
var data = this.rawData.map(function(item) {
// 数据顺序开、关、小、大
return [+item[1], +item[4], +item[3], +item[2]];
});
var zhangdie = this.rawData.map(function(item) {
// 数据顺序开、关、小、大
return (item[4] - item[1]) / item[4];
});
var a = this.build_diff_data(12, 26, data);
var b = this.build_dea_data(9, a);
var macdData = this.build_macd_data(data, a, b);
this.option = {
backgroundColor: "#313131",
tooltip: {
trigger: "item",
axisPointer: {
//鼠标悬浮刻度标线
animation: false,
type: "cross",
lineStyle: {
color: "#8392A5",
width: 1,
opacity: 1
}
}
},
axisPointer: {
link: { xAxisIndex: "all" },
label: {
backgroundColor: "#777"
}
},
grid: [
//图表区域位置
{
x: "8%",
y: "5%",
height: "55%"
},
{
x: "8%",
y: "65%",
height: "10%"
},
{
x: "8%",
y: "80%",
height: "10%"
}
],
xAxis: [
{
gridIndex: 0,
type: "category",
data: dates,
axisLine: { lineStyle: { color: "#8392A5" } }
},
{
type: "category",
data: dates,
gridIndex: 1,
scale: true,
axisLine: { lineStyle: { color: "#8392A5" } },
position: "bottom"
},
{
type: "category",
data: dates,
gridIndex: 2,
scale: true,
axisLine: { lineStyle: { color: "#8392A5" } },
position: "bottom"
}
],
yAxis: [
{
gridIndex: 0,
type: "value",
scale: true, //y轴数据自适应
axisLine: { lineStyle: { color: "#8392A5" } },
splitLine: { show: false }
},
{
gridIndex: 1,
type: "value",
scale: true, //y轴数据自适应
axisLine: { lineStyle: { color: "#8392A5" } },
splitLine: { show: false },
position: "left"
},
{
gridIndex: 2,
type: "value",
scale: true, //y轴数据自适应
axisLine: { lineStyle: { color: "#8392A5" } },
splitLine: { show: false },
position: "left"
}
],
// 下面范围滚动条
dataZoom: [
{
type: "inside",
show: true,
realtime: true,
xAxisIndex: [0, 1, 2]
},
{
textStyle: {
color: "#8392A5"
},
handleIcon:
"M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z",
handleSize: "80%",
dataBackground: {
areaStyle: {
color: "#8392A5"
},
lineStyle: {
opacity: 0.8,
color: "#8392A5"
}
},
handleStyle: {
color: "#fff",
shadowBlur: 3,
shadowColor: "rgba(0, 0, 0, 0.6)",
shadowOffsetX: 2,
shadowOffsetY: 2
}
}
],
animation: false,
series: [
{
type: "candlestick",
name: "k线",
data: data,
itemStyle: {
normal: {
color0: "#FD1050",
color: "#0CF49B",
borderColor0: "#FD1050",
borderColor: "#0CF49B"
}
}
},
{
name: "小时k",
type: "line",
data: calculateMA(5, data),
smooth: true,
showSymbol: false,
lineStyle: {
normal: {
width: 1
}
}
},
{
name: "MA10",
type: "line",
data: calculateMA(10, data),
smooth: true,
showSymbol: false,
lineStyle: {
normal: {
width: 1
}
}
},
{
name: "MA20",
type: "line",
data: calculateMA(20, data),
smooth: true,
showSymbol: false,
lineStyle: {
normal: {
width: 1
}
}
},
{
name: "MA30",
type: "line",
data: calculateMA(30, data),
smooth: true,
showSymbol: false,
lineStyle: {
normal: {
width: 1
}
}
},
{
name: "Volumn",
type: "bar",
xAxisIndex: 1,
yAxisIndex: 1,
data: ydates
},
{
name: "MACD",
type: "bar",
xAxisIndex: 2,
yAxisIndex: 2,
data: macdData,
itemStyle: {
normal: {
color: function(params) {
var colorList;
if (params.data >= 0) {
colorList = "#14b143";
} else {
colorList = "#ef232a";
}
return colorList;
}
}
}
},
{
name: "diff",
type: "line",
xAxisIndex: 2,
yAxisIndex: 2,
data: a,
lineStyle: {
normal: {
width: 1
}
}
},
{
name: "dea",
type: "line",
xAxisIndex: 2,
yAxisIndex: 2,
data: b,
lineStyle: {
normal: {
width: 1
}
}
}
]
};
if (this.flag) {
this.myChart.setOption(this.option);
} else {
this.option.dataZoom[0].start = 90;
this.option.dataZoom[0].end = 100;
this.myChart.setOption(this.option);
this.flag = true;
}
// echarts自适应宽度
window.addEventListener("resize", () => {
this.myChart.resize();
});
},
// 创建k线图
getKcART() {
var dom = document.getElementById("container");
this.myChart = echarts.init(dom);
},
// 计算diff方法
build_diff_data(m_short, m_long, data) {
var result = [];
var pre_emashort = 0;
var pre_emalong = 0;
for (var i = 0, len = data.length; i < len; i++) {
var ema_short = data[i][1];
var ema_long = data[i][1];
if (i != 0) {
ema_short =
(1.0 / m_short) * data[i][1] + (1 - 1.0 / m_short) * pre_emashort;
ema_long =
(1.0 / m_long) * data[i][1] + (1 - 1.0 / m_long) * pre_emalong;
}
pre_emashort = ema_short;
pre_emalong = ema_long;
var diff = ema_short - ema_long;
result.push(diff);
}
return result;
},
// 计算dea方法：
build_dea_data(m, diff) {
var result = [];
var pre_ema_diff = 0;
for (var i = 0, len = diff.length; i < len; i++) {
var ema_diff = diff[i];
if (i != 0) {
ema_diff = (1.0 / m) * diff[i] + (1 - 1.0 / m) * pre_ema_diff;
}
pre_ema_diff = ema_diff;
result.push(ema_diff);
}
return result;
},
// 计算macd方法：
build_macd_data(data, diff, dea) {
var result = [];
for (var i = 0, len = data.length; i < len; i++) {
var macd = 2 * (diff[i] - dea[i]);
result.push(macd);
}
return result;
}
},
created(){
this.getsoket();
},
mounted(){
this.getKcART();
}
};
</script>
<style scoped>
</style>
效果图如下：
image.png
