微信小程序中使用echarts的实现方法

刚开始学习微信小程序，可以提出一些错误！

首先体验示例小程序

在微信上扫描下面的二维码，体验电子艺术演示：

下载

为了与小程序Canvas兼容，我们提供了一个小程序组件，这样我们就可以方便地使用ECharts。

首先，在GitHub上下载ECOM Fe/echart-for-weixin项目。

其中，ec-canvas是我们提供的一个组件，其他文件是如何使用这个组件的例子。

在ec-canvas目录中有一个ECharts.js。默认情况下，每次发布echart for-weixin项目时，我们都会用最新版本的echart替换它。如果有必要，您可以自己从ECharts项目下载最新版本，或者从官方网站自定义构建以减小文件大小。

引入组件

微信小程序的项目创建，请参考微信公众平台的官方文档。

项目创建后，下载的eco mfe/echart-for-weixin项目可以完全替换新创建的项目，然后修改代码；或者只是将ec-canvas目录复制到新创建的项目中，然后进行相应的调整。

如果是完全替换，需要用在公共平台申请的项目id替换project.config.json中的appid。pages目录中的每个文件夹都是一个页面，不必要的页面可以适当删除，对应的页面可以在app.json中删除

创建图表

首先，在pages/bar目录中创建以下文件：index.js、index.json、index.wxml、index.wxss，并在app.json的页面中添加“pages/bar/index”.

Index.json的配置如下：

此配置的功能{ '使用组件' : {'EC-canvas' : '././EC-canvas/EC-canvas'}}是允许ECharts使用pages/bar/index.wxml中的组件，注意路径的相对位置要写正确。如果目录结构与本例相同，则应如上配置。

在index.wxml中，ECharts创建了一个包含以下内容的组件：

view class=' container ' ec-canvas ID=' my chart-DOM-bar ' canvas-ID=' my chart-bar ' EC=' { { EC } } '/EC-canvas/view，其中EC是由e chart在index.js中定义的对象，它使图表能够在页面加载后进行初始化和设置。index.js的结构如下：

函数initChart(canvas，width，height){ const chart=echart . init(canvas，null，{ width: width，height : height })；canvas.setChart(图表)；var选项={ 0.};chart.setOption(选项)；返回图表；}页面({ data : { EC : { oninit : initChart } } })；这是所有电子艺术的共性。用户只需修改上述选项的内容即可更改图表。有关选项的用法，请参见ECharts ci文档。对于不熟悉电子海图的用户，可以在5分钟内参考电子海图教程。

以下是小程序的折线图演示：

1.首先，在pages文件夹下创建一个新的line文件夹，其中包含相应的line.js、line.json、line.wxml和line.wxss

2.line.xml文件下的代码：

3.3.line.wxss代码如下：

4.line.json代码：(注意这个路径是我的项目的路径，所以你可以把它改成你自己的项目路径)

5.line.js代码：

最终完成效果：

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。