klineChart的使用

于慨

已于 2025-03-21 19:42:30 修改

阅读量297

点赞数 3

文章标签：前端 javascript 开发语言

于 2025-03-21 14:41:51 首次发布

本文链接：https://blog.youkuaiyun.com/ike_yu/article/details/146419122

版权

项目中目前有klineChart配置如下所示：

this.klineData = init(this.$refs.klineDom, {
        styles: {
          grid: {
            show: false,
            // 网格水平线
            horizontal: {
              show: false,
              size: 1,
              color: '#989fb1',
              style: 'solid',
              dashValue: [2, 2],
            },
            // 网格垂直线
            vertical: {
              show: false,
              size: 1,
              color: '#989fb1',
              style: 'solid',
              dashValue: [2, 2],
            },
          },
          candle: {
            priceMark: {
              high: {
                color: '#FFFFFF',
              },
              low: {
                color: '#FFFFFF',
              },
            },
            // 蜡烛图上下间距，大于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: '#05C48E',
              downColor: '#DF473D',
              noChangeColor: '#888888',
            },
            area: {
              lineColor: '#FFFFFF',
              style: 'fill',
            },
          },
          yAxis: {
            show: true,
            axisLine: {
              show: true,
              color: '#989fb1',
              size: 1,
            },
          },
          xAxis: {
            show: true,
            axisLine: {
              show: true,
              color: '#989fb1',
              size: 1,
            },
          },
          separator: {
            size: 1,
            color: '#989fb1',
            fill: true,
          },
          technicalIndicator: {
            line: {
              size: 1,
              colors: ['#B3994A', '#C9C3C8', '#A98946', '#7D4F80'],
            },
          },
        },
      })
      this.klineData.createIndicator('MA', false, {
        id: 'candle_pane',
      })
      this.klineData.setLocale('zh-HK')
      this.paneId = this.klineData.createIndicator(this.lineValue, false, {
        id: 'pane_1',
        height: 100,
        dragEnabled: true,
      })
      this.klineData.setLocale(
        global.locale.value === 'zhHK' ? 'zh-CN' : 'en-US',
      )

      //  Y轴价格展示小数位
      const val = this.data[0]?.close
      const precision = String(val).split('.')[1]?.length
      this.klineData.setPriceVolumePrecision(precision, 2) //pricePrecision, volumePrecision
      this.klineData.applyNewData(this.data) //设置数据
      // this.klineData.setMaxOffsetLeftDistance('20px');
      addMulch(this.klineData)

平均收盘价

图中 “MA (5,10,30,60)” 是金融分析中常用的 ** 移动平均线（Moving Average）** 指标参数设置，括号内数字代表计算移动平均线的周期，具体含义如下：

MA5：计算过去 5 个周期（如 5 分钟、5 小时、5 日等，取决于图表时间框架）的收盘价平均值，反映短期价格趋势。
MA10：计算过去 10 个周期的收盘价平均值，趋势判断周期比 MA5 更长，稳定性更高。
MA30：计算过去 30 个周期的收盘价平均值，用于观察中期价格趋势。
MA60：计算过去 60 个周期的收盘价平均值，体现长期价格趋势，对大周期走势的判断更具参考性。

这些不同周期的移动平均线叠加在价格走势图中，帮助投资者对比短期、中期、长期的价格趋势，辅助交易决策（如均线金叉、死叉信号等）。

图中 VOL(5,10,20) 是金融分析中的成交量指标，具体含义如下：

VOL：代表成交量（Volume），显示标的资产在一定时间内的成交数量。
(5,10,20)：表示计算成交量移动平均线的周期，即分别计算过去 5 个周期、10 个周期、20 个周期 的平均成交量，对应图中的 MA5、MA10、MA20。这些移动平均线用于观察成交量的趋势变化，辅助判断市场买卖力量的强弱（如成交量均线向上，可能反映资金持续流入；向下则可能显示资金流出）。

组装给kcharts的数据

{
    "close": 79304.98,
    "high": 79729.73,
    "low": 78409.4,
    "open": 78756.98,
    "timestamp": 1741639500000,
    "volume": 63295840.2260554
}