使用KLineChart完成K线图制作,完成效果:
1、安装KLineChart
npm install klinecharts
2、页面中使用
<template>
<view class="index">
<!-- 上方选项卡 -->
<view class="kline-tabs">
<view :style="{color: current==item.value?'#FDD782':'#FFFFFF'}" v-for="(item,index) in tabs" :key="index" @click="tabsClick(index)">{
{item.name}}</view>
</view>
<div class="chart" id="chart"/>
<!-- 下方选项卡 -->
<view class="kline-botcard">
<view :style="{color: screenIndex==index?'#FDD782':'#4B706C'}" v-for="(item,index) in screen" :key="index"
@click="screenClick(index)">{
{item.name}}</view>
</view>
</view>
</template>
<script>
var list = []
import {
init, dispose } from 'klinecharts'
export default {
data() {
return {
symbol:'',
current:'1m',
tabs:[
{
name:'1分',value:'1m'},
{
name:'5分',value:'5m'},
{
name:'15分',value:'15m'},
{
name:'30分',value:'30m'},
{
name:'1时',value:'1h'},
{
name:'4时',