| 属性 | 类型 | 默认 | 说明 | | --- | :-: | :-: | --- | | opts | Object | | | | opts.$this | Object | required | this实例组件内使用图表,必须传入this实例 | | opts.canvas2d | Boolean | 默认false | 开启canvas2d模式,canvas组件需要定义id和type="2d",默认为false | | opts.context | Object | | 配合canvas2d模式,上面参数为true时,必须传入context | | opts.canvasId | String | required | 页面组件canvas-id,支付宝中为id | | opts.colors | Array | | 图表配色方案,不传则使用系统默认配置,map区域的颜色也是在这里配置,例如['#1890ff', '#2fc25b', '#facc14', '#f04864', '#8543e0', '#90ed7d'] | | opts.width | Number | required | canvas宽度,单位为px,支付宝高分屏需要乘像素比,使用uni.upx2px(750)自适应全屏 | | opts.height | Number | required | canvas高度,单位为px,支付宝高分屏需要乘像素比 ,使用uni.upx2px(500)自适应不同屏幕| | opts.padding| Array | 默认[15,15,4,15] | 画布填充边距,顺序为上右下左,同css,但必须4位,第一个值增大可应用于y轴文字最后一个与x轴文字重合,datalabel显示不完整,增大第二个值可解决x轴最后一个文字显示不完整 | | opts.type | String | required | 图表类型,可选值为pie、line、column、area、ring、radar、arcbar、gauge、candle、bar、rose、word、mix(mix类型下的extra配置详细某一类图的配置未完善,需要自己改源码) | | opts.pixelRatio | Number | required | 像素比,默认为1,仅支付宝小程序需要大于1,其他平台必须为1 | | opts.rotate | Boolean | 默认false | 横屏模式,默认为false | | opts.rotateLock | Boolean | 默认false | 锁定横屏模式,如果在支付宝和百度小程序中使用横屏模式,请赋值true,否则每次都会旋转90度。跨端使用通过uni-app的条件编译来赋值 | | opts.fontSize | Number | 默认13px | 全局默认字体大小(可选,单位为px,默认13px)高分屏不必乘像素比,自动根据pixelRatio计算 | | opts.background | String | | canvas背景颜色(如果页面背景颜色不是白色请设置为页面的背景颜色,默认#ffffff) | | opts.enableScroll | Boolean | 默认false | 是否开启图表可拖拽滚动 默认false 支持line, area, column, candle图表类型(需配合绑定@touchstart, @touchmove, @touchend方法) | | opts.enableMarkLine | Boolean | 默认false | 是否显示辅助线 默认false 支持line, area, column, candle, mix图表类型 | | opts.animation | Boolean | 默认为 true | 是否动画展示,tab切换导致一闪一闪的就是因为动画有执行时间,设置成false就行了 | | opts.duration | Number | 默认为1000 | 动画展示时长单位毫秒 | | opts.dataLabel | Boolean | 默认为 true | 是否在图表中显示数据标签内容值,雷达图显示不了数值,可以修改categories的string加上数值 | | opts.dataPointShape | Boolean | 默认为 true | 是否在图表中显示数据点图形标识 | | opts.dataPointShapeType | String | 默认为 solid | 数据点图形标识类型 可选值:实心solid、空心hollow | | opts.disablePieStroke | Boolean | 默认为 false | 不绘制饼图(圆环图)各区块的白色分割线`已迁移至扩展配置中`(此配置v1.8.2前有效) | 友情链接:[因卓诶-爱生活爱分享技术的博客](https://www.yinzhuoei.com)