vue+Echarts绘制k线图(二)--分时图和交易量图

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 的索引，默认位于第一个 gridsplitNumber: 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 的索引，默认位于第一个 gridsplitNumber: 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绘制k线图(二)–分时图和交易量图到此结束，后续将继续探讨k线图其他知识的实现。若有问题请进行留言。