uni-app(vue3.x版本) 实现k线图(kline) 支持h5/安卓/ios

uni-app 的插件市场有 https://ext.dcloud.net.cn/plugin?id=4591
因为我之前用的kline是使用klineChart https://klinecharts.com/zh-CN
config也配置好了,所有就没有使用插件市场的kline,接着使用klineChart

第一步 安装 klineChart

npm install klinecharts --save

第二步 在页面中绘制元素

<template>
    <view id="chart"></view>
</template>

第三步 将容器变canvas

注:因为uni-app 的app端是没有document的对象,且 <template>标签下 需要一个最大的标签包裹起来 不然会出现问题
(H5端着没有问题 可以参考:https://www.jianshu.com/p/869684c81e89 实现)
所以绘制 uni-app 采用的是 renderjs
官方文档:
https://uniapp.dcloud.net.cn/component/canvas.html#canvas
https://uniapp.dcloud.net.cn/tutorial/renderjs.html

// klineConfig.js
export const config = {
  // 网格线
  grid: {
    show: true,
    // 网格水平线
    horizontal: {
      show: true,
      size: 1,
      color: '#D2C7F4',
      // 'solid'|'dash'
      style: 'dash',
      dashValue: [2, 2]
    },
    vertical: {
      show: true,
      size: 1,
      color: '#D2C7F4',
      // 'solid'|'dash'
      style: 'dash',
      dashValue: [2, 2]
    }
  },
  // 蜡烛图
  candle: {
    // 蜡烛图上下间距，大于1为绝对值，大于0小余1则为比例
    margin: {
      top: 0.2,
      bottom: 0.1
    },
    // 蜡烛图类型 'candle_solid'|'candle_stroke'|'candle_up_stroke'|'candle_down_stroke'|'ohlc'|'area'
    type: 'candle_solid',
    // 蜡烛柱
    bar: {
      upColor: '#55D252',
      downColor: '#F0665D',
      noChangeColor: '#888888'
    },
    // 面积图
    area: {
      lineSize: 2,
      lineColor: '#2196F3',
      value: 'close',
      backgroundColor: [{
        offset: 0,
        color: 'rgba(33, 150, 243, 0.01)'
      }, {
        offset: 1,
        color: 'rgba(33, 150, 243, 0.2)'
      }]
    },
    // 标记
    priceMark: {
      show: true,
      // 最高价标记
      high: {
        show: true,
        color: '#D9D9D9',
        textMargin: 5,
        textSize: 10,
        textFamily: 'Helvetica Neue',
        textWeight: 'normal'
      },
      // 最低价标记
      low: {
        show: true,
        color: '#D9D9D9',
        textMargin: 5,
        textSize: 10,
        textFamily: 'Helvetica Neue',
        textWeight: 'normal'
      },
      // 最新价标记
      last: {
        show: true,
        upColor: '#26A69A',
        downColor: '#EF5350',
        noChangeColor: '#888888',
        line: {
          show: true,
          // 'solid'|'dash'
          style: 'dash',
          dashValue: [4, 4],
          size: 1
        },
        text: {
          show: true,
          size: 12,
          paddingLeft: 2,
          paddingTop: 2,
          paddingRight: 2,
          paddingBottom: 2,
          color: '#FFFFFF',
          family: 'Helvetica Neue',
          weight: 'normal',
          borderRadius: 2
        }
      }
    },
    // 提示
    tooltip: {
      // 'always' | 'follow_cross' | 'none'
      showRule: 'none',
      // 'standard' | 'rect'
      showType: 'standard',
      labels: ['时间', '开', '收', '高', '低', '成交量'],
      values: null,
      defaultValue: 'n/a',
      rect: {
        paddingLeft: 0,
        paddingRight: 0,
        paddingTop: 0,
        paddingBottom: 6,
        offsetLeft: 8,
        offsetTop: 8,
        offsetRight: 8,
        borderRadius: 4,
        borderSize: 1,
        borderColor: '#3f4254',
        backgroundColor: 'rgba(17, 17, 17, .3)'
      },
      text: {
        size: 12,
        family: 'Helvetica Neue',
        weight: 'normal',
        color: 'red',
        marginLeft: 8,
        marginTop: 6,
        marginRight: 8,
        marginBottom: 0
      }
    }
  },
  // x轴
  xAxis: {
    show: true,
    height: null,
    // x轴线
    axisLine: {
      show: true,
      color: '#C583ED',
      size: 1
    },
    // x轴分割文字
    tickText: {
      show: true,
      color: '#A3A3A3',
      family: 'Helvetica Neue',
      weight: 'normal',
      size: 12,
      paddingTop: 3,
      paddingBottom: 6
    },
    // x轴分割线
    tickLine: {
      show: false,
      size: 1,
      length: 3,
      color: '#888888'
    }
  },
  // y轴
  yAxis: {
    show: true,
    // 'left' | 'right'
    position: 'right',
    // 'normal' | 'percentage' | 'log'
    type: 'normal',
    inside: true,
    reverse: false,
    // y轴线
    axisLine: {
      show: false,
      color: '#D2C7F4',
      size: 1
    },
    // y轴分割文字
    tickText: {
      show: true,
      color: '#A3A3A3',
      family: 'Helvetica Neue',
      weight: 'normal',
      size: 12,
      paddingLeft: 3,
      paddingRight: 6
    },
    // y轴分割线
    tickLine: {
      show: false,
      size: 1,
      length: 3,
      color: '#888888'
    }
  },
  // 十字光标
  crosshair: {
    show: true,
    // 十字光标水平线及文字
    horizontal: {
      show: true,
      line: {
        show: true,
        // 'solid'|'dash'
        style: 'dash',
        dashValue: [4, 2],
        size: 1,
        color: '#888888'
      },
      text: {
        show: true,
        color: '#D9D9D9',
        size: 12,
        family: 'Helvetica Neue',
        weight: 'normal',
        paddingLeft: 2,
        paddingRight: 2,
        paddingTop: 2,
        paddingBottom: 2,
        borderSize: 1,
        borderColor: '#505050',
        borderRadius: 2,
        backgroundColor: '#505050'
      }
    },
    // 十字光标垂直线及文字
    vertical: {
      show: true,
      line: {
        show: true,
        // 'solid'|'dash'
        style: 'dash',
        dashValue: [4, 2],
        size: 1,
        color: '#888888'
      },
      text: {
        show: true,
        color: '#D9D9D9',
        size: 12,
        family: 'Helvetica Neue',
        weight: 'normal',
        paddingLeft: 2,
        paddingRight: 2,
        paddingTop: 2,
        paddingBottom: 2,
        borderSize: 1,
        borderColor: '#505050',
        borderRadius: 2,
        backgroundColor: '#505050'
      }
    }
  }
}

// 将第二步变为
<template>
 <!-- 
  id: id值
  :newest : 最新值
  :history : 历史数据
  :change:newest : 监听最新值是否变化 (renderScript 对应下边 script 标签上的 module="renderScript")
  :change:history : 监听历史数据是否变化 (renderScript 对应下边 script 标签上的 module="renderScript")
 -->
    <view 
           id="chart"   
           :newest="klineNewest" 
           :history="klineHistory" 
           :change:newest="renderScript.updateNewest" 
           :change:history="renderScript.updateHistory">
    </view>
</template>
<script setup>
  import { onMounted,ref } from 'vue'
  import { init } from 'klinecharts' 
  // 历史
  const klineHistory = ref([])
  // 最新
  const klineNewest = ref({})
 // 获取kline 历史数据
  const getKlineHistory = ()=>{
   //http请求 略
    klineHistory .value = data
  }
  // 获取kline 最新数据 (webscoket)
  const webscoketKline = () => {
   //scoket请求 略
    klineNewest.value = data
  }
  onMounted(()=>{
    kline = init('chart', config)
  }) 
</script>
<!-- script  setup 不支持 lang="renderjs" 后也不支持uni-app 的各种方法(uni.xxx) -->
<script module="renderScript" lang="renderjs">
    import { config } from './klineConfig.js'
    import klinecharts from 'klinecharts'
    var kline
    export default {
        mounted() {
            this.initChart()
        },
        methods: {
            initChart() {
                kline = klinecharts.init('chart')
                kline.setStyleOptions(config)
                kline.createTechnicalIndicator('MA', false, { id: 'candle_pane'})
                kline.setStyleOptions({
                    technicalIndicator: { tooltip: { showRule: 'none'}}
                })
            },
            //监听最新值变化 注: kline值可能还没有  所以需要 kline?.
            updateNewest(newValue, oldValue, ownerInstance, instance) {
                // 添加最新数据 
                kline?.updateData(newValue)
            },
           //监听历史数据变化  注: kline值可能还没有  所以需要 kline?.
            updateHistory(newValue, oldValue, ownerInstance, instance) {
                // 添加历史数据 
                kline?.applyNewData(newValue)
            }
        }
    }
</script>