# k线无感刷新

**Repository Path**: JerryCodeCloud/k-line-seamless-refresh

## Basic Information

- **Project Name**: k线无感刷新
- **Description**: uniapp开发微信小程序 实现左滑无感刷新k线数据
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-03-26
- **Last Updated**: 2025-03-26

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 场景介绍：

最近使用 uniapp 开发模拟交易类微信小程序，需要实现日 k 线、周 k 线等，考虑到单支股票的 k 线数据比较多，于是决定使用数据分页的形式进行展示。当用户右滑时平滑加载下一页数据，实现用户无感加载数据。

---

# 效果图

![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/3c368bbd230a4389bbb67b109d97c01e.gif#pic_center)

---

# 实现步骤

## 1、引入 echarts 到项目中

- 这里使用 Uniapp 插件市场提供的 echarts 插件，下载并放入自己小程序项目文件夹内。[插件市场地址](https://ext.dcloud.net.cn/plugin?id=4899)、[码云地址](https://gitee.com/liangei/lime-echart)
  ![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/da2c0ab6b25a4d26ade2b16a1d240543.jpeg#pic_center)
- 将 lime-echart 中的相关组件拷贝到自己的项目中，并在百度 echarts 官网自由选择所需图表、坐标系、组件进行打包下载，可以减少代码体积。[在线定制](https://echarts.apache.org/zh/builder.html), 下载完成之后将 echarts.min.js 放入 static 文件夹内。
  ![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/f47ee07805834b1bbc3388a1dd5ece1d.jpeg#pic_center)

## 2、解决方案

思路是后端分页数据一页是 30 条（可根据自己的项目情况而定），但是咱们实际展示在页面上的数据可以设置少于 30 条，如 21 条(整除，便于设置百分比)。这样子的话咱们就可以留一部分数据在左端不做展示，方便向右滑动。
这里咱们需要知道 echarts 的两个配置项

- dataZoom-inside.start：
  数据窗口范围的起始百分比。范围是：0 ~ 100。表示 0% ~ 100%。
- dataZoom-inside.end：
  数据窗口范围的结束百分比。范围是：0 ~ 100。

`dataZoom-inside.start `和 `dataZoom-inside.end` 共同用百分比的形式定义了数据窗口范围。dataZoom-inside 有多个决定数据窗口返回的字段，这里取 start 和 end 为了方便后面监听 datazoom 时进行加载数据的操作。

根据`dataZoom-inside.start `和 `dataZoom-inside.end`的特性，设置窗口数据只展示 21 条，则 start 的值是 （30-21）/ 30 \* 100 也就是 30，end 的值设置为 100，表示当前页面展示的数据返回是 30%-100%

```js
let pageSise = 30 // 每页数量
const visiblePageSize = 21 // 实际展示的条数
// ...
dataZoom: [
  {
    xAxisIndex: [0, 1],
    type: 'inside', // 设置为内置型 dataZoom
    start: ((pageSise - visiblePageSize) / pageSise) * 100, // 设置数据窗口开始的位置
    end: 100 //
  }
]
// ...
```

这时页面可以向右侧滑动，通过监听 datazoom 事件，当监听到 start 小于等于 15 的时候提前请求接口，加载下一页的数据，做到无感刷新

```js
_myChart.on('datazoom', async function (event) {
  start = event.batch[0].start
  if (event.batch[0].start <= 15) {
    if (isRequest) return
    isRequest = true
    await getEchartData()
    let dates = [],
      kValues = [],
      barValues = []
    for (const item of echartList.value) {
      dates.push(item[0])
      kValues.push(item.slice(1, 5))
      barValues.push({
        value: item[5],
        itemStyle: {
          color: item[1] > item[2] ? downColor : upColor // 根据开盘价和收盘价的关系确定颜色
        }
      })
    }
    _myChart.setOption({
      xAxis: [{ data: dates }, { data: dates }],
      series: [
        {
          data: kValues
        },
        { data: barValues }
      ],
      dataZoom: [
        {
          start: start + (pageSise / echartList.value.length) * 100,
          end: start + ((visiblePageSize + pageSise) / echartList.value.length) * 100
        }
      ]
    })
    isRequest = false
  }
})
```

---

# 源码分享：

有兴趣的同学可以下载完整代码进行体验 [gitlab 地址](https://gitee.com/JerryCodeCloud/k-line-seamless-refresh.git)

```js
<script setup>
import LEchart from '@/components/LimeEchart'
const echarts = require('../../static/echarts.min')
const ROOT_PATH = 'https://echarts.apache.org/examples'
const ALL_DATA = ref([])
const PAGE_SIZE = 30
const VISIBLE_RATE = 0.7
const klineTypes = ref([{ label: '日K', value: 'DAY' }])
const currentKline = ref('DAY')

const chartRef = ref(null)
const upColor = '#00da3c'
const downColor = '#ec0000'
const echartList = ref([])
let pageSise = PAGE_SIZE
let num = 1
const size = PAGE_SIZE
const visiblePageSize = Math.floor(PAGE_SIZE * VISIBLE_RATE) // 实际展示的条数
let _myChart = null
let isRequest = false
let start = undefined
async function onChartFinished() {
  await fetchData()
  await getEchartData()
  const xAxisData = echartList.value.map(item => item[0])
  const option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        link: { xAxisIndex: 'all' }, //上下划过分开展示还是一起展示
        label: {
          shadow: 'transparent'
        }
      },
      textStyle: {
        color: '#000',
        textShadowColor: 'transparent', //文字块背景阴影颜色
        textShadowBlur: 10 //文字块的背景阴影长度
      },
      formatter: function (params) {
        //修改鼠标划过显示为中文
        if (params[0].componentSubType == 'candlestick') {
          //先划过蜡烛图
          var params1 = params[0] //开盘收盘最低最高数据汇总
          var params2 = params[1].data.value //成交量数据
        } else if (params[0].componentSubType == 'bar') {
          //先划过成交量
          var params1 = params[1] //开盘收盘最低最高数据汇总
          var params2 = params[0].data.value //成交量数据
        }
        var currentItemData = params1.data //k线数据
        return (
          params1.name +
          '\n' +
          '开盘价:' +
          currentItemData[1] +
          '\n' +
          '收盘价:' +
          currentItemData[2] +
          '\n' +
          '最低价:' +
          currentItemData[3] +
          '\n' +
          '最高价:' +
          currentItemData[4] +
          '\n' +
          '成交量:' +
          params2
        )
      }
    },

    axisPointer: {
      link: { xAxisIndex: 'all' }, //整体划过还是单个划过
      type: 'line',
      label: {
        backgroundColor: '#F2F2F2',
        shadowColor: 'transparent',
        shadowBlur: 10,
        color: '#000',
        textShadowColor: 'transparent', //文字块背景阴影颜色
        textShadowBlur: 10 //文字块的背景阴影长度
      }
    },

    grid: [
      {
        top: '10%',
        left: '15%',
        right: '8%',
        height: '50%'
      },
      {
        left: '18%',
        right: '8%',
        top: '74%',
        height: '16%'
      }
    ],
    xAxis: [
      {
        type: 'category',
        data: xAxisData,
        boundaryGap: false,
        axisLine: { onZero: false, show: false },
        axisTick: { show: false },
        splitLine: { show: false },
        min: 'dataMin',
        max: 'dataMax',
        axisPointer: {
          z: 100
        }
      },
      {
        type: 'category',
        gridIndex: 1,
        data: xAxisData,
        boundaryGap: false,
        axisLine: { onZero: false, show: false },
        axisTick: { show: false },
        splitLine: { show: false },
        axisLabel: { show: false },
        min: 'dataMin',
        max: 'dataMax'
      }
    ],
    yAxis: [
      {
        scale: true,
        splitArea: {
          show: false
        },
        splitLine: {
          show: true,
          lineStyle: {
            type: 'dashed'
          }
        }
      },
      {
        scale: false,
        gridIndex: 1,
        splitNumber: 2,
        axisLabel: { show: false },
        axisLine: {
          show: false
        },
        axisTick: { show: false },
        splitLine: { show: false }
      }
    ],
    series: [
      {
        name: 'K线',
        type: 'candlestick',
        data: echartList.value.map(item => item.slice(1, 5)),
        itemStyle: {
          color: upColor,
          color0: downColor,
          borderColor: undefined,
          borderColor0: undefined
        }
      },

      {
        name: '成交量',
        type: 'bar',
        xAxisIndex: 1,
        yAxisIndex: 1,
        data: echartList.value.map(item => ({
          value: item[5],
          itemStyle: {
            color: item[1] > item[2] ? downColor : upColor // 根据开盘价和收盘价的关系确定颜色
          }
        }))
      }
    ],

    dataZoom: [
      {
        xAxisIndex: [0, 1],
        type: 'inside', // 设置为内置型 dataZoom
        start: ((pageSise - visiblePageSize) / pageSise) * 100, //
        end: 100 //
      }
    ]
  }
  if (!chartRef.value) return
  _myChart = await chartRef.value.init(echarts)
  _myChart.setOption(option)
  _myChart.on('datazoom', async function (event) {
    start = event.batch[0].start
    if (event.batch[0].start <= 15) {
      if (isRequest) return
      isRequest = true
      await getEchartData()
      let dates = [],
        kValues = [],
        barValues = []
      for (const item of echartList.value) {
        dates.push(item[0])
        kValues.push(item.slice(1, 5))
        barValues.push({
          value: item[5],
          itemStyle: {
            color: item[1] > item[2] ? downColor : upColor // 根据开盘价和收盘价的关系确定颜色
          }
        })
      }
      _myChart.setOption({
        xAxis: [{ data: dates }, { data: dates }],
        series: [
          {
            data: kValues
          },
          { data: barValues }
        ],
        dataZoom: [
          {
            start: start + (pageSise / echartList.value.length) * 100, // 之前剩余的部分加上 新增加的数据所占的百分比
            end: start + ((visiblePageSize + pageSise) / echartList.value.length) * 100 // 之前剩余的部分加上 新增加的数据 + 页面上显示的所占的百分比
          }
        ]
      })
      isRequest = false
    }
  })
}

function fetchData() {
  return new Promise((resolve, reject) => {
    uni.showLoading({
      title: '加载中',
      mask: true
    })
    uni.request({
      url: ROOT_PATH + '/data/asset/data/stock-DJI.json',
      method: 'GET',
      timeout: 90000,
      dataType: 'json',
      async success(response) {
        uni.hideLoading()
        if (response.statusCode === 200) {
          ALL_DATA.value = response.data.reverse()
          resolve()
        } else {
          reject(response)
        }
      },
      fail(response) {
        uni.hideLoading()
        uni.showToast({
          noConflict: true,
          title: '系统出了小差，请稍后再试~~~',
          icon: 'none'
        })
        reject(response)
      }
    })
  })
}
// 这里模拟分享页
function getEchartData() {
  return new Promise((resolve, reject) => {
    if (echartList.value.length >= ALL_DATA.length) {
      return resolve()
    }
    const start = (num - 1) * size
    const end = start + size
    const data = ALL_DATA.value.slice(start, end)
    echartList.value = [...data, ...echartList.value]
    num++
    pageSise = data.length
    resolve()
  })
}
</script>
```

---