客服电话
APP下载
迪恩网络APP
随时随地掌握行业动态
官方微信
扫描二维码
关注迪恩网络微信公众号
|
github上的地址 https://github.com/ecomfe/echarts-for-weixin 复制到当前项目根目录下 添加展示bar图表例子的文件夹
index.json 中配置使用的组件，以及组件的位置 这一配置的作用是，允许我们在 { "usingComponents": { "ec-canvas": "../../ec-canvas/ec-canvas" } }
index.wxml 使用 <view class="container"> <ec-canvas id="mychart-dom-bar" canvas-id="mychart-bar" ec="{{ ec }}" bind:init="echartInit"></ec-canvas> </view> 注意此处的 .container { position: absolute; top: 0; bottom: 0; left: 0; right: 0; display: flex; flex-direction: column; align-items: center; justify-content: space-between; box-sizing: border-box; } 在index.js中写的echartInit方法进行初始化 import * as echarts from '../../ec-canvas/echarts'; function initChart(canvas, width, height) { const chart = echarts.init(canvas, null, { width: width, height: height }); canvas.setChart(chart); var option = { ... }; chart.setOption(option); return chart; } Page({ data: { ec: { //onInit: initChart,如果在wxml中没有写bind:init方法，就直接这样用 } }， echartInit (e) { initChart(e.detail.canvas, e.detail.width, e.detail.height); } }); 进行封装改写 在utils中封装图表的方法
在index.js中的使用
当然在使用页面前。都需要在app.json里面声明页面地址才能使用
了解到一个参数data-record="{{recordData}}"，就是可以在echartInit 方法中找到data里面的recordData的数据 echartInit(e) { console.log(e); let recordData=e.target.dataset.record; initChart(e.detail.canvas, e.detail.width, e.detail.height,recordData); },
|
今天小编告诉大家如何对win10系统删除桌面回收站图标进行设置，可能很多用户都不知道
请发表评论