牛股项目流程（二）

在完成注册页面的设计后，下一步的负责部分是股票分时图的设计，采用echarts来实现分时图的设计。

echarts

ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖轻量级的矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。
ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、旭日图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。

分时图的设计

展示部分

首先在<template>部分创建一个<div>布局用来展示分时图：

//template部分
<template>
    <div id="mChart" class="charts-wrap" style="position: absolute;top: 80px;left: 50px;height:1000px;">

      <!--绑定分时图-->
        <div id="m-line" class="m-line" style="height: 500px;width: 1100px;"></div>
      <!--绑定k线图-->

    </div>
</template>
//style部分
<style scoped>
   .charts-wrap .m-line{
   height:500px;width: 80%;margin: 0 auto;}
</style>

获取数据

在vue项目中，通过axios向后端请求拿取股票数据，存放至store文件夹中。

export function getInfo(callback){
    //获取股票信息
  var hq_str_sz000001="平安银行,12.730,12.760,12.700,12.740,12.610,12.690,12.700,103952775,1315615300.580,97300,12.690,279400,12.680,217551,12.670,406166,12.660,615756,12.650,204328,12.700,264300,12.710,275464,12.720,426755,12.730,275700,12.740,2020-06-19,13:53:36,00";
  var info = hq_str_sz000001;
  var _info_arr = info.split(",")

  //_info_arr[2]=25.5
  for(let i=0;i<store.state.shifendata.length;i++){
   
    for(let j=1;j<3;j++){
   
      store.state.shifendata[i][j]=parseFloat(store.state.shifendata[i][j])
    }
  }
  //alert(store.state.close)
  _info_arr[2]=store.state.close

  callback(_info_arr)

}

这里在网络中选取一些股票数据作为测试数据：

var min_data = "\n\
      date:200619\n\
      0930 12.73 30643\n\
      0931 12.66 51661\n\
      0932 12.73 65052\n\
      0933 12.70 80374\n\
      0934 12.71 89883\n\
      0935 12.67 111609\n\
      0936 12.71 119093\n\
      0937 12.70 128693\n\
      0938 12.69 135035\n\
      0939 12.69 142913\n\
      0940 12.70 148136\n\
      0941 12.70 154692\n\
      0942 12.68 167921\n\
      0943 12.68 177837\n\
      0944 12.69 184558\n\
      0945 12.70 194926\n\
      0946 12.70 200928\n\
      0947 12.70 207731\n\
      0948 12.71 216328\n\
      0949 12.72 226061\n\
      0950 12.70 232162\n\
      0951 12.70 239883\n\
      0952 12.71 244233\n\
      0953 12.70 247610\n\
      0954 12.69 251334\n\
      0955 12.70 258026\n\
      0956 12.70 263442\n\
      0957 12.70 268208\n\
      0958 12.66 294609\n\
      0959 12.65 309697\n\
      1000 12.65 318995\n\
      1001 12.66 325424\n\
      1002 12.66 336588\n\
      1003 12.65 344669\n\
      1004 12.65 353509\n\
      1005 12.65 361929\n\
      1006 12.64 377242\n\
      1007 12.64 389093\n\
      1008 12.65 393963\n\
      1009 12.66 399779\n\
      1010 12.65 406035\n\
      1011 12.64 412369\n\
      1012 12.65 416642\n\
      1013 12.66 420133\n\
      1014 12.66 422924\n\
      1015 12.68 429090\n\
      1016 12.65 435771\n\
      1017 12.66 441933\n\
      1018 12.67 447585\n\
      1019 12.66 452294\n\
      1020 12.66 458414\n\
      1021 12.65 465679\n\
      1022 12.65 473066\n\
      1023 12.66 480504\n\
      1024 12.65 485963\n\
      1025 12.65 491591\n\
      1026 12.66 496866\n\
      1027 12.66 500522\n\
      1028 12.65 506695\n\
      1029 12.64 512608\n\
      1030 12.65 520456\n\
      1031 12.64 530752\n\
      1032 12.65 538411\n\
      1033 12.66 548145\n\
      1034 12.65 553142\n\
      1035 12.65 556774\n\
      1036 12.65 562760\n\
      1037 12.64 567457\n\
      1038 12.64 572754\n\
      1039 12.64 576260\n\
      1040 12.64 579240\n\
      1041 12.64 584754\n\
      1042 12.65 588076\n\
      1043 12.65 590947\n\
      1044 12.65 594842\n\
      1045 12.65 598054\n\
      1046 12.65 600209\n\
      1047 12.65 605405\n\
      1048 12.66 607631\n\
      1049 12.66 610073\n\
      1050 12.66 616313\n\
      1051 12.66 620950\n\
      1052 12.65 625340\n\
      1053 12.67 629366\n\
      1054 12.68 633969\n\
      1055 12.68 648089\n\
      1056 12.67 652652\n\
      1057 12.66 657798\n\
      1058 12.67 662985\n\
      1059 12.66 669498\n\
      1100 12.66 673401\n\
      1101 12.65 676911\n\
      1102 12.64 686123\n\
      1103 12.64 700465\n\
      1104 12.64 709414\n\
      1105 12.64 719329\n\
      1106 12.64 727959\n\
      1107 12.64 733868\n\
      1108 12.63 741445\n\
      1109 12.64 746865\n\
      1110 12.63 754085\n\
      1111 12.62 759318\n\
      1112 12.62 774667\n\
      1113 12.62 780281\n\
      1114 12.63 787664\n\
      1115 12.63 792881\n\
      1116 12.64 797383\n\
      1117 12.63 799478\n\
      1118 12.62 814796\n\
      1119 12.62 819693\n\
      1120 12.61 822864\n\
      1121 12.63 827052\n\
      1122 12.63 830295\n\
      1123 12.61 834480\n\
      1124 12.61 838721\n\
      1125 12.62 842529\n\
      1126 12.62 844670\n\
      1127 12.62 849262\n\
      1128 12.62 850534\n\
      1129 12.62 852377\n\
      1130 12.62 852421\n\
      1300 12.63 865071\n\
      1301 12.63 870430\n\
      1302 12.64 872930\n\
      1303 12.64 876950\n\
      1304 12.63 882519\n\
      1305 12.63 892780\n\
      1306 12.62 902565\n\
      1307 12.62 906701\n\
      1308 12.63 908910\n\
      1309 12.62 911734\n\
      1310 12.63 915705\n\
      1311 12.63 919915\n\
      1312 12.64 921597\n\
      1313 12.64 923630\n\
      1314 12.64 935976\n\
      1315 12.66 939238\n\
      1316 12.66 941860\n\
      1317 12.65 945518\n\
      1318 12.64 948661\n\
      1319 12.63 955909\n\
      1320 12.64 957181\n\
      1321 12.64 961509\n\
      1322 12.65 963222\n\
      1323 12.66 964944\n\
      1324 12.66 966822\n\
      1325 12.67 968595\n\
      1326 12.67 971457\n\
      1327 12.67 972908\n\
      1328 12.68 976196\n\
      1329 12.67 979035\n\
      1330 12.66 983594\n\
      1331 12.67 986185\n\
      1332 12.67 989650\n\
      1333 12.67 992423\n\
      1334 12.66 994713\n\
      1335 12.66 996782\n\
      1336 12.67 998861\n\
      1337 12.67 1000711\n\
      1338 12.68 1003539\n\
      1339 12.67 1007752\n\
      1340 12.68 1009528\n\
      1341 12.67 1011350\n\
      1342 12.66 1013572\n\
      1343 12.66 1018861\n\
      1344 12.67 1022429\n\
      1345 12.66 1024268\n\
      1346 12.67 1025598\n\
      1347 12.68 1028086\n\
      1348 12.68 1029026\n\
      1349 12.67 1031029\n\
      13:50 12.68 1033027\n\
      ";

数据处理

绘制分时图需要用到三个数据，分别是时间、对应时间的股票价格及对应时间时的销售量。所以要对以上的数据进行处理。上面的测试数据为字符串类型，要先对其进行分割存入数组中，再进一步通过' '来对数组里的数据再分割。

export function getmData(callback) {
   
	  var msg = min_data;
      var result = msg.replace(/\n/g,",").split(',')
      var arr = result.slice(2,result.length-1), //开头结尾各一个空数组要去掉

          _arr = [];
          for(var z=0;z<arr.length;z++){
   
            arr[z] = arr[z].slice(6,arr[z].length)
          }
      for(var i=0;i<arr.length;i++){
   
        var _a = arr[i].split(" ") , _b = arr[i].split(" "), _c =[];
        if(i>0){
   
          _c = arr[i-1].split(" ");
        }
        // 腾讯股票接口传的数值0930（日期） 5.55（成交价） 37673（累计成交量，初始成交量为9:30的）
        // 因此每分钟的 成交量 = 当前累计成交量 - 前一分钟的累计成交量
        _b[2] = _c.length>0 ? _a[2] - _c[2] : _a[2];
        _arr.push(_b)
      }<