项目实训第四周01

项目实训第四周01（7.21）

7.19-7.21工作概要：完成日线行情k线图功能实现。

页面内容如下：

主要功能：
（1）90天内用户所选股票的日线数据，包括开盘价、收盘价、最高价、最低价；
（2）用户可自由选定下方区间，查看该区间内日k图；
（3）用户选择区间内的最高价、最低价和平均收盘价用标记点标记。

代码实现：前端画图函数

      splitData(rawData) {
        let categoryData = [];
        let values = []
        let i=0;
        for (i; i < rawData.length; i++) {
          categoryData.push(rawData[i].splice(0, 1)[0]);
          values.push(rawData[i])
        }
        return {
          categoryData: categoryData,
          values: values
        };
      },
      draw_daily_k(){
        let myChart = this.$echarts.init(document.getElementById('myChart'));
        let data0=this.splitData(this.daily_data);

        let upColor = '#ec0000';
        let upBorderColor = '#8A0000';
        let downColor = '#00da3c';
        let downBorderColor = '#008F28';
        // 绘制图表
        myChart.setOption(
          {
            title: {
              text: '日线行情',
              left: 0
            },
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'cross'
              }
            },
            legend: {
              data: ['日K']
            },
            grid: {
              left: '10%',
              right: '10%',
              bottom: '15%'
            },
            xAxis: {
              type: 'category',
              data: data0.categoryData,
              scale: true,
              boundaryGap: false,
              axisLine: {onZero: false},
              splitLine: {show: false},
              splitNumber: 20,
              min: 'dataMin',
              max: 'dataMax'
            },
            yAxis: {
              scale: true,
              splitArea: {
                show: true
              }
            },
            dataZoom: [
              {
                type: 'inside',
                start: 50,
                end: 100
              },
              {
                show: true,
                type: 'slider',
                top: '90%',
                start: 50,
                end: 100
              }
            ],
            series: [
              {
                name: '日K',
                type: 'candlestick',
                data: data0.values,
                itemStyle: {
                  color: upColor,
                  color0: downColor,
                  borderColor: upBorderColor,
                  borderColor0: downBorderColor
                },
                markPoint: {
                  label: {
                    normal: {
                      formatter: function (param) {
                        return param != null ? param.value: '';
                      }
                    }
                  },
                  data: [
                    {
                      name: 'highest value',
                      type: 'max',
                      valueDim: 'highest'
                    },
                    {
                      name: 'lowest value',
                      type: 'min',
                      valueDim: 'lowest'
                    },
                    {
                      name: 'average value on close',
                      type: 'average',
                      valueDim: 'close'
                    }
                  ],
                  tooltip: {
                    formatter: function (param) {
                      return param.name + '<br>' + (param.data.coord || '');
                    }
                  }
                },
                markLine: {
                  symbol: ['none', 'none'],
                  data: [
                    [
                      {
                        name: 'from lowest to highest',
                        type: 'min',
                        valueDim: 'lowest',
                        symbol: 'circle',
                        symbolSize: 10,
                        label: {
                          show: false
                        },
                        emphasis: {
                          label: {
                            show: false
                          }
                        }
                      },
                      {
                        type: 'max',
                        valueDim: 'highest',
                        symbol: 'circle',
                        symbolSize: 10,
                        label: {
                          show: false
                        },
                        emphasis: {
                          label: {
                            show: false
                          }
                        }
                      }
                    ],
                    {
                      name: 'min line on close',
                      type: 'min',
                      valueDim: 'close'
                    },
                    {
                      name: 'max line on close',
                      type: 'max',
                      valueDim: 'close'
                    }
                  ]
                }
              },

            ]
          }
        );
      }