小编点评

**1.开启 2d 渲染线上运行开启 canvas2d** * 开启 2d 后，不能真机调试，只能开发者工具调试或扫二维码\"预览\"。 * 开启 2d 后，模拟器出现显示穿透的问题无需理会。 **2.开启横向触摸拖拽** * `ontouch` 设为 `true`。 * 在 `opts` 中设置 `enableScroll: true`。 **3.动态渲染** * `opts` 和 `chartsData` 的变化可以动态渲染。 * `update` 属性防止数据每次更新的时候，让整个图表重新渲染。 * 两种方法实现动态渲染： * 使用 `watch` 中的 `type` 属性监听类型变化，并在 `render` 方法中执行重新渲染。 * 使用 `v-if` 来重现渲染画布，并根据 `isUpdate` 属性动态控制其显示或隐藏。 **4.修改图例** * 修改图例的位置 `opts` 中的 `padding` 属性。 * 设置图表 legend 的边距 `legend.margin`。 * 如果需要自定义图例，需要先关闭原先图例，然后自己画相关样式 `legend: { show: false, },`。

正文

1.开启 2d 渲染

线上运行开启 canvas2d 可以解决图表显示问题
<qiun-data-charts  canvas2d .../>
canvasId 可以不传，官方内置生成随机字符串id的方法

注：
    开启 2d 后,不能真机调试,只能开发者工具调试或扫二维码"预览"。
    开启 2d 后,模拟器出现显示穿透的问题无需理会。
    调试时若需要看到具体效果可先关闭 2d。

2.开启横向触摸拖拽

将 ontouch 设为true
<qiun-data-charts  ontouch .../>

 然后在opts 中设置
 opts: {
   enableScroll: true
}

3.动态渲染

(1) opts 和 chartsData 的 变化可以动态渲染
要将 opts 中的 update 为 true

原因是官方源码中设定了update属性
防止数据每次更新的时候，让整个图表重新渲染

(2) type 类型(图标类型)的变化有两个方法
一是修改源码：监听 type 类型，执行重新渲染画布
在qiun-data-charts.vue 的 watch 中
type(newVal, oldVal) {
 if (newVal != oldval) {
  this.checkData(this.drawData);
 }
}

二是用 v-if 来重现渲染画布
<view v-if="isUpdate">
  <qiun-data-charts :chartData="chartData" :type="selectedType"  .... />
</view>

watch:{
selectedType(newVal, oldVal) {
   if (newVal != oldVal) {
    this.isUpdate = true
    this.chartData = {
    ...this.chartData,
    _changeTime: +new Date(),
   }
  }else{
    this.isUpdate = false
  }
 }
}

4.修改图例

单纯修改图例位置
opts: {
    padding: [20,0,0,0],//画布填充边距
    legend: {
      margin: 10, // 图例外侧填充边距，默认为5
    }
}

自定义图例的话需要先关闭原先图例，然后自己画相关样式
legend: {
  show: false,
 },