189 8069 5689
*.swan 文件ECharts 动态库是智能小程序基于 ECharts 实现的图表动态库，提供了图表在小程序中的使用方法。如果在使用中碰到问题，可以在 Github 提问。
大安市网站制作公司哪家好，找成都创新互联！从网页设计、网站建设、微信开发、APP开发、成都响应式网站建设公司等网站项目制作，到程序开发，运营维护。成都创新互联2013年开创至今到现在10年的时间，我们拥有了丰富的建站经验和运维经验，来保证我们的工作的顺利进行。专注于网站建设就选成都创新互联。
完整的示例程序参见：demo 。
参考使用动态库中提供的方法，在app.json中增添一项dynamicLib，与pages同级。
"dynamicLib": {"echartsLib": {"provider": "echarts_4_7_0"}},
目前支持的版本：echarts_4_7_0、echarts_4_4_0，分别对应 ECharts 4.7.0 及 4.4.0 版本，建议使用较新的echarts_4_7_0版本。
在每个使用到图表组件的页面，配置*.json文件如：
{"usingSwanComponents": {"chart": "dynamicLib://echartsLib/chart"}}
*.swan 文件这是一种最基本的配置方式。
style也可以在*.css中声明，需要保证option在*.js中绑定到页面的 data 中。
JS
const option = ...;Page({data: {option: option}});
其中，option 是一个图表配置项，定义了图表的内容和样式。由于本图表组件使用了 ECharts 作为底层实现，所以这个 option 就对应 ECharts 的配置项。一个简单的折线图的配置项可能是这样的——
option = {xAxis: {type: 'category',data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']},yAxis: {type: 'value'},series: [{data: [820, 932, 901, 934, 1290, 1330, 1320],type: 'line'}]};
如果你不知道如何编写配置项，可以在 Echarts 官网或 Echarts 社区找到相似的例子，结合 Echarts 配置项文档模仿修改。
| 属性名称 | 类型 | 说明 |
|---|---|---|
| option | Object | 配置项，参见 ECharts 配置项文档 |
| width | Number、String | 可显式指定实例宽度（单位：像素）。如果传入值为null/undefined/‘auto’，则表示自动取实例容器的宽度，参见 echarts.init |
| height | Number、String | 可显式指定实例高度（单位：像素）。如果传入值为null/undefined/‘auto’，则表示自动取实例容器的高度，参见 echarts.init |
| dpr | Number | 设备像素比，默认取swan.getSystemInfoSync().pixelRatio，参见 echarts.init |
| notMerge | Boolean | 在更新配置项的时候，是否不跟之前设置的 option 合并，参见 echartsInstance.setOption |
| maps | Object、Array. | 如果是Object类型，则是包含name（地图名称，相当于 echarts.registerMap 接口中的mapName）与geoJson（ GeoJson 格式的数据）的对象；如果是数组，则每一项都是包含name和geoJson的数组。具体的使用方法参见「地图」的例子 |
| action | String | 需要触发事件的时候，将这一属性设为 ECharts 支持的属性名称，参见“事件触发与监听”的例子 |
| toClear | Boolean | 设为true时，相当于调用 echartsInstance.clear，清空当前实例，会移除实例中所有的组件和图表 |
| extensions | Array. | ECharts 扩展名称，目前只支持字符云（‘wordcloud’）与水球图（‘liquidfill’），注意都是小写。使用方法参见「字符云」和「水球图」的例子 |
以下说明 ECharts 的配置项和 API 与本动态库的差别。
本动态库支持绝大部分的 ECharts 配置，已知不支持的配置项包括：
ECharts 的 API 通过其他方式提供，开发者不能直接访问到全局变量echarts和图表实例。以下具体说明在 ECharts 的 API 在本动态库中对应的用法。
由于无法向动态库传递function，因此不能直接使用 ECharts 中回调形式的formatter（如option.tooltip.formatter）。所以，从echarts_4_7_0版本开始，我们提供了字符串模板以解决这个问题。
例子参见「定制 formatter」，字符串模板参数是${params}，模板语法详见 etpl 模板语法。
该方法对于配置项中所有层级的formatter有效，对于其他名称的回调函数无效。
全局方法
| 方法 | 说明 |
|---|---|
| echarts.init | 开发者无需手动调用此方法，图表会在 DOM 节点 attach 的时候自动初始化图表。如果希望延迟初始化，参见「延迟加载图表」的例子。默认会采用width和height属性传递，参见「改变图表容器大小」的例子 |
| echarts.connect | 不支持图表联动 |
| echarts.disconnect | 不支持图表联动 |
| echarts.dispose | 开发者无需手动调用此方法，图表会在图表容器 DOM 被移除的时候自动调用这个方法 |
| echarts.getInstanceByDom | 开发者无法访问到容器上的实例，需要通过属性的方式对图表进行操作 |
| echarts.registerMap | 在动态组件中，通过maps属性注册地图，具体方法参见「地图」的例子 |
| echarts.getMap | 在动态组件中，如果需要获取此信息，请自行保存相关地图信息 |
| echarts.registerTheme | 不支持注册主题，请提供配置项改变样式 |
| echarts.graphic | 不支持图形相关帮助方法 |
实例方法
| 方法 | 说明 |
|---|---|
| echartsInstance.group | 不支持图表联动 |
| echartsInstance.setOption | 修改option属性就相当于调用该方法，参数notMerge可以通过属性notMerge设置 |
| echartsInstance.getWidth | 在动态组件中，如果需要获取此信息，请自行保存宽度信息 |
| echartsInstance.getHeight | 在动态组件中，如果需要获取此信息，请自行保存高度信息 |
| echartsInstance.getDom | 不支持 DOM 操作 |
| echartsInstance.getOption | 在动态组件中，如果需要获取此信息，请自行保存配置项信息 |
| echartsInstance.resize | 通过修改width或height属性实现该方法的调用，参见「改变图表容器大小」的例子 |
| echartsInstance.dispatchAction | 通过修改action属性实现该方法的调用，参见「事件触发与监听」的例子 |
| echartsInstance.on | 通过bindxxx属性（其中xxx是 ECharts 事件的名称，注意都是小写）实现该方法的调用，参见「事件触发与监听」的例子。支持绝大部分 ECharts 的事件，不支持的包括：dbclick、mousemove、mouseover、mouseout、globalout、contextmenu |
| echartsInstance.off | 去除bindxxx属性即可 |
| echartsInstance.convertToPixel | 不支持 |
| echartsInstance.convertFromPixel | 不支持 |
| echartsInstance.containPixel | 不支持 |
| echartsInstance.showLoading | 不支持 |
| echartsInstance.hideLoading | 不支持 |
| echartsInstance.getDataURL | 不支持 |
| echartsInstance.getConnectedDataURL | 不支持 |
| echartsInstance.appendData | 不支持 |
| echartsInstance.clear | 通过将toClear属性设为true实现 |
| echartsInstance.isDisposed | 不支持 |
| echartsInstance.dispose | 开发者无需手动调用此方法，图表会在图表容器 DOM 被移除的时候自动调用这个方法 |