股票走势图-源码

<template>
  <div class='kbox'>
    <div class="top" v-show="seen">
      <div class="top-left"><span>{{topdata.time}}</span></div>
      <div class="top-right">
        <p>
          <span class="jf">高 <i>{{topdata.high}}</i> </span>
          <span class="jf">开 <i>{{topdata.open}}</i> </span>
          <span class="wi">低 <i>{{topdata.low}}</i> </span>
        </p>
        <p>
          <span class="jf">收 <i>{{topdata.close}}</i> </span>
          <span class="jf">幅 <i :style="{'color':topdata.color}" >{{topdata.fu}}</i> </span>
          <span class="wi">成交 {{topdata.volume}}万手</span>
        </p>
      </div>
    </div>
    <div class="ma">
      <span><i style="background-color: #F04097"></i> MA5:{{ma.ma5}}</span>
      <span><i style="background-color: #F8992D"></i>MA10:{{ma.ma7}}</span>
      <span><i style="background-color: #43ABFF"></i>MA20:{{ma.ma30}}</span>
    </div>
    <div id='Dayk' style='width:100%;height:7.5rem;'></div>
  </div>
</template>
<script>
import echarts from 'echarts'
export default {
  name: 'Dayk',
  data () {
    return {
      seen: false,
      topdata: {time: '2018-12-20', height: '0.305', open: '+50', lower: '310', close: '310', volum: '310', color: 'red'},
      ma: {ma5: '6.72', ma7: '7.62', ma30: '6.72'},
      datas: [['2016-12-30', 17.53, 17.6, 17.47, 17.61, 22.00, 8]]
    }
  },
  mounted: function () {
    var myChart = echarts.init(document.getElementById('Dayk'))
    this.get_time(myChart)
  },
  methods: {
    get_time (myChart) {
      this.axios.get(this.linkPrefix + '/stocks_api/stock_daykline', {
        params: {
          stockcode: this.$route.query.num,
          ktype: 2
        }
      }
      ).then(response => {
        this.datas = response.data.data
        var colorList = ['#F04097', '#F8992D', '#43ABFF', '#d48265', '#91c7ae', '#749f83', '#ca8622', '#bda29a', '#6e7074', '#546570', '#c4ccd3']
        var labelFont = 'bold 12px Sans-serif'
        // 指定图表的配置项和数据
        var data = splitData(this.datas)
        function splitData (rawData) {
          var datas = []
          var times = []
          var vols = []
          var zdie = []
          for (var i = 0; i < rawData.length; i++) {
            datas.push(rawData[i])
            times.push(rawData[i].splice(0, 1)[0])
            vols.push(rawData[i][4])
            zdie.push(rawData[i][5])
          }
          return {
            datas: datas,
            times: times,
            vols: vols,
            zdie: zdie
          }
        }
        function calculateMA (dayCount) {
          var result = []
          for (var i = 0, len = data.times.length; i < len; i++) {
            if (i < dayCount) {
              result.push('-')
              continue
            }
            var sum = 0
            for (var j = 0; j < dayCount; j++) {
              sum += data.datas[i - j][1]
            }
            result.push((sum / dayCount).toFixed(2))
          }
          return result
        }
        var dataMA5 = calculateMA(5, this.data)
        var dataMA10 = calculateMA(10, this.data)
        var dataMA20 = calculateMA(30, this.data)
        let that = this
        var fname = setTimeout(() => {
          that.seen = false
        }, 1000)
        var option = {
          animation: false,
          color: colorList,
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross'
            },
            formatter: function (params) {
              // console.log(params)
              clearTimeout(fname)
              that.seen = true
              that.topdata.time = params[0].name
              that.topdata.high = params[0].value[4]
              that.topdata.low = params[0].value[3]
              that.topdata.open = params[0].value[1]
              that.topdata.close = params[0].value[2]
              that.topdata.volume = params[0].value[5]
              that.topdata.fu = params[0].value[6]
              var fu = parseFloat(that.topdata.fu.replace('%', '').replace('+', ''))
              if (fu > 0) {
                that.topdata.color = 'red'
              } else if (fu === 0) {
                that.topdata.color = 'grey'
              } else {
                that.topdata.color = 'green'
              }
              that.ma.ma5 = params[1].value
              that.ma.ma7 = params[2].value
              that.ma.ma30 = params[3].value
              fname = setTimeout(() => {
                that.seen = false
              }, 2000)
              return ''
            },
            backgroundColor: 'rgba(245, 245, 245, 0.8)',
            borderWidth: 1,
            borderColor: '#ccc',
            padding: 10,
            textStyle: {
              color: '#000'
            },
            position: function (pos, params, el, elRect, size) {
              var obj = {top: 10}
              obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 50
              return obj
            },
            extraCssText: 'width: 5rem'
          },
          axisPointer: {
            link: {xAxisIndex: 'all'},
            label: {
              backgroundColor: '#777'
            }
          },
          dataZoom: [
            // {
            //   type: 'slider',
            //   show: 'false',
            //   xAxisIndex: [0, 1],
            //   realtime: false,
            //   start: 60,
            //   end: 100,
            //   top: 65,
            //   height: 20,
            //   handleIcon: 'M10.7,11.9H9.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4h1.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: '120%'
            // },
            {
              type: 'inside',
              xAxisIndex: [0, 1],
              start: 60,
              end: 100,
              top: 20,
              height: 20
            }
          ],
          xAxis: [
            {
              type: 'category',
              data: data.times,
              boundaryGap: false,
              axisTick: {
                length: 0
              },
              axisLine: {
                lineStyle: {
                  color: 'rgba(0,0,0,.1)'
                }
              },
              axisLabel: {
                formatter: function (value) {
                  return echarts.format.formatTime('MM-dd', value)
                },
                textStyle: {
                  height: '50',
                  align: 'left',
                  color: 'rgba(0,0,0,.1)',
                  fontSize: '11px'
                }
              },
              min: 'dataMin',
              max: 'dataMax',
              axisPointer: {
                show: true
              }
            },
            {
              type: 'category',
              gridIndex: 1,
              data: data.times,
              scale: true,
              boundaryGap: false,
              splitLine: {show: false},
              axisLabel: {show: false},
              axisTick: {show: false},
              axisLine: {lineStyle: {color: 'rgba(0,0,0,.1)'}},
              splitNumber: 10,
              min: 'dataMin',
              max: 'dataMax'
            }
          ],
          yAxis: [
            {
              scale: true,
              splitNumber: 2,
              position: 'left',
              axisLine: {lineStyle: {color: 'rgba(0,0,0,.1)'}},
              splitLine: {
                show: true,
                lineStyle: {
                  type: 'dotted',
                  color: '#f2f2f2'
                }
              },
              axisTick: {show: false},
              axisLabel: {
                inside: true,
                // formatter: '{value}\n',
                margin: 8,
                textStyle: {
                  color: 'rgba(0,0,0,.2)',
                  fontSize: '11px'
                }
              }
            },
            {
              scale: true,
              gridIndex: 1,
              splitNumber: 2,
              axisLabel: {show: false},
              axisLine: {show: false},
              axisTick: {show: false},
              splitLine: {show: false}
            }
          ],
          grid: [{
            left: 15,
            right: 20,
            top: 30,
            height: 150
          }, {
            left: 15,
            right: 20,
            height: 40,
            top: 220
          }],
          graphic: [{
            type: 'group',
            left: 'center',
            top: 70,
            width: 300,
            bounding: 'raw',
            children: [{
              id: 'MA5',
              type: 'text',
              style: {fill: colorList[1], font: labelFont},
              left: 0
            }, {
              id: 'MA10',
              type: 'text',
              style: {fill: colorList[2], font: labelFont},
              left: 'center'
            }, {
              id: 'MA20',
              type: 'text',
              style: {fill: colorList[3], font: labelFont},
              right: 0
            }
            ]
          }],
          series: [
            {
              type: 'candlestick',
              name: '上证日期',
              data: data.datas,
              xAxisIndex: 0,
              yAxisIndex: 0,
              itemStyle: {
                normal: {
                  color: '#ef3341',
                  color0: '#53b642',
                  borderColor: '#ef3341',
                  borderColor0: '#53b642'
                },
                emphasis: {
                  color: 'black',
                  color0: '#444',
                  borderColor: 'black',
                  borderColor0: '#444'
                }
              }
            },
            {
              name: '成交量',
              type: 'bar',
              xAxisIndex: 1,
              yAxisIndex: 1,
              formatter: '',
              itemStyle: {
                normal: {
                  color: function (params) {
                    var colorList
                    if (data.datas[params.dataIndex][1] > data.datas[params.dataIndex][0]) {
                      colorList = '#ef232a'
                    } else {
                      colorList = '#14b143'
                    }
                    return colorList
                  }
                }
              },
              data: data.vols
            },
            {
              name: 'MA5',
              type: 'line',
              data: dataMA5,
              smooth: true,
              showSymbol: false,
              lineStyle: {
                normal: {
                  width: 1
                }
              }
            },
            {
              name: 'MA10',
              type: 'line',
              data: dataMA10,
              smooth: true,
              showSymbol: false,
              lineStyle: {
                normal: {
                  width: 1
                }
              }
            },
            {
              name: 'MA20',
              type: 'line',
              data: dataMA20,
              smooth: true,
              showSymbol: false,
              lineStyle: {
                normal: {
                  width: 1
                }
              }
            }
          ]
        }
        myChart.setOption(option)
      })
    }
  }
}
</script>

<style lang="stylus" scoped>
  .kbox
    position relative
  .top
    position absolute
    top -1rem
    z-index 999
    height 1rem
    width 100%
    color #000
    background-color #fff
    padding-bottom .1rem
    border-bottom 1px solid #f2f2f2
  .top-left
    float left
    margin 0 .4rem
    line-height 1rem
  .top-right
    float left
  .top-right .jf
    display inline-block
    width 1.9rem
    line-height .6rem
  .top-right .wi
    display inline-block
    line-height .6rem
  .top i
    color red
  .ma
    padding-top .5rem
    color #ccc
    line-height .1rem
    margin-left .5rem
  .ma span
    margin-right .5rem
  .ma span i
    display inline-block
    width .2rem
    height .2rem
    border-radius 50%
</style>