创新互联百度小程序教程:chart图表
- chart 图表
- 属性说明
- chartOptions 有效值
 
- 示例
- 代码示例
 
- 代码示例
 
- 属性说明
chart 图表
解释:图表组件,提供了常规的折线图、柱状图、饼图,支持 SVG + Canvas 两种渲染引擎,使用扁平化数据配置完成开发。

成都创新互联公司公司2013年成立,是专业互联网技术服务公司,拥有项目网站制作、做网站网站策划,项目实施与项目整合能力。我们以让每一个梦想脱颖而出为使命,1280元孟州做网站,已为上家服务,为孟州各地企业和个人服务,联系电话:18982081108
属性说明
| 属性名 | 类型 | 必填 | 默认值 | 说明 | 
|---|---|---|---|---|
| chartOptions | Object | 是 | 图表数据及样式参数 | 
chartOptions 有效值
| 属性名 | 类型 | 必填 | 默认值 | 说明 | 
|---|---|---|---|---|
| canvasWidth | Number | 是 | canvas 宽度(单位:px) | |
| canvasHiehgt | Number | 是 | canvas 高度(单位:px) | |
| canvasId | String | 是 | canvasId | |
| animation | Number | 否 | 10000 | canvas 动画持续时长(单位:ms) | 
| renderType | String | 否 | canvas | 图表渲染类型,支持 canvas,svg 两种 | 
| type | String | 否 | line | 渲染类型,支持 line(折线图)、pie(饼图)、 bar(柱图) | 
| startAngle | Number | 否 | -180 | 饼图起始渲染角度 | 
| radius | String | 否 | 是否支持环图,[80, 90] 数组值代表圆半径 | |
| legend | Object | 否 | { | |
| tooltip | Object | 否 | { | |
| yAxis | Object | 是 | 柱图 yAxis 与 xAxis 可以类型互换,实现竖向和横向柱图切换 | |
| xAxis | String | 是 | { | |
| series | String | 否 | 折线 or 柱状图数据 | |
| styleConfig | Object | 否 | 目前支持设置图表色值 | 
示例
跳转编辑工具
在开发者工具中打开
在 WEB IDE 中打开
扫码体验
代码示例
请使用百度APP扫码
代码示例
- SWAN
- JS
- CSS
- JSON
折线图 
自定义样式 
显示图例(Lenged) 
负值状态 
正负值状态 
柱状图 
自定义样式 
柱图横向展示 
显示图例(Lenged) 
负值状态 
正负值状态 
饼状图 
自定义样式 
显示图例(Lenged) 
本文名称:创新互联百度小程序教程:chart图表
文章起源:http://jxruijie.cn/article/dhijhjh.html

 
                