uniapp使用ucharts图表及问题汇总

uniapp使用ucharts图表及问题汇总

本文主要描述如何通过组件的方式引入ucharts图表，并汇总了使用过程中踩到的坑，如层级过高问题、默认显示提示框tooltip、提示框显示内容格式化等等。

一、引入资源

官方示例代码

1.引入相关组件

2.引入jdk

3.修改qiun-data-charts.vue下sdk引入路径

二、基本使用

<qiun-data-charts type="demotype" :chartData="chartData" />

chartData: {
  categories: ['10-07', '10-08', '10-09', '10-10', '10-11', '10-12'],
  series: [{
    name: '成交量A',
    color: '#1890FF',
    data: [0, 10, 20, 30, 40, 50]
  }]
}

效果：

三、问题汇总

1.图表层级过高导致真机显示异常

解决：
开启canvas2d模式:canvas2d="true"

<qiun-data-charts type="demotype" :canvas2d="true" :chartData="chartData" />

注：设置后微信开发者工具显示不正确，但真机显示是正常的

2.x轴格式化

添加图表配置:opts="opts"

<qiun-data-charts type="demotype" :canvas2d="true" :opts="opts" :chartData="chartData" />

opts: {
  xAxis: {
    format: 'xAxisDemo3'
  }
}

ucharts配置文件添加对应配置
src/js_sdk/config-ucharts.js:

效果：

3.提示框显示单位

原理同上

设置提示框显示格式函数tooltipFormat="tooltipTemp1"

<qiun-data-charts type="demotype" tooltipFormat="tooltipTemp1" :canvas2d="true" :opts="opts" :chartData="chartData" />

添加数据列对应的单位：

ucharts配置文件添加对应配置
src/js_sdk/config-ucharts.js:

效果：

4.默认显示提示框tooltip

在ucharts问答社区中找到如下条目：

示例代码

解决：
给图表添加渲染完成事件@complete="completeHandler"

<qiun-data-charts type="demotype" tooltipFormat="tooltipTemp1" :canvas2d="true" :opts="opts" :chartData="chartData" @complete="completeHandler" />

completeHandler(e) {
  const { series, categories } = e.opts
  const index = series[0].data ? series[0].data.length - 1 : 0
  const textList = series.map(el => {
    return {
      text: `${categories[index]} ${el.name}: ${el.data[index]}${el.unit}`,
      color: el.color
    }
  })
  
  uCharts.instance[e.id].showToolTip(
    { changedTouches: [{ x: 0, y: 100 }] },
    {
      index: index,
      textList: textList
    }
  );
}

效果：

5.循环生成图表设置相对定位，点击图表提示框不显示

<view v-for="(item, index) in list" :key="item.id">
  <view class="title">图表{{ index + 1 }}</view>

  <view class="charts-box">
    <qiun-data-charts :key="item.id" :canvas2d="true" type="demotype" tooltipFormat="tooltipTemp1" :opts="opts" :chartData="item.data" @complete="completeHandler" />
  </view>
</view>

.charts-box {
  position: relative;
  width: 100%;
  height: 400rpx;
}

解决：

去掉position: relative;即可

本文demo源码