bs-ui-echarts

Base Readme

这个项目是从bs-ui-seed基础创建出来的. 请查看base/README.md 来了解其基础内容.

基于百度echarts的小程序图表组件。

功能介绍

• 基础图表功能
• touch事件修正
• 微信版本检测
• ios 兼容性

使用方法

1. 安装

npm i bs-ui-echarts

2. .json

"usingComponents": {
    "bs-echarts": "miniprogram_npm/bs-ui-echarts/index"
  }

3. .wxml

<bs-echarts
    canvas-id="chart-id"
    chart-height="500rpx"  // chart 高度, optional 默认为100%
    option="{{yourChartOptions}}"
/>

4. .js

data: {
    yourChartOptions: null
},

onReady() {
    // 显示chart
    this.setData({
        options: yourChartOptions  // options：null 表示隐藏chart,显示no data提示
    });
}

实例

参见 exmple 文件夹

更新日志

详见 Change log

接口说明

Properties

| Property | Type | Required | Default Value | Comments | |----------------- |--------- |---------- |------------------------ |------------------------------------ | | canvasId | String | required | -- | canvas id | | option | Object | required | -- | echart 选项,数据变化会重新触发加载 | | ec | Object | optional | { lazyLoad: true } | 自定义扩展选项. 其他配置项参见下面详细介绍(ec 配置项). | | componentHidden | Boolean | | true | | | chartHeight | String | required | 360rpx | chart 的高度, 需传入单位 | | noDataHeight | String | optional | 360rpx | nodata 的高度 |

ec 配置项

| Name | Default Value | Comments | |-------------- |--------------- |-------------- | | lazyLoad | true | 延迟调用 | | disableTouch | false | 是否禁用触摸 |

Events

| Event | Required | Comments | |-------------- |---------- |-------------------------- | | chartready | optional | 在chart ready 后进行调用,返回chart对象，可用于注册click等事件 |