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	否		{ show: true }
tooltip	Object	否		{ show: true }
yAxis	Object	是		柱图 yAxis 与 xAxis 可以类型互换，实现竖向和横向柱图切换 { type: ‘value’ }
xAxis	String	是		{ type: ‘category’, data: [‘2017’, ‘2018’, ‘2019’, ‘2020’] }
series	String	否		折线 or 柱状图数据 [{ name: ‘成交量1’, data: [42, 26, 17, 32] }, { name: ‘成交量1’, data: [42, 26, 17, 32] }] 饼图数据 [{ name: ‘成交量1’, data: 1 }, { name: ‘成交量1’, data: 2 }, { name: ‘成交量1’, data: 3 }]
styleConfig	Object	否		目前支持设置图表色值 { color: [‘#3388ff’, ‘#ff4040’, …] }

示例

跳转编辑工具

在开发者工具中打开

在 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>