vue3+klinecharts实现k线(附完整代码)

news2024/11/22 19:21:34

vue3+klinecharts实现k线

      • 环境
      • 安装
      • 图表配置
      • 创建一个容器
      • 实现点击时间切换图表
      • 完整代码

环境

vue3 + klinecharts

最终实现
在这里插入图片描述
在这里插入图片描述

安装

npm install klinecharts

图表配置

具体可用参考官网
https://klinecharts.com/guide/styles.html

const option = {
  crosshair: {
    show: true,
    // 十字光标水平线及文字
    horizontal: {
      show: true,
      line: {
        show: true,
        style: "solid",
        size: 1,
        color: "#333",
      },
   
    },
    vertical: {
      show: true,
      line: {
        show: true,
        style: 'solid',
        size: 1,
        color: '#333'
      },
  },
},

配置图表

chart.setStyles(option);

创建一个容器

 <div id="chart_box" style="width: 100%; height: 450px"></div>

初始化图表

import { init} from "klinecharts";

const klineData = ref([...])

onMounted(() => {
  chart = init("chart_box");

  chart.setStyles(option);

  chart.createIndicator("VOL");

  chart.applyNewData(klineData.value[0].chart_data)
});

实现点击时间切换图表

	<div class="time">
      <span
        v-for="(item, index) in klineData"
        :key="index"
        @click="tabTime(item)"
        :class="item.time === active ? 'active' : ''"
        >{{ item.time }}</span
      >
    </div>
    
const active = ref("1M");
    
const tabTime = (item) => {
  active.value = item.time;
  chart.applyNewData(item.chart_data)
};

完整代码

<script setup>
import { onMounted, ref } from "vue";
import { init} from "klinecharts";

const active = ref("1M");

let chart;

const klineData = ref([
  {
    time: "1M",
    chart_data:[
  { "close": 4980.56, "high": 4982.33, "low": 4978.22, "open": 4980.22, "timestamp": 1635234000000, "volume": 220 },
  { "close": 4982.12, "high": 4984.45, "low": 4980.08, "open": 4981.15, "timestamp": 1635234060000, "volume": 165 },
  { "close": 4978.88, "high": 4980.75, "low": 4977.10, "open": 4980.50, "timestamp": 1635234120000, "volume": 145 },
  { "close": 4983.23, "high": 4985.12, "low": 4981.55, "open": 4982.10, "timestamp": 1635234180000, "volume": 200 },
  { "close": 4985.67, "high": 4987.25, "low": 4984.08, "open": 4986.22, "timestamp": 1635234240000, "volume": 165 },
 
]
  },
  {
    time: "5M",
    chart_data:[
  { "close": 4992.45, "high": 4994.12, "low": 4991.55, "open": 4991.88, "timestamp": 1635240000000, "volume": 190 },
  { "close": 4993.22, "high": 4995.10, "low": 4992.45, "open": 4992.55, "timestamp": 1635240060000, "volume": 225 },
  { "close": 4995.08, "high": 4996.55, "low": 4994.22, "open": 4994.88, "timestamp": 1635240120000, "volume": 160 },
  { "close": 4994.67, "high": 4996.22, "low": 4994.10, "open": 4995.22, "timestamp": 1635240180000, "volume": 155 },
  { "close": 4997.12, "high": 4998.45, "low": 4996.08, "open": 4996.55, "timestamp": 1635240240000, "volume": 200 },
  
]

  },
  {
    time: "15M",
    chart_data:[
    { "close": 4986.45, "high": 4988.10, "low": 4985.34, "open": 4986.98, "timestamp": 1635234300000, "volume": 198 },
  { "close": 4984.79, "high": 4987.55, "low": 4984.12, "open": 4985.22, "timestamp": 1635234360000, "volume": 225 },
  { "close": 4987.90, "high": 4989.25, "low": 4986.55, "open": 4987.10, "timestamp": 1635234420000, "volume": 210 },
  { "close": 4989.12, "high": 4991.20, "low": 4988.45, "open": 4989.55, "timestamp": 1635234480000, "volume": 215 },
  { "close": 4990.55, "high": 4992.34, "low": 4989.88, "open": 4990.12, "timestamp": 1635234540000, "volume": 230 }
    ]
  },
  {
    time: "30M",
    chart_data:[
    { "close": 4998.56, "high": 4999.25, "low": 4997.45, "open": 4997.90, "timestamp": 1635240300000, "volume": 220 },
  { "close": 4998.22, "high": 5000.10, "low": 4998.12, "open": 4998.45, "timestamp": 1635240360000, "volume": 215 },
  { "close": 5000.10, "high": 5001.22, "low": 4999.55, "open": 5000.00, "timestamp": 1635240420000, "volume": 210 },
  { "close": 4999.88, "high": 5001.55, "low": 4999.22, "open": 5000.45, "timestamp": 1635240480000, "volume": 225 },
  { "close": 5001.34, "high": 5002.45, "low": 5000.88, "open": 5001.22, "timestamp": 1635240540000, "volume": 230 }
    ]
  },
  {
    time: "1H",
    chart_data:[
    { "close": 5003.68, "high": 5004.42, "low": 5002.95, "open": 5003.00, "timestamp": 1635240600000, "volume": 220 },
    { "close": 5004.10, "high": 5005.28, "low": 5003.75, "open": 5003.80, "timestamp": 1635240660000, "volume": 215 },
    { "close": 5005.22, "high": 5006.15, "low": 5004.88, "open": 5005.00, "timestamp": 1635240720000, "volume": 210 },
    { "close": 5004.78, "high": 5006.22, "low": 5004.05, "open": 5005.22, "timestamp": 1635240780000, "volume": 225 },
    { "close": 5006.02, "high": 5007.45, "low": 5005.88, "open": 5006.10, "timestamp": 1635240840000, "volume": 230 }
    ]
  },
  {
    time: "4H",
    chart_data:[
    { "close": 5006.45, "high": 5007.90, "low": 5005.75, "open": 5006.68, "timestamp": 1635240900000, "volume": 220 },
    { "close": 5006.88, "high": 5008.22, "low": 5006.45, "open": 5007.00, "timestamp": 1635240960000, "volume": 215 },
    { "close": 5007.15, "high": 5008.50, "low": 5007.00, "open": 5007.25, "timestamp": 1635241020000, "volume": 210 },
  { "close": 4999.88, "high": 5001.55, "low": 4999.22, "open": 5000.45, "timestamp": 1635240480000, "volume": 225 },
  { "close": 5007.88, "high": 5009.10, "low": 5007.55, "open": 5007.95, "timestamp": 1635241140000, "volume": 230 }
    ]
  },
]);

const option = {
  crosshair: {
    show: true,
    // 十字光标水平线及文字
    horizontal: {
      show: true,
      line: {
        show: true,
        style: "solid",
        size: 1,
        color: "#333",
      },
   
    },
    vertical: {
      show: true,
      line: {
        show: true,
        style: 'solid',
        size: 1,
        color: '#333'
      },
  },
},

    
};

onMounted(() => {
  chart = init("chart_box");

  chart.setStyles(option);

  chart.createIndicator("VOL");

  chart.applyNewData(klineData.value[0].chart_data)
});

const tabTime = (item) => {
  active.value = item.time;
  chart.applyNewData(item.chart_data)
};
</script>

<template>
  <div class="charts">
    <div class="time">
      <span
        v-for="(item, index) in klineData"
        :key="index"
        @click="tabTime(item)"
        :class="item.time === active ? 'active' : ''"
        >{{ item.time }}</span
      >
    </div>
    <div id="chart_box" style="width: 100%; height: 450px"></div>
  </div>
</template>

<style lang="scss" scoped>
.charts {
  width: auto;
  height: 100vh;
  .time {
    display: flex;
    justify-content: space-around;
    font-size: 14px;
    .active {
      color: #1a89ee;
    }
  }
  #chart_box {
    margin: 15px 0px;
  }
}
</style>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1136058.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

操作系统进程调度算法的模拟实现(c语言版本)

前言&#xff1a;本文旨在分享如何使用c语言对操作系统中的部分进程调度算法进行模拟实现&#xff0c;以及算法描述的讲解&#xff0c;完整代码放在文章末尾&#xff0c;欢迎大家自行拷贝调用 目录 常见的调度算法 数据结构 先来先服务调度算法 算法模拟思路&#xff1a; …

LeetCode刷题---简单组(三)

文章目录 &#x1f352;题目一 20. 有效的括号&#x1f352;解法一&#x1f352;题目二 26. 删除有序数组中的重复项&#x1f352;解法一&#x1f352;题目三 21. 合并两个有序链表&#x1f352;解法一 &#x1f352;题目一 20. 有效的括号 给定一个只包括 ‘(’&#xff0c;‘…

Q-learning智能体

Q-learning智能体 Q-learning算法是一种无模型、在线、非策略的强化学习方法。Q-learning算法是一种基于价值的强化学习算法&#xff0c;它训练一个评价网络去估计回报或未来奖励。对于给定的观测值&#xff0c;智能体选择并输出估计收益最大的动作。 注&#xff1a;Q-learnin…

PL/SQL工具下载地址

https://www.allroundautomations.com/registered-plsqldev/ 选择需要下载的版本即可

Shopee、Lazada卖家不得不看的提升销量技巧,自养号测评打造权重

近年来&#xff0c;大部分虾皮、Lazada卖家开始通过测评补单的方式来提升店铺权重和产品排名&#xff0c;以吸引更多流量。这种方式可以有效提高产品的销售转化率&#xff0c;对店铺的运营起到推动作用。然而&#xff0c;测评补单并非简单的购买过程&#xff0c;其中涉及到许多…

网页提示证书错误 怎么办

随着网站使用SSL证书来加密网站信息&#xff0c;SSL证书的应用也越来越广泛&#xff0c;那么有时候我们进入网站&#xff0c;明明安装了SSL证书&#xff0c;为什么也会提示证书错误呢&#xff1f; SSL证书错误可能是由以下原因导致的&#xff1a; 1. 证书过期&#xff1a; SSL证…

推荐一个假数据接口网页 适用于示例项目

DummyJSON - Fake REST API of JSON data for development

全面分享‘’找不到msvcp140.dll无法继续执行代码修复教程

计算机使用过程中&#xff0c;我们经常会遇到一些错误提示&#xff0c;其中之一就是“msvcp140.dll缺失”。这个错误通常会导致某些应用程序无法正常运行。为了解决这个问题&#xff0c;我们需要找到合适的解决办法。本文将介绍5种解决msvcp140.dll缺失问题的方法&#xff0c;帮…

【实战】硅基物语.AI写作高手:从零开始用ChatGPT学会写作

文章目录 从零开始使用ChatGPT学习写作一、简介二、ChatGPT写作的优势1. 提高效率2. 丰富的素材库3. 语言多样性4. 智能纠错 三、如何使用ChatGPT学习写作1. 确定写作目标和受众2. 了解ChatGPT的原理和特点3. 选择合适的模型和训练数据4. 制定写作计划和流程5. 不断实践和优化 …

管理员|顾问必看!8个Salesforce权限集的最佳实践

Salesforce中的权限一直始终是热门话题。权限集是简档的附加。它们通常具有相同的设置&#xff0c;用于增加用户的权限&#xff0c;使其超过简档提供的权限。可以将简档视为许多用户共有的基本权限集&#xff0c;而权限集是部分用户需要的额外权限。 本篇文章将介绍Salesforce…

Altium Designer元件库封装

资料 立创商城&#xff1a;https://www.szlcsc.com/ 立创EDA&#xff1a;https://pro.lceda.cn/ 库创建项目 项目创建 文件→新建→项目→PCB 新建原理图库 项目&#xff08;反键&#xff09;→添加新的…到工程→Schematic Library 新建PCB库 项目&#xff08;反键&…

【注意!水群需谨慎】手把手教你使用Python实时监测QQ群消息

文章目录 1. 写在前面2. 下载源码构建3. 通过release部署4. 运行本地服务5. 通过API获取数据6. 完整代码实现 1. 写在前面 前段时间写了一个QQ群消息监测的自动化机器人&#xff0c;需求则是加入到某些特定的群组&#xff0c;对群内对话消息进行实时监测与分析。当然&#xff0…

uniapp:谷歌地图,实现地图展示,搜索功能,H5导航

页面展示 APP H5 谷歌地图功能记录,谷歌key申请相对复杂一些,主要需要一些国外的身份信息。 1、申请谷歌key 以下是申请谷歌地图 API 密钥的流程教程: 登录谷歌开发者控制台:打开浏览器,访问 Google Cloud Platform Console。 1、创建或选择项目:如果你还没有创建项目…

智能低代码洪流涌动程序员节 华为云Astro触发1024的乘法效应

从人工智能至量子计算&#xff0c;再到最新的云原生技术&#xff0c;越来越多的荣耀被程序员斩获。今年1024程序员节&#xff0c;华为云Astro向全民致敬&#xff1a;「低代码高产出 拓荒数字化版图——人人皆是程序员」&#xff0c;为全球工程师及开发爱好者呈现智能化开发的魅…

北京筑龙发声炼化企业大会,助力央国企采购供应链数字化转型

10月25日&#xff0c;以“科技创新引领高质量发展&#xff0c;夯实炼化自立自强根基”为主题的第四届炼化企业创新发展大会暨新技术与解决方案交流会”在浙江省宁波市盛大召开。北京筑龙智能化业务部高级咨询顾问王良受邀出席&#xff0c;带来主题为“智能物料——企业采购供应…

FreeRTOS学习day1任务创建(动态创建)

顾名思义 免费的实时操作系统 用法基本和Linux下的多线程编程类似 探索者开发版实验 动态创建4个任务start_task task1 task2 task3 优先级依次为1 2 3 4 &#xff08;注意优先级不能为0,0是空闲任务&#xff09; 我的理解&#xff1a;主线程start_task 主线程 task1 ta…

uniapp接口请求api封装,规范化调用

封装规范和vue中的差不多&#xff0c;都是统一封装成一个request对象&#xff0c;然后在api.js里面调用。 先创建一个utils文件夹&#xff0c;然后里面创建一个request.js&#xff0c;代码如下&#xff1a; export const baseURL 基础url地址const request (options) > …

k8s-----25、资源调度-ResourceQuota资源配额、资源限制limitrange、服务质量QoS

1、ResourceQuota资源配额 1.0 作用 命名空间资源配额。防止公司内部人员对资源的不合理利用。 1.1、为什么需要资源配额 1、作为k8s集群的管理员&#xff0c;知道集群的规模&#xff0c;会合理规划资源&#xff0c;但是使用侧不知道&#xff0c;会导致很多不合理的使用场景…

ffmpeg的下载和编译(vs2022)

感谢大佬的二创,直接提供了sln编译 ffmpeg二创地址 创建如下目录 build存放代码(build最好改成source,因为作者这么建议,编译完才发现) msvc存放第三方依赖的头文件,这里固定叫msvc,因为大佬的sln里查找的路径是这个,不嫌麻烦也可以自己改 下载代码和编译器 下载源码…

Qt5 Python-docx库的使用,Qt python混合编程,qt 读写word,不依赖office

解决方案的选择 参考&#xff1a; https://www.jianshu.com/p/be68884849c3 因为项目要求不能使用模板方案&#xff0c;不能依赖Office&#xff0c;网上找了一些解决方案进行调研&#xff0c;以下几个方案&#xff1a; OpenOffice: 兼容性差&#xff0c;集成调用难度大LibOffi…