运用nodejs的expres框架和vue+echarts实现股票价格数据可视化

优化之前需要操作服务器文件或者数据库的操作，这次直接用nodejs写get端口响应从聚宽平台获取到的实时交易数据。

 以下是服务器端完整代码，已经将数据处理成需要的json文件，通过get请求直接响应到前端。前端是利用vue来开发，实现数据的实时刷新。

const request = require('request');
const express = require('express')
const app=express()
app.use(express.static(__dirname+'/static-1'))
app.get('/test',(req,res)=>{
    res.json({name:'jack',age:18,sex:'男'});
})

app.listen(5000,(err)=>{
    if(!err) console.log('服务器启动成功')
})
/
var url1 = "https://dataapi.joinquant.com/apis";
var arrPrice = []//价格数据
var requestData = {
    "method": "get_token",
    "mob": "*****",
    "pwd": "******"  //密码和账号
};
function updata() {
    request({
        url: url1,
        method: "POST",
        body: JSON.stringify(requestData)
    }, function (error, response, token) {
        var requestData = {
            "method": "get_price_period",
            "token": token,
            "code": "IF9999.CCFX",
            "unit": "1m",
            "date": "2021-11-11 09:30:00",
            "end_date": "2021-11-11 15:30:00",
            "fq_ref_date": "2018-12-18"
        };
        request({
            url: url1,
            method: "POST",
            body: JSON.stringify(requestData)
        }, function (error, response, body) {
            var arr = body.split('\n')//把字符串转化成数组
            //先分离标题
            var arrNtitle = arr.splice(1)//只有时间和价格的数组
            var arrUsed = []
            for (let i = 0, length = arrNtitle.length; i < length; i++) {
                arrUsed.push(arrNtitle[i].split(','))
            }
            // 把时间提取出来变成一个单独数组 并和价格数据一一对应
            var arrData = [] //纯时间坐标
            arrUsed.forEach(function (el) {//截取时间
                arrData.push(el.shift())
            })
            arrUsed.forEach(function (el) {
                let a = []
                el.map(function (el) {
                    a.push(parseInt(el * 10) / 10)
                })
                let [op, cp, hp, lp] = a
                arrPrice.push([op, cp, hp, lp])
            })
            for (let i = 0; i < arrData.length; i++) {
                arrPrice[i].unshift(arrData[i])//把data加入元素
            }
            //发送get
            app.get('/list',(req,res)=>{
                res.json({list:arrPrice});
            })
        });
    });
}
updata()

接下来就是vue的部分，全部代码都在这里，当然main.js的入口文件设置这里就不多赘述了，要引入axios组件，并在全局挂载。同时安装echarts的组件库，如何使用echarts请参考官方文档。

    具体的请求和渲染方法可以看下面的代码，这里要提醒大家的一点是：即便是让获取数据的函数在更早一些的created钩子函数里，渲染函数在counted里，也不见得渲染函数能获取到数据。所以最保险的也是最简单的办法，就是像我那样，直接在获取数据后，确认data里有值了再调用echarts。

最后要提醒大家的是：这是部署到服务器上的，如果本地运行vue文件请求服务器是有跨域问题的。所以大家要把vue文件打包成静态资源部署到本地服务器再在浏览器打开就ok了。

如果有同学不熟悉怎样启动服务器和部署，请私信。

上边是启动服务器的命令 ，你要有node环境这个不必多说。

这是2021-11-11当天的真实交易数据，可以将日期设置成当天，这样就可以实时获取交易数据。搭配自己的交易算法和交易规则，实现简单的半自动化交易。

 后面有时间还要完善前后的交互，比如查询时间，增加算法比如波浪理论，背离理论算法，均线交叉等这些胜率很高的自我实现类指标。结合直观的图形化界面，辅助做出交易判断。

需要补充的一点是，这种交易辅助对于波动较大，有杠杆的多空都可以的期货，期权交易比较适合，毕竟我一直都是研究期权交易的。

  如果有其他前端的知识大家都可以交流，算法类最终还是需要强类型语言比如python来实现。如有需要后面会跟大家分享。