//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: width,
height: height
});
canvas.setChart(chart);
return chart;
}
},
ec1: {
onInit: function(canvas, width, height){
chart1 = echarts.init(canvas, null, {
width: 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) {

}
})

转载于:https://www.cnblogs.com/wjhaaa/p/9626011.html

小程序使用echarts相关推荐

  1. 微信小程序给echarts图表动态赋值

    微信小程序给echarts图表动态赋值 接上一篇:微信小程序引入echart图表 直接上例子(运行需要结合上一篇,拉至文章顶部进入): import * as echarts from '../../ ...

  2. 微信小程序利用echarts实现中国任意行政区域地图

    微信小程序利用echarts实现中国任意行政区域地图 前言 实现 克隆代码 集成 点击事件 点击跳转 代码改造 尾巴 前言 最近微信小程序中需要绘制地图,然后点击地图可以跳转到下一层级.研究了一番,选 ...

  3. 微信小程序使用echarts绘画动态图表

    微信小程序使用echarts绘画动态图表 首先我们从官网下载echarts插件,路径是https://github.com/ecomfe/echarts-for-weixin,把echarts文件放到 ...

  4. 微信小程序使用echarts实时更新数据以及常见bug

    ** 微信小程序使用echarts实时更新数据以及常见bug ** 参考echarts官方文档:https://echarts.apache.org/zh/tutorial.html 下载小程序ech ...

  5. 【微信小程序】echarts视图层会悬浮在所有视图之上问题原因

    问题:小程序使用下拉菜单时,echarts视图层会悬浮在所有视图之上问题 项目场景: 小程序使用echarts视图层会悬浮在所有视图之上问题原因 问题描述: 真机调试时小程序使用echarts视图层会 ...

  6. 微信小程序使用echarts图表,与延迟加载图表,解决echarts文件过大

    微信小程序使用echarts图表,与延迟加载图表,解决echarts文件过大 引入echarts组件 展示echarts图表数据 延迟加载图表 如何解决echarts文件过大 引入echarts组件 ...

  7. 微信小程序使用echarts显示全国地图

    首先可以看一下echarts官方的实例 也可以直接使用我参照了官方实例的方法: 1.下载echarts小程序组件并放置到具体项目 下载地址 将项目拉到本地之后,找到文件中的 ec-canvas 文件夹 ...

  8. 微信小程序使用Echarts全步骤

    要有遥不可及的梦想,也要有脚踏实地的本事.----------- Grapefruit.Banuit Gang(香柚帮) 今天分享一个小程序使用Echarts插件的步骤,下面开始讲解: 1.首先要想在 ...

  9. 微信小程序使用Echarts真机调试报错,Echarts占内存过大解决方法

    Echarts真机调试报错 解决办法:给组件添加force-use-old-canvas="true"属性就可以在真机调试里展示. 重点:发布线上时,一定要将这句去掉,现在只是不支 ...

  10. 微信小程序引用Echarts绘图显示模糊解决办法

    因为毕设需要,这阵子我一直在研究小程序使用Echarts绘图. 偶然间发现了一个问题,小程序绘制出来的折线图显示非常的模糊(用我自己的话说就是2k显示器看720p电影的感觉). 经过查询找到了相应的解 ...

最新文章

  1. 数据结构和算法分析:第六章 优先队列(堆)
  2. 分享几个vscode的插件
  3. linux平台安装React Native遇到的坑
  4. 关于模板引擎handlebars.js基本用法
  5. 机器学习之朴素贝叶斯算法的推理及相关知识总结
  6. Java集合框架之四大接口、常用实现类,java基础面试笔试题
  7. elastic-Job配置参数详细解释
  8. 软件测试工程师常用网站整理汇总
  9. 2022年全球市场GPS追踪装置总体规模、主要生产商、主要地区、产品和应用细分研究报告
  10. ios使用video播放器,禁止自动全屏
  11. 软件开发沉思录读书笔记
  12. Python实现某du内容下载, 保存到word文档
  13. PPT学习(一)——PPT默认设置
  14. 如何进行自媒体创业?你是否能把握住,短视频都有哪些变现方式?
  15. 山东什么企业适合做两化融合
  16. python爬虫学习 之 定向爬取 淘宝商品价格
  17. 图神经网络(三):数学基础
  18. 理财入门之萌萌赚钱观
  19. matlab 自适应噪声对消,自适应噪声对消
  20. MathWorks官方MATLAB/Simulink基础入门视频教程 笔记(Simulink基础)

热门文章

  1. mysql useunicode_jdbc连接mysql 为什么在连接时已经这样设置了 ?useUnicode=truecharacterEncodin...
  2. vue和react的区别是什么?
  3. 『初识C语言』语法入门详解
  4. 关于srand((unsigned)time(NULL))是初始化随机函数种子
  5. 房产估值软件测试怎么报风险,基于风险的测试策略
  6. redis 端口_「建议收藏」手把手教你搭建redis集群
  7. 为什么使用linux内核,为什么Linux内核使用它所做的数据结构?
  8. pythondis功能_python 使用 Dis 模块进行代码性能剖析
  9. linux 下wn725无线网卡驱动,TL-WN725N V3无线网卡驱动移植与wireless工具wpa_supplicant-2.6...
  10. C++:如何在VS中配置第三方动态库 【visual Studio 2017 + Opencv 】