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

10 篇文章 0 订阅

环境

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>
  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
Vue3和Pinia是一种组合使用的方式,用于实现Vue应用程序的状态管理。Pinia是一个状态管理工具,类似于Vuex,但提供了更简单和更灵活的语法。它支持Vue2和Vue3,并且是类型安全的,支持TypeScript。Pinia可以创建多个全局仓库,而不需要像Vuex那样嵌套模块,使得状态管理的结构更加简单和清晰。相比于Vuex,Pinia的API更少,使用起来更加简单。Pinia的大小仅有1KB,非常轻量级。你可以通过引入Pinia和创建Pinia实例来开始使用Pinia。同时,Pinia还支持数据持久化插件,可以帮助你实现数据的持久化存储。你可以在Pinia的官方文档中找到更详细的使用说明和示例代码。\[2\]\[3\] #### 引用[.reference_title] - *1* [一步步打造最新前端框架组合 —— vite+vue3+pinia+vue-router@4+setup+ts](https://blog.csdn.net/jmszl1991/article/details/122825151)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* *3* [Vue3+Pinia+数据持久化 20分钟快速上手](https://blog.csdn.net/zhgweb/article/details/129708483)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

亦简_yz

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值