Vue+Echarts實現(xiàn)基本K線圖的繪制
更新時間：2023年03月15日 14:19:11 作者：Saga?Two
這篇文章主要為大家詳細介紹了如何利用Vue和Echarts實現(xiàn)基本K線圖的繪制，文中的示例代碼講解詳細，感興趣的小伙伴可以跟隨小編一起學習一下
1 引入Echarts
1.1 安裝
使用如下命令通過 npm 安裝 ECharts
npm install echarts --save
注：本文安裝Echarts版本為：“echarts”: “5.2.1”
1.2 引入
安裝完成以后，可以將echarts全部引入，這樣一來，我們可以在該頁面使用echarts所有組件；引入代碼如下：
import * as echarts from "echarts";
1.3 基本使用
vue+Echarts基本使用請見：在Vue項目中引入 ECharts
2 基礎K線圖
2.1 基礎k線圖
Ecahrts自帶K線圖，將series的type設置為candlestick即可；
基礎k線圖橫坐標為交易日，縱坐標為每股價格，其次就是K線圖每天的情況，包含當前價格，前日收盤價格，開盤價格，當日最高價，當日最低價，我們只需要將對應的數(shù)據(jù)傳入到對應的參數(shù)當中，即可得到我們想要的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], //今開、當前價格、最低價格、最高價
[40, 35, 30, 50],
[31, 38, 33, 44],
[38, 15, 5, 42]
]
}
]
};
const myChart = echarts.init(document.getElementById("mychart"));
myChart.setOption(option);
//隨著屏幕大小調節(jié)圖表
window.addEventListener("resize", () => {
myChart.resize();
});
}
}
};
</script>2.2 基礎日k圖
金融證券機構的K線圖數(shù)據(jù)較為全面，K線圖包含日K圖、周K圖、日K圖，年K圖，國內紅色代表漲，綠色代表跌，最近兩個月股市一片綠，原因在于全球經濟下行以及國內被某個大國收割。
今天我們主要介紹日K圖，從中能推演出周K、月K圖，只是傳入數(shù)據(jù)不同而已。
日k圖除了紅綠柱狀圖，還包含均線，同行均線數(shù)據(jù)可由日K數(shù)據(jù)直接計算獲得，不過作為前端工程師，建議均線數(shù)據(jù)直接從后臺獲取，前端計算回有些許計算誤差。
此外，日K圖還有其他屬性可以進行調整，如的護鏢防止位置出現(xiàn)對應數(shù)據(jù)、K線柱狀圖顏色，寬度等，掌握基本的日K圖配置以后，其他的K線圖萬變不離其中。
我們直接上圖以及代碼示例：
上圖代碼如下：
<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", //增長顏色
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);
//隨著屏幕大小調節(jié)圖表
window.addEventListener("resize", () => {
myChart.resize();
});
},
// 數(shù)據(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
};
},
// 均值計算
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相關屬性已在前面章節(jié)介紹過，這里不做重復介紹。以上代碼可實現(xiàn)日K線基本圖形。
3 總結
K線圖主要是要理解多種圖型的各個數(shù)據(jù)所代表的含義，主要由折線圖以及日k圖兩種組成，這里我們介紹了基本日K圖，下期我們介紹更為全面的日K圖和分時圖相互轉換，來實現(xiàn)基本應用。
到此這篇關于Vue+Echarts實現(xiàn)基本K線圖的繪制的文章就介紹到這了,更多相關Vue Echarts繪制K線圖內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要為大家詳細介紹了vue的ElementUI表格，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-02-02
這篇文章主要介紹了Vue結合路由配置遞歸實現(xiàn)菜單欄,本文通過實例代碼給大家介紹的非常詳細，對大家的學習火鍋工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-06-06
Vue中實現(xiàn)v-for循環(huán)遍歷圖片的方法
這篇文章主要介紹了Vue中實現(xiàn)v-for循環(huán)遍歷圖片的方法，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要為大家詳細介紹了Vue2單一事件管理組件通信的相關資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-05-05
這篇文章主要介紹了Vue中前端與后端如何實現(xiàn)交互，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
vue3?el-table結合seamless-scroll實現(xiàn)表格數(shù)據(jù)滾動的思路詳解
這篇文章主要介紹了vue3?el-table結合seamless-scroll實現(xiàn)表格數(shù)據(jù)滾動,創(chuàng)建兩個table，隱藏第一個table的body部分，這樣就能得到一個固定的head，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-07-07
這篇文章主要為大家詳細介紹了vue實現(xiàn)簡單的購物車功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
Vue中.env、.env.development及.env.production文件說明
這篇文章主要給大家介紹了關于Vue中.env、.env.development及.env.production文件說明的相關資料,文中通過實例代碼介紹的非常詳細,對大家學習或者使用vue具有一定的參考學習價值,需要的朋友可以參考下2022-09-09
這篇文章主要介紹了vue.js 輸入框輸入值自動過濾特殊字符替換中問標點操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
這篇文章主要介紹了vue如何讀取本地文件問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10