>[danger] ## 各位遇到问题请先参考以下问题,如果仍不能解决,请到[uni-app插件市场](http://ext.dcloud.net.cn/plugin?id=271),或者加入QQ交流群:371774600探讨。 >[danger] ## **图表尺寸与预期不符合,请检查css样式与cWidth和cHeight的值是否相等** >[danger] ## **如开启滚动条或者使用ToolTip事件不起作用,请检查canvas标签是否绑定了touch事件** >[danger] ## **比较明显的bug是不会有的,遇到问题请先对照demo查摆自己的代码** ## **图表不显示问题** * 常见于没有报错的情况下的v-if,v-show,tab切换,组件初始化,点击一下才显示,去掉动画不显示,加上动画显示,页面初始化不显示 **原因:** 不知道你有没有发现以上的情况都有一个共同点,就是页面还没有构建完成你就渲染图表,于是就表出不来,打个比方就是,我让你在画板上作画,画板没有到你手上,请问你要怎么画,当然是等画板到你手上了才能画。 **解决方法:** 1.在mounted()或者this.$nextTick(()\=>{})(说明canvas标签已经渲染,即画板已经拿到手上了)里面请求数据,拿到数据以后再渲染图表。 2.初始化加延时,理论上延时给的足够长,图表能够渲染出来。 ## **初始显示tooltip** **解决方法:** 自定义默认选中tooltip的功能(详见demo曲线图pages/basic/line/curve.vue) 自定义tooltip文案的功能(详见demo曲线图pages/basic/line/curve.vue)。 demo引入地址:[https://ext.dcloud.net.cn/plugin?id=271](https://ext.dcloud.net.cn/plugin?id=271) ## **运行到微信开发者工具tojson is undefined报错** **解决方法:** 这是微信开发者工具的bug,请回退微信开发者工具到2020年6月那个版本或之前版本(截止2020.11.10未修复) ## **format问题** * y轴文字format ``` yAxis: { data:[ format: val => { return val.toFixed(2); //return啥就显示啥,2是保留两位小数 }, ] }, ``` * dataLabel文字format(pie,ring之类的) ``` //自定义文案示例,需设置format字段 for(let i = 0 ;i < Ring.series.length;i++){ Ring.series[i].format=()=>{ return Ring.series[i].name+Ring.series[i].data //return啥就显示啥,根据自己需求修改 }; } ``` * dataLabel文字format(多个series) ``` //自定义文案示例,需设置format字段 for(let i=0;i<data.series.length;i++){ for(let j=0;j<data.categories.length;j++){ data.series[i].format=()=>{ return data.series[i].data[j]+'%' //return啥就显示啥,根据自己需求修改 } } } ``` ## **通用问题** * 如果用在您的项目上图表不显示,请先运行demo页面,如果demo页面也无法显示,请查看全局样式是否定义了**canvas的样式**,如有请取消。 * 如果实例化图表后,发现图表位置不正确,**请检查css样式以及cWidth和cHeight的值是否相等**,很多朋友修改画布大小时,忽略的这个问题,导致图表显示不完整。 * 图表**背景颜色**问题,很多朋友设置图表背景颜色时候,只修改了view和canvas的css,忘记了修改实例化参数中的`background:'#FFFFFF'`,导致图表画板右侧有一道白条(这个是图表配置中的右边距),所以特修改了demo中的柱状图的背景颜色供大家参考。 * 如果将canvas放在多级<view>组件下,遇到ToolTip不显示或点击区域不正确,请在`touch`事件中增加以下代码解决。 ```javascript //#ifdef MP-ALIPAY e.mp.currentTarget.offsetTop+=uni.upx2px(510); //#endif ``` >[warning] `uni.upx2px(510);`是canvas组件的上级<view>组件的高度 ## **支付宝问题** 兼容支付宝小程序写法,请在模板中使用条件编译,请参考如下代码 ``` <!--#ifdef MP-ALIPAY --> <canvas canvas-id="canvasColumn" id="canvasColumn" class="charts" :style="{'width':cWidth*pixelRatio+'px','height':cHeight*pixelRatio+'px', 'transform': 'scale('+(1/pixelRatio)+')','margin-left':-cWidth*(pixelRatio-1)/2+'px','margin-top':-cHeight*(pixelRatio-1)/2+'px'}"></canvas> <!--#endif--> <!--#ifndef MP-ALIPAY --> <canvas canvas-id="canvasColumn" id="canvasColumn" class="charts""></canvas> <!--#endif--> ``` * 在高分屏模式下,如果发现图表已显示,但位置不正确,请检查上级`view`容器的`样式`,为了解决高分屏canvas模糊问题,使用了css的`transform`,所以请修改上级样式使canvas容器缩放至相应位置。 >[danger] # 支付宝小程序IDE中不显示,但运行到真机是可以显示的,请真机测试。 ## **组件问题** * 很多小伙伴们自行把本插件做成组件来调用,做成组件需要注意,如果涉及到v-if切换显示图表组件,第二次可能会变空白,这里有两个建议: 1、建议用v-show替代v-if切换显示图表组件。 2、建议参考demo组件引用方法,在demo的基础上改造您的专有组件。