小程序使用echarts

//index.js
//获取应用实例
const app = getApp();
import * as echarts from '../../ec-canvas/echarts'; //引入echarts.js
const moment = require('../../utils/moment.min.js');

var barec = null ;
var arr=[];
var monthDate=[];
var monthStep=[];
var weekDate=[];
var weekStep=[];
let chart = null;
let chart1 = null;
Page({
data: {
userInfo:'',
hasUserInfo: false,
chartTitle: '总成交量',
isMainChartDisplay: true,
carbon_scene:'',
carbon_number:'',
tab: 0,
ec: {
onInit: function(canvas, width, height){
chart = echarts.init(canvas, null, {
width,
height: height
});
canvas.setChart(chart);
return chart;
}
},
ec1: {
onInit: function(canvas, width, height){
chart1 = echarts.init(canvas, null, {
width,
height: height
});
canvas.setChart(chart1);
return chart1;
}
}
},
//事件处理函数
bindViewTap: function () {
wx.navigateTo({
url: '../logs/logs'
})
},
mall:function(){
wx.navigateTo({
url: '../mall/index'
})
},
onLoad: function (options) {
setTimeout(this.weekData,500);
setTimeout(this.monthData,500);
this.getCarbon()
},
weekData(){
wx.showLoading({
title: '加载中...',
})
var that = this;
var path = '/userinfo/playerinfo';
var url = app.globalData.http_base_url + path;
var pk_session = wx.getStorageSync('pk_session');
var openid = wx.getStorageSync('openid_session');
const ctx = wx.createCanvasContext('mychart-bar')
ctx.clearRect()
wx.request({
url: url,
data: {
openid:openid
},
header: {
'Content-Type': 'application/json'
},
success: (res) => {
console.log(res)
that.setData({
userInfo:res.data.avatar_url
})
if(res.data.status==1){
var dataWeek=res.data.wxrun_week;
for (var i =0; i< dataWeek.length; i++) {
var date=dataWeek[i].rundate
var step=dataWeek[i].step
weekDate.push(date) //周
weekStep.push(step) //周步数
}

var dataList=res.data.wxrun_month;
for(var i=0;i<dataList.length;i++){
var date=dataList[i].rundate
var step=dataList[i].step
monthDate.push(date) //月
monthStep.push(step) //月步数
}

chart.setOption({
color:['green'],
tooltip : {
trigger: 'axis',
axisPointer : { // 坐标轴指示器，坐标轴触发有效
type : 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [
{
type: 'value',
data: weekDate.reverse(),
type: 'category',
}
],
yAxis: [
{
type: 'value',
}
],
series: [{
data: weekStep.reverse(),
type: 'line',
areaStyle: {}
}]
},true)

wx.hideLoading();
}else{
wx.showModal({
showCancel:false,
content: '未授权微信运动',
})
}

},
fail: (res) => {

},
complete: (res) => {

}
})
},
monthData(){
wx.showLoading({
title: '加载中...',
})
var that = this;
var path = '/userinfo/playerinfo';
var url = app.globalData.http_base_url + path;
var pk_session = wx.getStorageSync('pk_session');
var openid = wx.getStorageSync('openid_session');
wx.request({
url: url,
data: {
openid:openid
},
header: {
'Content-Type': 'application/json'
},
success: (res) => {
if(res.data.status==1){
// var dataWeek=res.data.wxrun_week;
// for (var i =0; i< dataWeek.length; i++) {
// var date=dataWeek[i].rundate
// var step=dataWeek[i].step
// weekDate.push(date) //周
// weekStep.push(step) //周步数
// }

var dataList=res.data.wxrun_month;
for(var i=0;i<dataList.length;i++){
var date=dataList[i].rundate
var step=dataList[i].step
monthDate.push(date) //月
monthStep.push(step) //月步数
}

chart1.setOption({
color:['green'],
tooltip : {
trigger: 'axis',
axisPointer : { // 坐标轴指示器，坐标轴触发有效
type : 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [
{
type: 'value',
data: monthDate.reverse(),
type: 'category',
}
],
yAxis: [
{
type: 'value',
}
],
series: [{
data: monthStep.reverse(),
type: 'line',
areaStyle: {}
}]
},true)
wx.hideLoading();
}else{
wx.showModal({
showCancel:false,
content: '未授权微信运动',
})
}

},
fail: (res) => {

},
complete: (res) => {

}
})
wx.hideLoading();

},
getCarbon(){
wx.showLoading({
title: '加载中...',
})
var that = this;
var path = '/carbonscene/carbon_scene_history/';
var url = app.globalData.http_base_url + path;
var pk_session = wx.getStorageSync('pk_session');
var openid = wx.getStorageSync('openid_session');
wx.request({
// 必需
url: url,
data: {
openid:openid
},
header: {
'Content-Type': 'application/json'
},
success: (res) => {

var arr = [];
for (var i in res.data) {
arr.push(res.data[i]);
}
for(var i= 0; i<arr.length;i++){
var date=moment(arr[i][2]).fromNow()
arr[i].splice(2,1,date);
}
that.setData({
carbon_list:arr
})
},
fail: (res) => {

},
complete: (res) => {

}
})
wx.hideLoading();
},
tab_slide: function (e) {//滑动切换tab
var that = this;
that.setData({ tab: e.detail.current });
},
tab_click: function (e) {//点击tab切换
var that = this;
if (that.data.tab === e.target.dataset.current) {
return false;
} else {
that.setData({
tab: e.target.dataset.current
})
}
},
onReady: function (e) {

}
})