小程序引入echarts
2021/8/17 20:36:26
本文主要是介绍小程序引入echarts,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
https://github.com/ecomfe/echarts-for-weixin 下载ec-canvas插件
index.wxml
<ec-canvas id="mychart-dom-pie" force-use-old-canvas="true" canvas-id="mychart-pie" ec="{{ moduleEc }}"></ec-canvas>
index.json
"usingComponents": { "ec-canvas": "../../ec-canvas/ec-canvas", }
index.js
import * as echarts from '../../ec-canvas/echarts'; // 饼图 let moduleEchart = null let moduleData = [ {name: '可售房', value: 0}, {name: '占用房', value: 0}, {name: '维修房', value: 0}, ] let moduleRoomCount = '' function initTab5Chart(canvas, width, height) { moduleEchart = echarts.init(canvas, null, { width: width, height: height }); canvas.setChart(moduleEchart); var option = { title: { x: '60%', subtext: `总房数:${0}`, textStyle: { color: '#bcbcbc', fontWeight: 600, fontSize: 16 }, subtextStyle: { color:'#343D54', fontSize: 14, fontWeight: '600' } }, tooltip: { trigger: 'item', formatter: "{b}: {c}" }, legend: { selectedMode: false, orient: 'vertical', icon: "circle", itemWidth: 10, itemGap: 19, x: '60%', y: 'center', textStyle:{ fontSize: 12, color: '#343D54' }, data: ['可售房', '占用房', '维修房'] }, series: [{ name: '', label: { normal: { fontSize: 14,// 字体大小调整 position: 'inner',// 去掉指示线指示文字 color: '#fff', show : true, formatter: function(data){ let num = data.value == 0 ? '' : data.value return num } } }, type: 'pie', center: ['30%', '50%'], data: moduleData }] } moduleEchart.setOption(option); return moduleEchart; } Page({ data: { moduleEc: { onInit: initTab5Chart }, }, getList(){ let that = this wx.showLoading({ title: '正在加载…', mask: true }) console.log(params) api.$https('POST',api.apiList.GetRoomStatus,params, function(res){ wx.hideLoading() let datas = res.data.result if(res.data.code == 0){ that.setData({ list: res.data.result, }) moduleData = [ {name: '可售房', value: datas.emptycount}, {name: '占用房', value: datas.fullcount}, {name: '维修房', value: datas.maintaincount}, ] moduleRoomCount = datas.roomcount // Echarts图表 moduleEchart.setOption({ title: { subtext: `总房数:${moduleRoomCount}` }, series: [ { data: moduleData //全局变量 } ] }); } },function(res){ wx.hideLoading() console.log('error') }) },
})
这篇关于小程序引入echarts的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-12-20微信小程序开发入门指南
- 2024-12-20小程序 createCameraContext() 怎么实现识别条形码功能?-icode9专业技术文章分享
- 2024-11-22微信小程序的接口信息py可以抓到吗?-icode9专业技术文章分享
- 2024-11-22怎样解析出微信小程序二维码带的参数?-icode9专业技术文章分享
- 2024-11-22微信小程序二维码怎样解析成链接?-icode9专业技术文章分享
- 2024-11-22微信小程序接口地址的域名需要怎么设置?-icode9专业技术文章分享
- 2024-11-22微信小程序的业务域名有什么作用-icode9专业技术文章分享
- 2024-11-22微信小程序 image有类似html5的onload吗?-icode9专业技术文章分享
- 2024-11-22微信小程序中怎么实现文本内容超出行数后显示省略号?-icode9专业技术文章分享
- 2024-11-22微信小程序怎么实现分享样式定制和图片定制功能?-icode9专业技术文章分享