微信小程序静态页面详情(微信小程序基础教程之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使用内容请搜索开心学习网以前的文章或继续浏览下面的相关文章希望大家以后多多支持开心学习网!
您可能感兴趣
- 微信小程序可以用百度的echarts吗(uniapp在微信小程序中使用ECharts的方法)
- 微信小程序css使用技巧(微信小程序 CSS filter滤镜的使用示例详解)
- 怎么编写计算小程序(微信小程序实现简易计算器)
- 微信小程序开发如何实现自动保存(微信小程序开发实用技巧之数据传递和存储)
- php开发微信小程序后台步骤流程(基于PHP实现微信小程序客服消息功能)
- 微信小程序canvas缩放(微信小程序之html5 canvas绘图并保存到系统相册)
- 微信小程序引用模板的函数(微信小程序页面与组件之间信息传递与函数调用)
- 9小时搞定微信小程序开发(关于加快微信小程序开发的一些小建议)
- 微信小程序数学公式(微信小程序计算器实例详解)
- 微信小程序图片加特效(微信小程序实现可实时改变转速的css3旋转动画实例代码)
- 微信小程序function怎么使用(微信小程序在{{ }}中直接使用函数的方法示例)
- 微信小程序做计算器(微信小程序实现计算器小功能)
- flask项目微信小程序(Python Flask 搭建微信小程序后台详解)
- 微信小程序苹果部分内容打不开(微信小程序audio组件在ios端无法播放的解决办法)
- 微信小程序双人游戏横屏(微信小程序实现拼图游戏)
- 微信小程序计数器代码(微信小程序实现计算器案例)
- 爱情可以当饭吃吗(怎么回复)
- 高考数学题(高考数学题基础题占多少分)
- 没钱只能吃土(没钱要吃土了幽默短信发朋友圈)
- 今年考高会很难吗(今年高考会考试吗)
- 盘古开天地 他创造了世界,谁创造了盘古 盘古是伏羲吗(盘古开天地他创造了世界)
- 关于队徽 你了解这些么 二(关于队徽你了解这些么)
热门推荐
- 如何用mysql建立图书管理系统(图书管理系统的sqlserver数据库设计示例)
- html5中怎么做圆形框架(HTML5 层的叠加的实现)
- ih5如何点击按钮跳转至网页(HTML5跳转小程序wx-open-launch-weapp的示例代码)
- 知乎上的35条神回复(75条笑死人的知乎神回复,用60行代码就爬完了)
- django响应返回的常用方法(Django异步任务之Celery的基本使用)
- 怎么调用dede自定义表单(DEDE模板中如何使用if进行多分支判断的教程)
- js脚本语言原理(实例说明js脚本语言和php脚本语言的区别)
- dedecmsv5.7后台路径查找(dedecms 取消服务器/主机空间目录脚本的执行权限方法[图文])
- ie浏览器css颜色兼容(IE8的css hack9 使用说明)
- php怎么判断是否有session(PHP中Session ID的实现原理实例分析)