安装Echarts
首先下载安装Echarts，可以通过 npm install echarts --save命令下载。在这个文件中引入echarts，创建echarts的挂载实例，在mounted中初始化echarts实例，进行相关的K线图绘制就可以，这里不详细介绍。
Echarts官方K线示例
Echarts官方K线示例.
在这里插入图片描述
官方示例效果已经很完善了，但实际使用过程中发现官方示例并不能很好的满足我的需求，主要一下原因。
1，在数据量很大的时候，计算多日均线数据的时候浏览器的性能开销过大，很容易出现卡顿，特别是一个页面有多张K线图时，在部分比较老旧的浏览器中情况尤为明显。
2，数据量不足以计算均线时会出现null值，比如30日均线的前30条数据都是null值，数据缺失影响展示效果。
3，tooltip的显示，相比open，close，max，min，我更喜欢开盘，收盘，最高，最低这种显示方式。
针对上述原因改进后的K线示例
使用数据集的方式渲染减小前端的运算压力，把均线计算放到服务端。
在这里插入图片描述
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: {
// 直接把数据放进source就渲染完了
source: null
},
// dataZoom是设置最下方的滑动条型数据区域缩放组件,不需要可以删除
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
}
}
}
]
},
接下来选择一个带均线的数据源放进去就行了
这里我们选择小熊同学的数据源，api.doctorxiong.club/v1/stock/detail?code=000001
然后只需要直接把数据放进数据集就完成了整个K线图的渲染，JS代码如下
// An highlighted block
// 先再数据集加入一行数据属性
const dataset = [["日期", "开盘", "收盘", "最高", "最低", "涨幅", "成交量", "5日均线", "10日均线", "20日均线", "30日均线"]]
// 这里是我封装的ajax请求,不同的人此处代码不一样,data就是历史K线数据
const data = await getStockDetail(code, 1).then(
res => {
return res.data.dailyData
}).catch(err => {
console.log(err)
})
// 把data合并到dataset
dataset.push.apply(dataset, data)
// 把数据放进数据基就渲染完了
this.option.dataset.source = dataset