后浪云百度小程序教程：chart 图表
- chart 图表
- 属性说明
- chartOptions 有效值
- 示例
- 代码示例
- 代码示例
- 属性说明
chart 图表
解释：图表组件，提供了常规的折线图、柱状图、饼图，支持 SVG + Canvas 两种渲染引擎，使用扁平化数据配置完成开发。
属性说明
| 属性名 | 类型 | 必填 | 默认值 | 说明 |
|---|---|---|---|---|
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
<view class="chart-container"><view class="tab">折线图</view><view><view class="container-chart"><div class="btn-group"><button type="primary" bindtap="showViewM2" data-type="single">单折线图</button><button type="defualt" bindtap="showViewM2" data-type="multi">复合折线图</button></div><view class="chart-single-content"><smt-chart chart-options="{{m2Chartoptions}}" /></view></view><view class="setting"><view class="item-title item-scroll block border-bottom">自定义样式</view><view class="item-scroll block border-bottom"><text class="switch-text">显示图例(Lenged)</text><switch bindchange="changeLengendM2" checked></switch></view><view class="item-scroll block border-bottom"><text class="switch-text">负值状态</text><switch bindchange="changeNegativeValueM2"></switch></view><view class="item-scroll block border-bottom"><text class="switch-text">正负值状态</text><switch bindchange="changeCrossValueM2"></switch></view></view></view><view class="tab">柱状图</view><view><view class="container-chart"><div class="btn-group"><button type="primary" bindtap="showViewM1" data-active-name="m1" data-type="single">单柱图</button><button type="defualt" bindtap="showViewM1" data-active-name="m1" data-type="multi">复合柱图</button></div><view class="chart-single-content"><smt-chart chart-options="{{m1Chartoptions}}" /></view></view><view class="setting"><view class="item-title item-scroll block border-bottom">自定义样式</view><view class="item-scroll block border-bottom"><text class="switch-text">柱图横向展示</text><switch bindchange="changeZoom"></switch></view><view class="item-scroll block border-bottom"><text class="switch-text">显示图例(Lenged)</text><switch bindchange="changeLengendM1" checked></switch></view><view class="item-scroll block border-bottom"><text class="switch-text">负值状态</text><switch bindchange="changeNegativeValueM1"></switch></view><view class="item-scroll block border-bottom"><text class="switch-text">正负值状态</text><switch bindchange="changeCrossValueM1"></switch></view></view></view><view class="tab">饼状图</view><view><view class="container-chart"><div class="btn-group"><button type="primary" bindtap="showViewM3" data-type="single">饼状图</button><button type="defualt" bindtap="showViewM3" data-type="multi">环状图</button></div><view class="chart-single-content"><smt-chart chart-options="{{m3Chartoptions}}" /></view></view><view class="setting"><view class="item-title item-scroll block border-bottom">自定义样式</view><view class="item-scroll block border-bottom"><text class="switch-text">显示图例(Lenged)</text><switch bindchange="changeLengendM3" checked></switch></view></view></view></view>