微信小程序静态页面详情(微信小程序基础教程之echart的使用)
类别:编程学习 浏览量:1517
时间:2022-01-27 01:03:05 微信小程序静态页面详情
微信小程序基础教程之echart的使用前言
先看下最终实现的效果–自己做的小demo
首先到ECharts官网下载官网地址
根据上面的网址下载代码把ec-canvas文件拷贝下来放到你自己的项目中,
我放的是tool文件夹下面,你们随意引入的时候注意路径就行
2.使用
然后在你需要用的页面引入,在json中加入,这里要注意路径echart.json
"usingComponents": { "tab":"../../component/tabs/tab", "ec-canvas":"../../tools/ec-canvas/ec-canvas" },
3 渲染
先把简单的布局和样式弄好echart.wxml
<view class="echart"> <tab active-tab="{{activeTab}}" period-list="{{periodList}}" bind:changePeriodType='changePeriodType'></tab> <view class="echart-position"> <ec-canvas id="mychart-dom-bar" canvas-id="mychart-bar"></ec-canvas> </view> </view>
样式echart.wxss
.echart-position { position:relative; height: 280px; overflow:hidden; }
echart.js
先引入
import * as echarts from '../../tools/ec-canvas/echarts'; function setOption(chart,data){ var option = { title: { text: '' }, tooltip: { trigger: 'item' }, legend: { data: [] }, series: [{ name: '', type: 'pie', radius: ['40%', '70%'], avoidLabelOverlap: false, label: { show: false, position: 'center' }, emphasis: { label: { show: true, fontSize: '40', fontWeight: 'bold' } }, labelLine: { show: false }, data: [ ...data ] }] }; chart.setOption(option); return chart; } Page({ data: { periodList: [ { id: 'outcome', text: '支出' }, { id: 'income', text: '收入' }, ], activeTab: 'outcome', echartsData: null, // echarts 数据 }, // 收入支出切换事件 changePeriodType(e) { console.log(e, '<=收入支出切换事件') this.setData({ activeTab: e.detail.params.type }) // 重新查询列表 this.getEchartData(); }, // 查询收入支出数据 getEchartData() { wx.cloud.database().collection('spendD').where({ type: this.data.activeTab == 'outcome' ? 0 : 1 }).get().then(res => { let calcResult = this.handleOriginData(res.data); this.setData({ echartsData:calcResult }) this.init_one(calcResult) }) }, handleOriginData(array) { let result = []; let obj = {} array.forEach(item => { if (!obj[item.name]) { obj[item.name] = 0; } obj[item.name] += Number(item.amount); }) for(let key in obj){ let temp = {}; temp['name'] = key; temp['value']= obj[key]; result.push(temp); } console.log(result,'result') return result }, /** * 生命周期函数--监听页面加载 */ init_one: function (data) { //初始化图表 this.echartComponent.init((canvas, width, height) => { const chart = echarts.init(canvas, null, { width: width, height: height }); setOption(chart,data) this.chart = chart; return chart; }); }, onLoad: function (options) { this.getEchartData() }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady: function () { this.echartComponent = this.selectComponent('#mychart-dom-bar'); }, })
采坑tips 当按照教程配置好图没有预想出来时 注意添加下样式
总结
到此这篇关于微信小程序基础教程之echart使用的文章就介绍到这了,更多相关微信小程序echart使用内容请搜索开心学习网以前的文章或继续浏览下面的相关文章希望大家以后多多支持开心学习网!
您可能感兴趣
- 微信小程序存token(小程序开发实现access_token统一管理)
- 微信小程序怎么绕过人脸的(详解微信小程序官方人脸核身认证)
- 微信小程序接口返回数据怎么弄(微信小程序页面返回传值的4种解决方案汇总)
- 微信小程序抽签如何抽中(JavaScript实现班级抽签小程序)
- 微信小程序多人编辑表格(微信小程序实现固定表头、列表格组件)
- 微信小程序swiper大小调整(微信小程序swiper-dot中的点如何改成滑块详解)
- 微信小程序开发完整操作流程(微信小程序开发之组件设计规范)
- 微信小程序图片加特效(微信小程序实现可实时改变转速的css3旋转动画实例代码)
- 苹果微信小程序页面空白(iPhoneX安全区域Safe Area底部小黑条在微信小程序和H5的屏幕适配)
- 微信小程序引用模板的函数(微信小程序页面与组件之间信息传递与函数调用)
- 微信小程序通知验证签名方法(微信小程序实现电子签名)
- 微信小程序可以用h5开发不(微信小程序webView嵌入H5的方法实例)
- 微信小程序开发简单计算器(小程序实现计算器功能)
- 微信小程序获取手机信息(微信小程序获取手机号的踩坑记录)
- 微信小程序简易计算器制作(微信小程序实现简单计算器功能)
- 微信小程序单选框组件(微信小程序picker多列选择器mode = multiSelector)
- 终于来了,淘宝更改账户名测试中,快去看看你能不能修改(淘宝更改账户名测试中)
- 淘宝支持账号名修改,网友 终于可以 重新做人 了(淘宝支持账号名修改)
- 盘点那些年让人称奇的年终奖 最后一个赢辣条毫无悬念(盘点那些年让人称奇的年终奖)
- 你还没有升职吗 他竟因为几套激励理论,升职了(你还没有升职吗)
- 某知名企业绩效管理体系及薪酬分配体系操作手册(某知名企业绩效管理体系及薪酬分配体系操作手册)
- 职场人改不掉这4个习惯,只会越混越穷,一辈子也翻不了身(职场人改不掉这4个习惯)
热门推荐
- python指定路径创建txt文件(python根据txt文本批量创建文件夹)
- php数组详解(php数组和链表的区别总结)
- css隐藏div(CSS控制DIV层显示和隐藏的实现方法)
- laravel队列过期时间(laravel 修改记住我功能的cookie保存时间的方法)
- sqlserver触发器修改当前字段(利用SQL Server触发器实现表的历史修改痕迹记录)
- php7用什么替代mysql(mysqli扩展无法在PHP7下升级问题的解决)
- mac更改mysql密码(Mac下mysql 8.0.22 找回密码的方法)
- dede MD5加密解密(DEDECMS的20位MD5加密密文解密示例介绍)
- 部署docker需要什么配置(解决Docker必须使用sudo操作的问题)
- mvc在视图中使用@helper封装输出代码