网上有很多图表库，比如echart、Tau Charts、ChartJS等。这是百度特有的。

这次我们使用：Echarts

官方教程：点击查看

Echarts下载地址：直飞

1.下载后，将ec-canvas文件夹复制到项目中，例如，在项目中创建一个文件夹组件，然后将ec-canvas放到组件文件夹中。

2.在pages中创建新页面，并在我这边创建一个echardemo页面，然后将图表组件引入到echardemo目录中的index.json文件中。代码如下：

{ '使用组件' : {'ec-canvas' : '././component/EC-canvas/EC-canvas ' } } 3。index.wxml代码(注意设置EC-canvas的宽度和高度)

view class=' container ' EC-canvas id=' my chart-DOM-bar ' style=' width :100%；' height:300px'canvas-id=' my chart-bar ' EC=' { { EC } } '/EC-canvas/view 4 . index . js代码

导入*作为来自的echarts '././component/EC-canvas/echart '；函数initChart(canvas，width，height){ const chart=echart . init(canvas，null，{ width: width，height : height })；canvas.setChart(图表)；//在这里，复制了官方示例配置varoption={ title : { text : ' e-charts入门示例' }，tooltip 3360 {}，legend 3360 {data : ['销量']}。XAxis: {data: ['衬衫'，'毛衣'，'雪纺衬衫'，'长裤'，'高跟鞋'，'袜子']}，yaxis3360 {}，系列： [{name: '销量'，type: '吧。chart.setOption(选项)；返回图表；} Page({/** * Page的初始数据*/data : { EC : { oninit 3360 init chart } }，/* * *生命周期函数-监控页面加载*/onload:函数(选项){}，/* * *生命周期函数-监控页面首次呈现*/on ready:函数(){}，/* * *生命周期函数-监控页面显示*/onShow:函数(){}，/* * *生命周期函数-监控页面隐藏*/onHide /* * *与页面相关的事件处理函数-倾听用户的下拉动作*/onpulldown refresh 3360 function(){ }，/* * *页面上拉底事件的处理函数*/onrecharepton3360 function(){ }，/* * *用户点击右上角分享*/onsharepmessage3360 function()。

总结：刚接触Echarts的时候，遇到一个小坑，忘记设置ec-canvas的宽度和高度，导致页面空白。

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