1.开启 2d 渲染
'线上运行开启 canvas2d 可以解决图表显示问题'
<qiun-data-charts canvas2d .../>
canvasId 可以不传,官方内置生成随机字符串id的方法
注:
开启 2d 后,不能真机调试,只能开发者工具调试或扫二维码"预览"。
开启 2d 后,模拟器出现显示穿透的问题无需理会。
若调试时需要看到具体效果可先关闭 2d,调试结束后再开启便可。
2.开启横向触摸拖拽
'将 ontouch 设为true'
<qiun-data-charts ontouch .../>
在 opts 中设置
opts: {
enableScroll: true
}
'并且在 xAxis 中手动设置 itemCount'
xAxis: {
itemCount: 6,
}
超过一屏的图标就可以横向滚动拖拽了
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,
}
}
'自定义图例样式需要先关闭原先图例,然后自己画相关样式'
legend: {
show: false,
},