微信小程序展示图表组件使用方法详解

1:下载开源代码库上的项目

2:但项目下载之后，打开小程序开发工具，可以看到效果如下，适配性还是比较完美的。

如果是在项目里面引入组件的话，打开从开源代码库上面下载的代码，将出自画布文件夹复制黏贴到你的项目里面。

好的，组件已经复制到了我的项目里面，现在我想实现一个折线图，现在开始去组件里面搬运复制黏贴代码了。

页面结构

！索引。wxml-view class=' container ' EC-canvas id=' my chart-DOM-line ' canvas-id=' my chart-line ' EC=' { { EC } } '/EC-canvas/view js

导入*作为来自的“echarts”././EC-canvas/echart '；const app=GetApp()；函数initChart(画布，宽度，高度){ const chart=echart。init(canvas，null，{width: width，height : height })；canvas.setChart(图表);var选项={ title : { text : }测试下面神话；传奇的红色区域不应被裁剪，left: 'center'}，color: ['#37A2DA '，' #67E0E3 '，' #9FE6B8']，legend: {data: ['A '，' B '，' C']，top: 50，left: 'center '，backgroundColor: 'red '，z: 100}，grid 3360 { contain label : true }，tootip周一', '周二', '周三', '周四', '周五', '周六', '周日]，//show: false}，yAxis: {x: '中心，类型： '值，split line : { linestyle : { type : '虚线}}//show: false}，series: [{name: 'A '，type: 'line '，smooth 3360 true，data: [18，36，65，30chart.setOption(选项);返回图表；}页面({ onsharepmessage :函数(RES){ return { title : ' echart可以在微信小程序中使用啦!'，path: '/pages/index/index '，success: function () { }，fail: function () { }，data : { EC : { on init : initChart } }，onReady(){ })；数据

{ '使用组件： {'ec-canvas': '././ec-canvas/ec-canvas'}}css

/* *索引。wxss * */EC-帆布{宽度： 100%；高度： 100%;}这一步为止，代码搬运结束，刷新按钮，但是，为什么界面显示空白？没有报错，代码也一模一样，真实让人费解，算了，还是先放在这里吧，吃饭要紧。

.

.

继续写

对，没错，空白不显示的原因出在了钢性铸铁文件上面，只要我们在钢性铸铁里面再写上一些代码之后。

/* *索引。wxss * */EC-帆布{宽度： 100%；高度： 100%;} EC-canvas {宽度： 100%；高度： 100%;}.容器{位置：绝对值；top : 0；底部： 0；左： 0；右： 0；显示： flex flex-方向：柱；align-items:居中；正义-内容：空格；盒子尺寸：边框盒子；}.picker-pos { margin-top :-130 rpx；左边距left: 150rpxcolor:蓝紫色；}这个时候

小程序展示图表组件算是已经可以运用在项目里面啦

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