hightcharts-vue 蜡烛图 股票绘图 candlestick

main.js文件：

import HighchartsVue from "highcharts-vue"
import Highcharts from "highcharts"
import stockInit from "highcharts/modules/stock"
import mapInit from 'highcharts/modules/map'

stockInit(Highcharts)
mapInit(Highcharts)
Vue.use(HighchartsVue)


Kchart组件中：
<template>
  <div id="kChart">
    <highcharts class="stock" :constructor-type="'stockChart'" 
     :options="stockOptions"></highcharts>
  </div>

</template>

<script>
  import Highcharts from "highcharts";
  export default {
    name: "kChart",
    props: {
      kChartData: Array  //父组件传过来的值（因为每分钟要请求，所以采用watch监听）
    },
    data() {
      return {
        stockOptions: {
          global: {
            useUTC: false
          },
          rangeSelector: {
            selected: 2
          },
          series: [{
            type: "candlestick",   //数据展示蜡烛图
            data: "",
          }],
          chart: {
            backgroundColor: "#17223E",   //整个绘图区域背景
          },
          tooltip: {
            split: true
          },
          colors: ["#616DA0"],
          rangeSelector: {
            enabled: false,
            buttons: [{
              type: 'hour',
              count: 1,
              text: '1h'
            }],
            inputEnabled: false, 
            selected: 2
          },
          scrollbar: {
            enabled: false
          },
          navigator: {
            enabled: false
          },
          credits: {
            enabled: false
          },
          tooltip: {
            shared: true,
            useHTML: true,
            headerFormat: "<small>{point.key}</small><table>",
            pointFormat: '<tr><td style="color: {series.color}" colspan="2">当前秒 </td></tr></br>' +
              '<tr><td>开盘:</td><td style="text-align: right">{point.open}</td></tr></br>' +
              '<tr><td>最高:</td><td style="text-align: right">{point.high}</td></tr></br>' +
              '<tr><td>最低:</td><td style="text-align: right">{point.low}</td></tr></br>' +
              '<tr><td>收盘:</td><td style="text-align: right">{point.close}</td></tr>',
            footerFormat: "</table>",
            valueDecimals: 2
          },
          plotOptions: {             //蜡烛图颜色
            candlestick: {
              color: "#33AA11",
              upColor: "#DD2200",
              lineColor: "#33AA11",
              upLineColor: "#DD2200"
            }
          },
          xAxis: {
            type: 'datetime',
            tickInterval: 36e5 / 60, // 1分钟   //刻度线步伐
            minRange: 36e5 / 60,
            labels: {
              format: '{value: %M:%S}',
              align: 'center',
              rotation: -30
            },
            lineColor: "#21335B",
            minorTickColor: "#21335B",
            tickColor: "#21335B",
            labels: {
              style: {
                color: "#5272B0"
              },
            }
          },
          yAxis: [{
            gridLineWidth: "0px",
            tickWidth: "0px",
            labels: {
              enabled: false
            }
          }]
        }
      };
    },
    methods: {
      getData() {}
    },
    mounted() {
      this.getData();
    },
    watch: {
      kChartData(newValue, oldValue) {
        this.stockOptions.series[0].data = newValue;
        let date = newValue.map((e, i) => {
          return e[0];
        });
        this.date = date;
        let ohlc = [];
        let dataLength = newValue.length;
        for (let i = 0; i < dataLength; i += 1) {
          ohlc.push([
            newValue[i][0], // 时间戳
            newValue[i][1], // 开盘价
            newValue[i][2], // 最高价
            newValue[i][3], // 最低价
            newValue[i][4] // 收盘价
          ]);
        }
      }
    }
  };

</script>