|
|
@@ -1,118 +1,276 @@
|
|
|
const app = getApp()
|
|
|
import * as echarts from '../../../commpents/ec-canvas/echarts'
|
|
|
|
|
|
-function initChart(canvas, width, height, dpr) {
|
|
|
- const chart = echarts.init(canvas, null, {
|
|
|
- width: width,
|
|
|
- height: height,
|
|
|
- devicePixelRatio: dpr // new
|
|
|
- });
|
|
|
- canvas.setChart(chart);
|
|
|
+function echart(chart, leftData, rightData) {//leftData是坐标系左边y轴，rightData是右边y轴
|
|
|
+ var option = {
|
|
|
+ //网格
|
|
|
+ grid: {
|
|
|
+ bottom: 80,
|
|
|
+ show: true,
|
|
|
+ // containLabel: true
|
|
|
+ },
|
|
|
+ //图例
|
|
|
+ legend: {
|
|
|
+ data: [{
|
|
|
+ name: 'leftData',
|
|
|
+ textStyle: { //设置颜色
|
|
|
+ color: '#6076FF',
|
|
|
+ fontSize: '14',
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: 'rightData',
|
|
|
+ textStyle: {
|
|
|
+ color: '#FFC560',
|
|
|
+ fontSize: '14',
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ x: 'left',
|
|
|
+ bottom: 15,
|
|
|
+ left: 30
|
|
|
+ },
|
|
|
+ //x轴
|
|
|
+ xAxis: {
|
|
|
+ type: 'category',
|
|
|
+ boundaryGap: false,
|
|
|
+ disableGrid: true, //绘制X网格
|
|
|
+ data: ['', '', '', '', '', '', '', '', ''],
|
|
|
+ splitLine: {
|
|
|
+ show: true,
|
|
|
+ // 改变轴线颜色
|
|
|
+ lineStyle: {
|
|
|
+ // 使用深浅的间隔色
|
|
|
+ color: ['#DDDDDD']
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //去掉刻度
|
|
|
+ axisTick: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ //去掉x轴线
|
|
|
+ axisLine: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ },
|
|
|
+ //y轴
|
|
|
+ yAxis: [{
|
|
|
+ name: 'mph',
|
|
|
+ type: 'value',
|
|
|
+ min: 0,
|
|
|
+ // max: 40,
|
|
|
+ //y标轴名称的文字样式
|
|
|
+ nameTextStyle: {
|
|
|
+ color: '#FFC560'
|
|
|
+ },
|
|
|
+ //网格线
|
|
|
+ splitLine: {
|
|
|
+ show: true,
|
|
|
+ lineStyle: {
|
|
|
+ color: ['#DDDDDD']
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //去掉刻度
|
|
|
+ axisTick: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ //去掉y轴线
|
|
|
+ axisLine: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: 'g',
|
|
|
+ type: 'value',
|
|
|
+ // max: 4,
|
|
|
+ min: 0,
|
|
|
+ nameTextStyle: {
|
|
|
+ color: '#6076FF'
|
|
|
+ },
|
|
|
+ //去掉刻度
|
|
|
+ axisTick: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ //去掉y轴线
|
|
|
+ axisLine: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
|
|
|
- var option = {
|
|
|
- backgroundColor: "#ffffff",
|
|
|
- series: [{
|
|
|
- label: {
|
|
|
- normal: {
|
|
|
- fontSize: 14
|
|
|
- }
|
|
|
- },
|
|
|
- type: 'pie',
|
|
|
- center: ['50%', '50%'],
|
|
|
- radius: ['20%', '40%'],
|
|
|
- data: [{
|
|
|
- value: 55,
|
|
|
- name: '教练一'
|
|
|
- }, {
|
|
|
- value: 20,
|
|
|
- name: '教练二'
|
|
|
- }, {
|
|
|
- value: 10,
|
|
|
- name: '教练三'
|
|
|
- }, {
|
|
|
- value: 20,
|
|
|
- name: '教练四'
|
|
|
- }, {
|
|
|
- value: 38,
|
|
|
- name: '教练五'
|
|
|
- }]
|
|
|
- }]
|
|
|
- };
|
|
|
+ }
|
|
|
+ ],
|
|
|
|
|
|
- chart.setOption(option);
|
|
|
- return chart;
|
|
|
+ series: [{
|
|
|
+ name: 'leftData',
|
|
|
+ type: 'line',
|
|
|
+ animation: true, //动画效果
|
|
|
+ symbol: 'none',
|
|
|
+ //折线区域
|
|
|
+ areaStyle: {
|
|
|
+ //渐变颜色
|
|
|
+ color: {
|
|
|
+ type: 'linear',
|
|
|
+ x: 0,
|
|
|
+ y: 0,
|
|
|
+ x2: 0,
|
|
|
+ y2: 1,
|
|
|
+ colorStops: [{
|
|
|
+ offset: 0,
|
|
|
+ color: '#6076FF' // 0% 处的颜色
|
|
|
+ }, {
|
|
|
+ offset: 1,
|
|
|
+ color: 'rgba(96,118,255,0.1)' // 100% 处的颜色
|
|
|
+ }],
|
|
|
+ global: false, // 缺省为 false
|
|
|
+ },
|
|
|
+ },
|
|
|
+ //折线宽度
|
|
|
+ lineStyle: {
|
|
|
+ width: 2
|
|
|
+ },
|
|
|
+ color: '#6076FF',
|
|
|
+ data: leftData // 后台传过来的动态数据
|
|
|
+ //设置固定的数据
|
|
|
+ // data: [
|
|
|
+ // 23, 30, 20, 23, 30, 26, 20, 25, 25
|
|
|
+ // ]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: 'rightData',
|
|
|
+ type: 'line',
|
|
|
+ yAxisIndex: 1,
|
|
|
+ animation: true,
|
|
|
+ symbol: 'none',
|
|
|
+ areaStyle: {
|
|
|
+ color: {
|
|
|
+ type: 'linear',
|
|
|
+ x: 0,
|
|
|
+ y: 0,
|
|
|
+ x2: 0,
|
|
|
+ y2: 1,
|
|
|
+ colorStops: [{
|
|
|
+ offset: 0,
|
|
|
+ color: '#FFC560' // 0% 处的颜色
|
|
|
+ }, {
|
|
|
+ offset: 1,
|
|
|
+ color: 'rgba(255, 197, 96,0.3)' // 100% 处的颜色
|
|
|
+ }],
|
|
|
+ global: false, // 缺省为 false
|
|
|
+ },
|
|
|
+ },
|
|
|
+ lineStyle: {
|
|
|
+ width: 2
|
|
|
+ },
|
|
|
+ color: '#FFC560',
|
|
|
+ data: rightData,//后台传过来的动态数据
|
|
|
+ //设置固定的数据
|
|
|
+ // data: [
|
|
|
+ // 2, 1, 0.5, 0.9, 2, 1.0, 0.6, 2, 0.5
|
|
|
+ // ]
|
|
|
+ }]
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
Page({
|
|
|
- data: {
|
|
|
- frameStyle: { useTop: true, name: '学员统计', leftArrow: true, useBar: false },
|
|
|
- ec: {
|
|
|
- onInit: initChart
|
|
|
- }
|
|
|
- },
|
|
|
- // 返回
|
|
|
- back(e) {
|
|
|
- wx.navigateBack({ delta: 1 })
|
|
|
- },
|
|
|
- /**
|
|
|
- * 生命周期函数--监听页面加载
|
|
|
- */
|
|
|
- onLoad: function (options) { },
|
|
|
- // 监听用户是否登录
|
|
|
- watchLogin: async function () {
|
|
|
- const that = this;
|
|
|
- wx.getStorage({
|
|
|
- key: 'user',
|
|
|
- success: async res => {
|
|
|
+ data: {
|
|
|
+ frameStyle: { useTop: true, name: '学员统计', leftArrow: true, useBar: false },
|
|
|
+ ec: {
|
|
|
+ lazyLoad: true //初始化加载
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 返回
|
|
|
+ back(e) {
|
|
|
+ wx.navigateBack({ delta: 1 })
|
|
|
+ },
|
|
|
+ initGraph: function (leftData, rightData) {
|
|
|
+ let oneComponent = this.selectComponent('#mychart');
|
|
|
+ oneComponent.init((canvas, width, height) => {
|
|
|
+ const chart = echarts.init(canvas, null, {
|
|
|
+ width: width,
|
|
|
+ height: height
|
|
|
+ });
|
|
|
+ initChart(chart, leftData, rightData);
|
|
|
+ this.chart = chart;
|
|
|
+ return chart;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 生命周期函数--监听页面加载
|
|
|
+ */
|
|
|
+ onLoad: function (options) {
|
|
|
+ const that = this;
|
|
|
+ // let leftData=[{20}]
|
|
|
+ // let url = "xxxxx";
|
|
|
+ // let params = {
|
|
|
+ // "openId": options.id,
|
|
|
+ // };
|
|
|
+ // wx.request({
|
|
|
+ // url: "xxxx",
|
|
|
+ // method: 'POST',
|
|
|
+ // data: params,
|
|
|
+ // header: header,
|
|
|
+ // success: (res) => {//从后台获取的数据
|
|
|
+ // that.setData({leftData: xxx,rightData: xxxx });
|
|
|
+ // //给图表加上数据
|
|
|
+ // that.initGraph(that.data.leftData, that.data.rightData)
|
|
|
+ // }
|
|
|
+ // })
|
|
|
|
|
|
- },
|
|
|
- fail: async res => {
|
|
|
- // wx.redirectTo({ url: '/pages/index/index' })
|
|
|
- }
|
|
|
- })
|
|
|
- },
|
|
|
+ },
|
|
|
+ // 监听用户是否登录
|
|
|
+ watchLogin: async function () {
|
|
|
+ const that = this;
|
|
|
+ wx.getStorage({
|
|
|
+ key: 'user',
|
|
|
+ success: async res => {
|
|
|
|
|
|
- /**
|
|
|
- * 生命周期函数--监听页面初次渲染完成
|
|
|
- */
|
|
|
- onReady: function () { },
|
|
|
- /**
|
|
|
- * 生命周期函数--监听页面显示
|
|
|
- */
|
|
|
- onShow: function () {
|
|
|
- const that = this;
|
|
|
- // 监听用户是否登录
|
|
|
- that.watchLogin();
|
|
|
- },
|
|
|
- /**
|
|
|
- * 页面上拉触底事件的处理函数
|
|
|
- */
|
|
|
- /**
|
|
|
- * 生命周期函数--监听页面隐藏
|
|
|
- */
|
|
|
- onHide: function () {
|
|
|
+ },
|
|
|
+ fail: async res => {
|
|
|
+ // wx.redirectTo({ url: '/pages/index/index' })
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
|
|
|
- },
|
|
|
+ /**
|
|
|
+ * 生命周期函数--监听页面初次渲染完成
|
|
|
+ */
|
|
|
+ onReady: function () { },
|
|
|
+ /**
|
|
|
+ * 生命周期函数--监听页面显示
|
|
|
+ */
|
|
|
+ onShow: function () {
|
|
|
+ const that = this;
|
|
|
+ // 监听用户是否登录
|
|
|
+ that.watchLogin();
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 页面上拉触底事件的处理函数
|
|
|
+ */
|
|
|
+ /**
|
|
|
+ * 生命周期函数--监听页面隐藏
|
|
|
+ */
|
|
|
+ onHide: function () {
|
|
|
|
|
|
- /**
|
|
|
- * 生命周期函数--监听页面卸载
|
|
|
- */
|
|
|
- onUnload: function () {
|
|
|
+ },
|
|
|
|
|
|
- },
|
|
|
+ /**
|
|
|
+ * 生命周期函数--监听页面卸载
|
|
|
+ */
|
|
|
+ onUnload: function () {
|
|
|
|
|
|
- /**
|
|
|
- * 页面相关事件处理函数--监听用户下拉动作
|
|
|
- */
|
|
|
- onPullDownRefresh: function () {
|
|
|
+ },
|
|
|
|
|
|
- },
|
|
|
+ /**
|
|
|
+ * 页面相关事件处理函数--监听用户下拉动作
|
|
|
+ */
|
|
|
+ onPullDownRefresh: function () {
|
|
|
|
|
|
+ },
|
|
|
|
|
|
- /**
|
|
|
- * 用户点击右上角分享
|
|
|
- */
|
|
|
- onShareAppMessage: function (res) {
|
|
|
|
|
|
- },
|
|
|
+ /**
|
|
|
+ * 用户点击右上角分享
|
|
|
+ */
|
|
|
+ onShareAppMessage: function (res) {
|
|
|
+
|
|
|
+ },
|
|
|
})
|
