Vue+Echarts實(shí)現(xiàn)基本K線圖的繪制

更新時(shí)間：2023年03月15日 14:19:11 作者：Saga?Two

這篇文章主要為大家詳細(xì)介紹了如何利用Vue和Echarts實(shí)現(xiàn)基本K線圖的繪制，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下

1 引入Echarts

1.1 安裝

使用如下命令通過(guò) npm 安裝 ECharts

npm install echarts --save

注：本文安裝Echarts版本為：“echarts”: “5.2.1”

1.2 引入

安裝完成以后，可以將echarts全部引入，這樣一來(lái)，我們可以在該頁(yè)面使用echarts所有組件；引入代碼如下：

import * as echarts from "echarts";

1.3 基本使用

vue+Echarts基本使用請(qǐng)見：在Vue項(xiàng)目中引入 ECharts

2 基礎(chǔ)K線圖

2.1 基礎(chǔ)k線圖

Ecahrts自帶K線圖，將series的type設(shè)置為candlestick即可；

基礎(chǔ)k線圖橫坐標(biāo)為交易日，縱坐標(biāo)為每股價(jià)格，其次就是K線圖每天的情況，包含當(dāng)前價(jià)格，前日收盤價(jià)格，開盤價(jià)格，當(dāng)日最高價(jià)，當(dāng)日最低價(jià)，我們只需要將對(duì)應(yīng)的數(shù)據(jù)傳入到對(duì)應(yīng)的參數(shù)當(dāng)中，即可得到我們想要的k線圖。

如圖為基本k線圖示例：

上圖代碼如下：

<template>
  <div class="echart" id="mychart" style="width:100%; height: 400px;"></div>
</template>

<script>
import * as echarts from "echarts";

export default {
  data() {
    return {};
  },
  mounted() {
    this.initEcharts();
  },
  methods: {
    initEcharts() {
      const option = {
        title: {
          text: "K線入門示例"
        },
        tooltip: {},
        legend: {},
        xAxis: {
          data: ["2017-10-24", "2017-10-25", "2017-10-26", "2017-10-27"]
        },
        yAxis: {},
        series: [
          {
            type: "candlestick",
            data: [
              [20, 34, 10, 38], //今開、當(dāng)前價(jià)格、最低價(jià)格、最高價(jià)
              [40, 35, 30, 50],
              [31, 38, 33, 44],
              [38, 15, 5, 42]
            ]
          }
        ]
      };
      const myChart = echarts.init(document.getElementById("mychart"));
      myChart.setOption(option);
      //隨著屏幕大小調(diào)節(jié)圖表
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    }
  }
};
</script>

2.2 基礎(chǔ)日k圖

金融證券機(jī)構(gòu)的K線圖數(shù)據(jù)較為全面，K線圖包含日K圖、周K圖、日K圖，年K圖，國(guó)內(nèi)紅色代表漲，綠色代表跌，最近兩個(gè)月股市一片綠，原因在于全球經(jīng)濟(jì)下行以及國(guó)內(nèi)被某個(gè)大國(guó)收割。

今天我們主要介紹日K圖，從中能推演出周K、月K圖，只是傳入數(shù)據(jù)不同而已。

日k圖除了紅綠柱狀圖，還包含均線，同行均線數(shù)據(jù)可由日K數(shù)據(jù)直接計(jì)算獲得，不過(guò)作為前端工程師，建議均線數(shù)據(jù)直接從后臺(tái)獲取，前端計(jì)算回有些許計(jì)算誤差。

此外，日K圖還有其他屬性可以進(jìn)行調(diào)整，如的護(hù)鏢防止位置出現(xiàn)對(duì)應(yīng)數(shù)據(jù)、K線柱狀圖顏色，寬度等，掌握基本的日K圖配置以后，其他的K線圖萬(wàn)變不離其中。

我們直接上圖以及代碼示例：

上圖代碼如下：

<template>
  <div class="echart" id="mychart" style="width:100%; height: 400px;"></div>
</template>

<script>
import * as echarts from "echarts";
import SZlineData from "./data/klineDate.ts";
// console.log(SZlineData);

export default {
  data() {
    return {
      upcolor: "#FF0000", //增長(zhǎng)顏色
      upBorderColor: "#8A0000",
      downColor: "#008000", // 下跌顏色
      downBorderColor: "#008F28",
      klineData: [] //k線圖數(shù)據(jù)
    };
  },
  mounted() {
    this.initData();
    this.initEcharts();
  },
  methods: {
    initData() {
      this.klineData = this.splitData(SZlineData);
    },
    initEcharts() {
      const option = {
        title: {
          text: "上證指數(shù)",
          left: 0
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross"
          }
        },
        legend: {
          data: ["日K", "MA5", "MA10", "MA20", "MA30"]
        },
        grid: {
          left: "10%",
          right: "10%",
          bottom: "15%"
        },
        xAxis: {
          type: "category",
          data: this.klineData.categoryData,
          boundaryGap: false,
          axisLine: { onZero: false },
          splitLine: { show: false },
          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: this.klineData.values,
            itemStyle: {
              color: this.upColor,
              color0: this.downColor,
              borderColor: this.upBorderColor,
              borderColor0: this.downBorderColor
            },
            markPoint: {
              label: {
                formatter: function(param) {
                  return param != null ? Math.round(param.value) + "" : "";
                }
              },
              data: [
                {
                  name: "Mark",
                  coord: ["2013/5/31", 2300],
                  value: 2300,
                  itemStyle: {
                    color: "rgb(41,60,85)"
                  }
                },
                {
                  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 + "
" + (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"
                }
              ]
            }
          },
          {
            name: "MA5",
            type: "line",
            data: this.calculateMA(5),
            smooth: true,
            showSymbol: false,
            lineStyle: {
              width: 1,
              opacity: 0.8
            }
          },
          {
            name: "MA10",
            type: "line",
            data: this.calculateMA(10),
            smooth: true,
            showSymbol: false,
            lineStyle: {
              width: 1,
              opacity: 0.8
            }
          },
          {
            name: "MA20",
            type: "line",
            data: this.calculateMA(20),
            smooth: true,
            showSymbol: false,
            lineStyle: {
              width: 1,
              opacity: 0.8
            }
          },
          {
            name: "MA30",
            type: "line",
            data: this.calculateMA(30),
            smooth: true,
            showSymbol: false,
            lineStyle: {
              width: 1,
              opacity: 0.8
            }
          }
        ]
      };
      const myChart = echarts.init(document.getElementById("mychart"));
      myChart.setOption(option);
      //隨著屏幕大小調(diào)節(jié)圖表
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
    // 數(shù)據(jù)計(jì)算以及拆分
    splitData(rawData) {
      const categoryData = [];
      const values = [];
      for (let i = 0; i < rawData.length; i++) {
        categoryData.push(rawData[i].splice(0, 1)[0]);
        values.push(rawData[i]);
      }
      return {
        categoryData: categoryData,
        values: values
      };
    },
    // 均值計(jì)算
    calculateMA(dayCount) {
      const result = [];
      for (let i = 0, len = this.klineData.values.length; i < len; i++) {
        if (i < dayCount) {
          result.push("-");
          continue;
        }
        let sum = 0;
        for (let j = 0; j < dayCount; j++) {
          sum += +this.klineData.values[i - j][1];
        }
        // 保留兩位小數(shù)
        result.push((sum / dayCount).toFixed(2));
      }
      return result;
    }
  }
};
</script>

注：部分Echarts相關(guān)屬性已在前面章節(jié)介紹過(guò)，這里不做重復(fù)介紹。以上代碼可實(shí)現(xiàn)日K線基本圖形。