Vue+Echarts怎么实现分时图和交易量图绘制

发布时间:2023-03-15 16:12:53 作者:iii
来源:亿速云 阅读:127

这篇文章主要介绍“Vue+Echarts怎么实现分时图和交易量图绘制”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“Vue+Echarts怎么实现分时图和交易量图绘制”文章能帮助大家解决问题。

分时图

1 vue引入Echarts

2 分时图介绍

分时图本质上也是一个折线图,横坐标为一天交易的每一分钟,纵坐标为股市的实时单价。除了实现这两个基本的功能以外,还需要带上每分钟交易量图,当鼠标放在图上时,要展示当前时间对应的相关数据;如下图所示:

Vue+Echarts怎么实现分时图和交易量图绘制

我们本期要实现的功能为:分时折线图、分时成交量图,鼠标指示展示详细数据,对应成交量颜色划分;其余的一些细节的功能(图切换,细节颜色以及样式处理)我们以后再做介绍。

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数据。

到此我们可以来看一下分时折线图的效果:

Vue+Echarts怎么实现分时图和交易量图绘制

可以看到得到的折线图就是为我们的分时折线图。

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配置两个对象分别代表折线图和柱状图位置;

融合之后我们看到的效果图如下:

Vue+Echarts怎么实现分时图和交易量图绘制

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 >',
              "价格: " + param.data[1] + "<br/>",
              "涨跌额: " + param.data[2] + "<br/>",
              "成交量: " + param.data[3] + "<br/>",
              "涨跌幅: " + param.data[4] + "<br/>"
            ].join("");
          }
        },

我们将:时间、价格、涨跌额、成交量、涨跌幅五个属性展示在页面上,样式从简。得到的效果如下:

Vue+Echarts怎么实现分时图和交易量图绘制

至此基本完成了分时折线图和交易量图的绘制;

6 项目完整代码

vue项目完整代码如下:

<template>
  <div class="echart" id="mychart" ></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 >',
              "价格: " + 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>

关于“Vue+Echarts怎么实现分时图和交易量图绘制”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识,可以关注亿速云行业资讯频道,小编每天都会为大家更新不同的知识点。

推荐阅读:
  1. android ios vue 互调
  2. vue使用jsonp

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

vue echarts

上一篇:redis反序列化报错如何解决

下一篇:基于k8s如何部署Session模式Flink集群

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》