Vue+Echarts实现分时图和交易量图的绘制
作者：Saga Two
1 前言
近来发现Echarts API越发的强大，对于绘制各类图形可以使用Echarts实现，前面已经介绍了柱状图、饼状图、折线图、极坐标图。对于k线图，除了前面介绍的vue+Echarts绘制K线图详解（一）----基本日K图绘制以外，k线图中包含其他多种类型的图形，休息了半载左右，今天继续来进一步深入介绍一下分时图和成交量图，为打造一个完整的版面添砖加瓦。
2 分时图
2.1 vue引入Echarts
前面已经介绍过了，还不知道怎么引入的同学请参考以前的教程：在Vue项目中引入 ECharts。
2.2 分时图介绍
分时图本质上也是一个折线图，横坐标为一天交易的每一分钟，纵坐标为股市的实时单价。除了实现这两个基本的功能以外，还需要带上每分钟交易量图，当鼠标放在图上时，要展示当前时间对应的相关数据；如下图所示：
我们本期要实现的功能为：分时折线图、分时成交量图，鼠标指示展示详细数据，对应成交量颜色划分；其余的一些细节的功能（图切换，细节颜色以及样式处理）我们以后再做介绍。
2.3 分时折线图配置
分时折线图本质上是折线图，我们通过设置图类型为折线即可，重点是对数据的处理，我们的数据源格式是json对象数组数据，每一分钟数据如下所示：
{"time":"1678411800","price":"3255.51","ratio":"-0.63%","increase":"-20.58","volume":"2925368","avgPrice":"3261.35","amount":"29.00\u4ebf","timeKey":"0930","datetime":"03-10 09:30","oriAmount":"2900320446","show":"1"},
首先我们需要对数据进行处理，才能应用于Echarts之中；我们分时折线图配置项代码代码如下所示：
// 横坐标数据配置
xAxis: [
{
type: "category",
data: this.xData,
boundaryGap: false,
axisLine: { onZero: false },
splitLine: { show: false },
min: "dataMin",
max: "dataMax"
},
]
// 纵坐标配置
yAxis: [
{
scale: true,
splitArea: {
show: true
}
},
]
//图形数据配置：
series: [
{
type: "line",
data: this.hourData,
symbol: "none", //无标记图案
lineStyle: {
width: 1
}
},
]其中，this.xData是我们vue页面中的经过处理的横坐标数据，this.hourData是我们页面中经过处理的每小时数据。
注意：series中symbol属性要设置为none，这样的到的折线图上将会不出线标记图案。
数据处理代码如下：
// 横坐标数据处理
initxData() {
for (let i = 0; i < this.klineData.length; i++) {
this.xData[i] = this.klineData[i].datetime;
}
},
// 数据计算以及拆分，将json数据转为数组数据
splitData(jsonData) {
const hourData = [];
for (let i = 0; i < jsonData.length; i++) {
hourData.push([
i,
jsonData[i].price,
jsonData[i].increase,
jsonData[i].volume,
jsonData[i].ratio,
jsonData[i].amount,
jsonData[i].datetime
]);
}
return hourData;
}其中， this.klineData是我们页面引入的json数据。
到此我们可以来看一下分时折线图的效果：
可以看到得到的折线图就是为我们的分时折线图。
2.4 组合交易量图
交易量图为2.2图中底部的红绿交间的柱状图，交易量图本质是一个柱状图，我们可以看到有两个特点：
1.横坐标与分时折线图公用，且柱状图在交易图下方；
2.当前为涨时，柱子为红色，当前为跌时，柱子为绿色；
对于特点1，在我们之前介绍的图中，都是公用坐标系的图，这里新知识点就是不公用坐标系，但是公用横坐标数据应该怎么处理；就是在xAxis、yAxis和series中设置两个对象出来，代表两个不同的坐标西，然后将两个坐标系的横坐标进行对齐即可；
代码如下：
// 横坐标数据
xAxis: [
// 折线图
{
type: "category",
data: this.xData,
boundaryGap: false,
axisLine: { onZero: false },
splitLine: { show: false },
min: "dataMin",
max: "dataMax"
},
// 柱状图
{
type: "category",
gridIndex: 1, //x 轴所在的 grid 的索引，默认位于第一个 grid。
data: this.xData,
boundaryGap: false,
axisLine: { onZero: false },
axisTick: { show: false },
splitLine: { show: false },
axisLabel: { show: false },
min: "dataMin",
max: "dataMax"
}
],
// 纵坐标配置
yAxis: [
{
scale: true,
splitArea: {
show: true
}
},
{
scale: true,
gridIndex: 1, // y 轴所在的 grid 的索引，默认位于第一个 grid
splitNumber: 2,
axisLabel: { show: false },
axisLine: { show: false },
axisTick: { show: false },
splitLine: { show: false }
}
],
series: [
{
type: "line",
data: this.hourData,
symbol: "none", //无标记图案
lineStyle: {
width: 1
}
},
{
name: "Volume",
type: "bar",
xAxisIndex: 1,
yAxisIndex: 1,
data: this.culomnValue
}
] 对于特点2，控制每个柱状图颜色不同，我们需要用到visualMap.pieces属性；官网上对该属性的说明是：自定义『分段式视觉映射组件（visualMapPiecewise）』的每一段的范围，以及每一段的文字，以及每一段的特别的样式。
我们直接上代码以及讲解，来看这个属性怎么使用，代码如下：
visualMap: {
type: "piecewise",
show: false, //不展示map，只应用对应颜色划分逻辑
seriesIndex: 1, //指定取哪个系列的数据
dimension: 2,
// 定义每一段的颜色
pieces: [
{
value: -1,
color: this.downColor
},
{
value: 1,
color: this.upcolor
}
]
},这段代码的解释是：当series的data数据里面有value==-1的值时，使用color为this.downColor,value==1时，使用color为this.upcolor.
此时，我们还需要对颜色数据进行处理一下，将k线图对应时间段的增长和下跌展示在数组里面，成交量数据处理代码如下：
// 初始化交易数据和交易柱状图颜色参数
initCulomnColor() {
this.culomnColor[0] = this.klineData[0].increase > 0 ? 1 : -1;
this.culomnValue[0] = [0, this.klineData[0].volume, -1];
for (let i = 1; i < this.klineData.length; i++) {
this.culomnColor[i] =
this.klineData[i].price > this.klineData[i - 1].price ? 1 : -1;
this.culomnValue[i] = [
i,
this.klineData[i].volume,
this.culomnColor[i]
];
}
},
到这里我们成交量柱状图即可渲染出来了，下一步就是将折线图和柱状图位置进行调整，给两个图分配合适的区域，代码如下：
// 图像位置配置
grid: [
{
left: "10%",
right: "10%",
height: "50%"
},
{
left: "10%",
right: "10%",
top: "65%",
height: "18%"
}
],
grid配置两个对象分别代表折线图和柱状图位置；
融合之后我们看到的效果图如下：
2.5 鼠标指示数据设置
k线图的要求是当鼠标指示在图的某个位置时，需要将这个时间段的详细数据展示出来；在此我们需要要利用到tooltip属性，但这个属性默认之后展示当前横坐标和纵坐标的值，吐过需要对展示的数据进行配置的话，我们还需要借助tooltip.formatter属性来返回我们想要的展示的数据，该属性可拓展范围非常广，本次不展开介绍，只介绍在k线图中的基本使用。代码如下：
tooltip: {
trigger: "axis",
axisPointer: {
type: "cross" //十字准星指示器
},
borderWidth: 1,
borderColor: "#ccc",
padding: 10,
textStyle: {
color: "#000"
},
formatter: function(param) {
param = param[0];
return [
"时间: " + param.data[6] + '<hr size=1 style="margin: 3px 0">',
"价格: " + param.data[1] + "<br/>",
"涨跌额: " + param.data[2] + "<br/>",
"成交量: " + param.data[3] + "<br/>",
"涨跌幅: " + param.data[4] + "<br/>"
].join("");
}
},我们将：时间、价格、涨跌额、成交量、涨跌幅五个属性展示在页面上，样式从简。得到的效果如下：
至此基本完成了分时折线图和交易量图的绘制；
2.6 项目完整代码
vue项目完整代码如下：
<template>
<div class="echart" id="mychart" style="width:100%; height: 500px;"></div>
</template>
<script>
import * as echarts from "echarts";
import SZHourData from "./data/hourData.TS";
export default {
data() {
return {
upcolor: "#FF0000", //增长颜色
upBorderColor: "#8A0000",
downColor: "#008000", // 下跌颜色
downBorderColor: "#008F28",
klineData: [], //k线图数据
hourData: [], //charts表格小时数据
xData: [],
culomnColor: [], //颜色
culomnValue: []
};
},
mounted() {
// 数据初始化
this.initData();
// 图标初始化
this.initEcharts();
},
methods: {
initData() {
this.klineData = SZHourData.priceinfo;
this.hourData = this.splitData(this.klineData);
this.initxData();
},
initEcharts() {
const option = {
title: {
text: "上证指数",
left: 0
},
tooltip: {
trigger: "axis",
axisPointer: {
type: "cross" //十字准星指示器
},
borderWidth: 1,
borderColor: "#ccc",
padding: 10,
textStyle: {
color: "#000"
},
formatter: function(param) {
param = param[0];
return [
"时间: " + param.data[6] + '<hr size=1 style="margin: 3px 0">',
"价格: " + param.data[1] + "<br/>",
"涨跌额: " + param.data[2] + "<br/>",
"成交量: " + param.data[3] + "<br/>",
"涨跌幅: " + param.data[4] + "<br/>"
].join("");
}
},
visualMap: {
type: "piecewise",
show: false, //不展示map，只应用对应颜色划分逻辑
seriesIndex: 1, //指定取哪个系列的数据
dimension: 2,
// 定义每一段的颜色
pieces: [
{
value: -1,
color: this.downColor
},
{
value: 1,
color: this.upcolor
}
]
},
// 图像位置配置
grid: [
{
left: "10%",
right: "10%",
height: "50%"
},
{
left: "10%",
right: "10%",
top: "65%",
height: "18%"
}
],
// 横坐标数据
xAxis: [
// 折线图
{
type: "category",
data: this.xData,
boundaryGap: false,
axisLine: { onZero: false },
splitLine: { show: false },
min: "dataMin",
max: "dataMax"
},
// 柱状图
{
type: "category",
gridIndex: 1, //x 轴所在的 grid 的索引，默认位于第一个 grid。
data: this.xData,
boundaryGap: false,
axisLine: { onZero: false },
axisTick: { show: false },
splitLine: { show: false },
axisLabel: { show: false },
min: "dataMin",
max: "dataMax"
}
],
// 纵坐标配置
yAxis: [
{
scale: true,
splitArea: {
show: true
}
},
{
scale: true,
gridIndex: 1, // y 轴所在的 grid 的索引，默认位于第一个 grid
splitNumber: 2,
axisLabel: { show: false },
axisLine: { show: false },
axisTick: { show: false },
splitLine: { show: false }
}
],
dataZoom: [
{
type: "inside",
xAxisIndex: [0, 1],
start: 50, //展示的数据范围，默认为50%-100%
end: 100
},
{
show: true,
xAxisIndex: [0, 1],
type: "slider",
top: "90%",
start: 50, //展示的数据范围，默认为50%-100%
end: 100
}
],
series: [
{
type: "line",
data: this.hourData,
symbol: "none", //无标记图案
lineStyle: {
width: 1
}
},
{
name: "Volume",
type: "bar",
xAxisIndex: 1,
yAxisIndex: 1,
data: this.culomnValue
}
]
};
const myChart = echarts.init(document.getElementById("mychart"));
myChart.setOption(option);
//随着屏幕大小调节图表
window.addEventListener("resize", () => {
myChart.resize();
});
},
// 横坐标数据处理
initxData() {
for (let i = 0; i < this.klineData.length; i++) {
this.xData[i] = this.klineData[i].datetime;
}
this.initCulomnColor();
},
// 初始化交易数据和交易柱状图颜色参数
initCulomnColor() {
this.culomnColor[0] = this.klineData[0].increase > 0 ? 1 : -1;
this.culomnValue[0] = [0, this.klineData[0].volume, -1];
for (let i = 1; i < this.klineData.length; i++) {
this.culomnColor[i] =
this.klineData[i].price > this.klineData[i - 1].price ? 1 : -1;
this.culomnValue[i] = [
i,
this.klineData[i].volume,
this.culomnColor[i]
];
}
},
// 数据计算以及拆分，将json数据转为数组数据
splitData(jsonData) {
const hourData = [];
for (let i = 0; i < jsonData.length; i++) {
hourData.push([
i,
jsonData[i].price,
jsonData[i].increase,
jsonData[i].volume,
jsonData[i].ratio,
jsonData[i].amount,
jsonData[i].datetime
]);
}
return hourData;
}
}
};
</script>3 总结
本次介绍的Echarts新属性的使用较多，不知各位有没有体会到echarts的强大，若能将各种属性进行融汇贯通，则变强指日可待。需要注意以上代码仅供学习参考，非项目级别代码，里面存在各种未考虑边界值问题，以及可能存在的兼容性问题，请各位同学知晓。
到此这篇关于Vue+Echarts实现分时图和交易量图的绘制的文章就介绍到这了,更多相关Vue Echarts绘制分时图 交易量图内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！