小程式引入echarts
阿新 • • 發佈:2021-08-17
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') }) },
})