如何在微信小程序中使用Echarts可以看看我的另一个教程：点击查看

首先看一个简单的例子

1.wxml文件

视图样式=' width :100%；高度：200 rpx ' EC-canvas id=' my chart-DOM-bar ' canvas-id=' my chart-bar ' EC=' { { EC } } '/EC-canvas/view 2 . js文件

导入*作为来自的echarts '././common/EC-canvas/echart '；函数initChart(canvas，width，height){ const chart=echart . init(canvas，null，{ width: width，height : height })canvas . setchart(chart)；var option={ series :[{ name : ' access source '，type3360' pie '，radius: ['60% '，' 70%']，动画type3360' scale '，silent 3360 true，labellin : { normal : { show : false } }，data: [ {value:10}，{ value 3:3 }]，color:返回图表；}Page({ /** * page的初始数据*/data : { EC : { on init 3360 init chart } })3。json文件(ec-canvas组件需要在官网下载，然后放在文件夹中，再导入到JSON文件中)

{ '使用组件' : {'EC-canvas' : '././common/EC-canvas/EC-canvas ' } } 4。翻译

要求：如果有列表，每个数据代表一个班级，然后图表显示女生与班级的比例。(比如上面渲染图中灰色部分表示全班人数，绿色部分表示女生人数)。

如果你已经了解了echart的基本配置，如果不了解，可以先看看官方文档：echart配置文档

基于上面的例子，我们来分析一下：

从wxml文件可以看出，ec-canvas组件定义了canvas-id和ec两个属性，这两个属性一般用来传递参数，也就是把一些参数传递给ec-canvas组件。Canvas-id，暂时忽略。让我们看看ec。ec是在js文件的数据中定义的。

Ec是一个对象，并且有一个属性onInit，它的值是initChart函数(不是在执行之后)。initChart函数通过ec属性传递到ec-canvas组件中，那么我们就可以知道initChart函数是在ec-canvas组件中执行的。

打开ec-canvas.js文件，只需查看源代码：

上图中的两个属性是通过组件引用传入的：

Ec-canvas ID=' my chart-DOM-bar ' canvas-ID=' my chart-bar ' EC=' { { EC } } '/EC-canvas因为InitChart函数被赋给了EC对象的onInit属性，所以我们可以搜索onInit并在init函数中找到它，如下图所示。

先刷一下这个逻辑。首先，当组件被引入时，一个对象通过ec属性被传递给ec-canvas组件，这个对象有一个作为函数的属性onInit值。然后进入ec-canvas.js文件，在ready hook函数中，判断ec对象是否存在(即判断用户是否传入了ec)。

如果存在，执行init方法。从上图可以看出，onInit方法将在Init方法内部执行(如果条件满足)，然后函数返回的图表实例将被分配给这个图表

实现代码如下：

假设我们有一个电子页面。

1.wxml代码

view class=' test ' wx : for=' { { item list } } ' wx : for-item=' item ' view { { item . name } }/view view view style=' width :100%；height :200 RPx ' EC-canvas id=' my chart-DOM-bar ' canvas-id=' my chart-bar ' tudata=' { { item。数据} } ' EC=' { { EC } } '/EC-canvas/view/view 2 . js代码

导入*作为来自的echarts '././common/EC-canvas/echart '；函数init chart (canvas，width，height，data){//在这里，添加一个额外的参数const chart=echart . init(canvas，null，{width : width，height : height })canvas . setchart(chart)；var option={ series :[{ name : ' access source '，type3360' pie '，radius: ['60% '，' 70%']，animation type3360' scale '，silent 3360 true，labellin 3360 { normal : { show : false } }，data: data，color: ['#666 '，' # 179 B16 ']} } }返回图表；} page(第{/* * * }页的初始数据({/* * * data : { EC : { oninit 3360 init chart })，itemlist3360 [{name: '一等功'，data: [{ value: 10}，{value: 1 }] }，{name: '二等功'，data 3:[{ value 3: 10 }，{ value: 4 })修改ec-canvas.js文件(该文件从echarts官方网站下载)

在wxml文件中，引用ec-canvas组件时，会传递一个tuData参数，所以我们需要在组件内部接收它，并在ec-canvas.js文件中找到properties对象。

属性： {画布ID : {类型：字符串，值3360' EC-canvas'}，EC3360 {类型：对象}，tudata 3360 {//这是一个新的参数类型：对象} }4。找到init方法并将Tudata传递给onInit方法

5.翻译

总结：由于图表实例是在ec-canvas组件内部创建的，所以当其他页面使用ec-canvas组件时，实例化图表的方法是通过ec属性传递到ec-canvas组件中进行实例化的。

因此，我们可以通过引用的方式将我们的数据传输到ec-canvas。

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