安裝Echarts
首先下載安裝Echarts，可以通過 npm install echarts --save命令下載。在這個文件中引入echarts，創(chuàng)建echarts的掛載實例，在mounted中初始化echarts實例，進行相關的K線圖繪制就可以，這里不詳細介紹。
Echarts官方K線示例
在這里插入圖片描述
官方示例效果已經(jīng)很完善了，但實際使用過程中發(fā)現(xiàn)官方示例并不能很好的滿足我的需求，主要一下原因。
1，在數(shù)據(jù)量很大的時候，計算多日均線數(shù)據(jù)的時候瀏覽器的性能開銷過大，很容易出現(xiàn)卡頓，特別是一個頁面有多張K線圖時，在部分比較老舊的瀏覽器中情況尤為明顯。
2，數(shù)據(jù)量不足以計算均線時會出現(xiàn)null值，比如30日均線的前30條數(shù)據(jù)都是null值，數(shù)據(jù)缺失影響展示效果。
3，tooltip的顯示，相比open，close，max，min，我更喜歡開盤，收盤，最高，最低這種顯示方式。
針對上述原因改進后的K線示例
使用數(shù)據(jù)集的方式渲染減小前端的運算壓力，把均線計算放到服務端。
在這里插入圖片描述
option的主要結構
// An highlighted block
option: {
title: {
left: 'left',
text: '',
textStyle: {
color: '#909399',
}
},
type: 'stock',
backgroundColor: '#303133',
legend: {
data: ['日K', '5日均線', '10日均線', '20日均線', '30日均線'],
inactiveColor: '#777',
textStyle: {
color: '#fff'
}
},
dataset: {
// 直接把數(shù)據(jù)放進source就渲染完了
source: null
},
// dataZoom是設置最下方的滑動條型數(shù)據(jù)區(qū)域縮放組件,不需要可以刪除
dataZoom: [{
type: 'inside',
start: 80,
end: 100
}, {
type: 'slider',
height: 8,
bottom: 20,
borderColor: 'transparent',
backgroundColor: '#e2e2e2',
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.7v-1.2h6.6z M13.3,22H6.7v-1.2h6.6z M13.3,19.6H6.7v-1.2h6.6z', // jshint ignore:line
handleSize: 20,
handleStyle: {
shadowBlur: 6,
shadowOffsetX: 1,
shadowOffsetY: 2,
shadowColor: '#aaa'
}
}],
tooltip: {
confine: true,
trigger: 'axis',
axisPointer: {
animation: false,
type: 'cross',
lineStyle: {
color: '#376df4',
width: 2,
opacity: 1
}
}
},
xAxis: {
type: 'category',
axisLine: {lineStyle: {color: '#8392A5'}}
},
yAxis: {
scale: true,
axisLine: {lineStyle: {color: '#8392A5'}},
splitLine: {show: false}
},
series: [
{
type: 'candlestick',
name: '日K',
// 重點
encode: {
// 日期作為X軸
x: '日期',
//這里是將["開盤", "收盤", "最高", "最低"]四個屬性渲染到K線圖上
y: ["開盤", "收盤", "最高", "最低"],
//這里是將["開盤", "收盤", "最高", "最低"，"漲幅", "成交量"]顯示在tooltip上
tooltip: ["開盤", "收盤", "最高", "最低", "漲幅", "成交量"]
},
// 設置K線顏色
itemStyle: {
normal: {
color: '#FD1050',
color0: '#0CF49B',
borderColor: '#FD1050',
borderColor0: '#0CF49B'
}
},
},
{
name: '5日均線',
type: 'line',
encode: {
x: '日期',
y: '5日均線',
},
smooth: true,
showSymbol: false,
lineStyle: {
normal: {
width: 1
}
}
},
{
name: '10日均線',
type: 'line',
encode: {
// 將 "product" 列映射到 X 軸。
x: '日期',
// 將 "product" 列映射到 Y 軸。
y: '10日均線'
},
smooth: true,
showSymbol: false,
lineStyle: {
normal: {
width: 1
}
}
},
{
name: '20日均線',
type: 'line',
encode: {
// 將 "product" 列映射到 X 軸。
x: '日期',
// 將 "product" 列映射到 Y 軸。
y: '20日均線'
},
smooth: true,
showSymbol: false,
lineStyle: {
normal: {
width: 1
}
}
},
{
name: '30日均線',
type: 'line',
smooth: true,
encode: {
x: '日期',
y: '30日均線'
},
showSymbol: false,
lineStyle: {
normal: {
width: 1
}
}
}
]
},
接下來選擇一個帶均線的數(shù)據(jù)源放進去就行了
這里我們選擇小熊同學的數(shù)據(jù)源，api.doctorxiong.club/v1/stock/detail?code=000001
然后只需要直接把數(shù)據(jù)放進數(shù)據(jù)集就完成了整個K線圖的渲染，JS代碼如下
// An highlighted block
// 先再數(shù)據(jù)集加入一行數(shù)據(jù)屬性
const dataset = [["日期", "開盤", "收盤", "最高", "最低", "漲幅", "成交量", "5日均線", "10日均線", "20日均線", "30日均線"]]
// 這里是我封裝的ajax請求,不同的人此處代碼不一樣,data就是歷史K線數(shù)據(jù)
const data = await getStockDetail(code, 1).then(
res => {
return res.data.dailyData
}).catch(err => {
console.log(err)
})
// 把data合并到dataset
dataset.push.apply(dataset, data)
// 把數(shù)據(jù)放進數(shù)據(jù)基就渲染完了
this.option.dataset.source = dataset
