使用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时',