js:const app = getApp();//首先引入wxcharts.js插件var wxCharts = require("../../../../dist/wxc.._wxechart oninit不执行">
赞
踩
html:
- view class="echats" >
- <ec-canvas id="mychart-dom-bar" id="mychart-pie" canvas-id="mychart-pie" ec="{{ ec }}"></ec-canvas>
- </view>
js:
- const app = getApp();
- //首先引入wxcharts.js插件
- var wxCharts = require("../../../../dist/wxcharts.js");
- var dateTimePicker = require('../../../../utils/dateTimePicker.js');
- import * as echarts from '../../../../components/ec-canvas/echarts';
- //定义记录初始屏幕宽度比例,便于初始化
- var windowW = 0;
-
- function setOption(chart, data) {
- console.log(data)
- var option = {
- title: {
- text: '收益统计',
- left: 'center'
- },
- tooltip: {
- trigger: 'item'
- },
- legend: {
- orient: 'horizontal',
- left: 'center',
- bottom: '10'
- },
- series: [{
- name: '回收类型',
- type: 'pie',
- radius: '48%',
- center: ['50%', '42%'],
- data: data,
- emphasis: {
- itemStyle: {
- shadowBlur: 10,
- shadowOffsetX: 0,
- shadowColor: 'rgba(0, 0, 0, 0.5)'
- }
- }
- }]
- };
- chart.setOption(option)
- }
- Page({
- data: {
- start_date:'',
- end_date:'',
- tongji_data: {},
- ec: {
- lazyLoad: true,
- },
- timer: '',
- },
-
- onLoad(options) {
- var that = this
- that.getTody();
- this.setData({ //每隔一分钟刷新一次
- timer: setInterval(function() {
- that.getList();
- }, 60000)
- })
- },
- onReady: function() {
- this.oneComponent = this.selectComponent('#mychart-pie');
- },
- onUnload: function() {
- clearInterval(this.data.timer)
- },
- getTody() {
- var date = new Date();
- var year = date.getFullYear();
- var month = date.getMonth() + 1;
- var strDate = date.getDate();
- var tempstr = year+'-'+month+'-'+strDate;
- console.log(tempstr)
- this.setData({
- start_date: tempstr,
- end_date:""
- })
- this.getList();
- },
- getList() {
- var that = this
- app.util.request({
- 'url': 'entry/wxapp/Api',
- 'data': {
- m: 'ox_reclaim',
- r: 'store.count',
- uid: wx.getStorageSync('uid'),
- time: this.data.start_date,
- time2:this.data.end_date,
- },
- success(res) {
- console.log(res)
- that.setData({
- tongji_data: res.data.data
- })
- var arr = [];
- res.data.data.piedata.forEach(item => {
- var obj = {
- name: item.name,
- value: item.data,
- }
- arr.push(obj);
- })
- that.init_Echarts(arr)
- }
- })
- },
- init_Echarts(data) {
- this.oneComponent.init((canvas, width, height,dpr) => {
- const chart = echarts.init(canvas, null, {
- width: width,
- height: height,
- devicePixeRatio:dpr,
- });
- canvas.setChart(chart)
- setOption(chart, data)
- this.chart = chart;
- return chart;
- })
- },
- changeDate(e) {
- if(e.currentTarget.dataset.id==1){
- // 开始时间
- this.setData({
- start_date: e.detail.value
- });
- }else{
- //结束时间
- this.setData({
- end_date: e.detail.value
- });
- }
- console.log(e)
- this.getList()
- },
-
- })
css:样式
- /* echarts图表 */
- .echats{
- width: 100%;
- height: 710rpx;
- margin-top: 30rpx;
- }
- ec-canvas{
- width:100%;
- height:100%;
- }
效果图:
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。