【wxcharts】从数据库取数据动态渲染_wx-chart 动态数据

首先在wxml给出一个canvas

<canvas canvas-id="lineCanvas" disable-scroll="true" class="canvas" bindtouchstart="touchcanvas"></canvas>
1

wxss描述样式

.canvas {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 10%;
}
1
2
3
4
5
6

在js文件中引入文件，并且定义canvas-id，在data中定义color：

var wxCharts = require('../../utils/wxcharts.js');
const app = getApp()
var lineChart = null;
data: {
    textcolor: '#014f8e',
    //从缓存中取数据时，现在data中定义
    name:'',
    //折线图所展示的数值
    min:'',
  },
1
2
3
4
5
6
7
8
9
10

在onShow中加载：

onShow: function () {
    this.canvas1_click()
  },
1
2
3

canvas1_click: function () {
    var that = this
    this.setData({
      textcolor: '#014f8e',
    })
    var oppenid = wx.getStorageSync('name');//此处为取出在缓存中的数值
    var xArr = ["1-2", "3-4", "5-6", "7-8", "9-10", "11-12", "13-14", "15-16", "17-18", "19-20", "21-22", "23-24", "25-26", "27-28", "29-30"]
    var yArr = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
    wx.request({
      url: '',//此处为后台接口
      method: 'POST',
      header: {
        'content-type': 'application/x-www-form-urlencoded',
      },
      data: {
      //由于后台查询数据时需要前端传数据，放在data中
      //这里的name是从缓存中取出来的
        name: name
      },
      success: function (res) {
        //接口中的数组表现为data{sps{heightArray[1,2,3,4,5,6]}}
        //拆分的时候用split(',')
        let tempArr = res.data.sps['heightArray'].split(',')
        for (var i = 0; i < tempArr.length; i++) {
          yArr[i] = tempArr[i]
        }
        that.setData({
        //折线图所展示的数据
          min: tempArr.sort()[0],
        })
      },
      fail: function (res) {
        wx.hideLoading()
        wx.showToast({
          title: '请稍后重试',
          icon: 'none',
          duration: 1500
        })
      }
    })

    this.canvasChart(xArr, yArr, '高度')
  },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

图表点击事件：

touchcanvas: function (e) {
    lineChart.showToolTip(e, {
      format: function (item) {
        return item.name + ':' + item.data
      }
    });
  },
1
2
3
4
5
6
7

绘制图表：

canvasChart: function (x_data, y_data, name) {
    console.log(y_data)
    var windowWidth = '',
      windowHeight = ''; //定义宽高
    try {
      var res = wx.getSystemInfoSync(); //试图获取屏幕宽高数据
      windowWidth = res.windowWidth / 750 * 690; //以设计图750为主进行比例算换
      windowHeight = res.windowWidth / 750 * 550; //以设计图750为主进行比例算换
    } catch (e) {
      console.error('getSystemInfoSync failed!'); //如果获取失败
    }

    lineChart = new wxCharts({
      canvasId: 'lineCanvas',
      type: 'line',
      categories: x_data,
      animation: true,
      series: [{
        name: name,
        data: y_data,
        format: function (val, name) {
          return val + 'cm';
        }
      }, ],
      xAxis: {
        disableGrid: true
      },
      yAxis: {
        title: '高度',
        format: function (val) { //返回数值
          return val + 'cm';
        },
        max: 20,
        min: 0
      },
      width: windowWidth,
      height: windowHeight,
      dataLabel: false,
      dataPointShape: true,
      extra: {
        lineStyle: 'curve'
      }
    });
  },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

借鉴：http://t.csdn.cn/03Dwv

var wxCharts = require('../../utils/wxcharts.js');
var lineChart = null;
Page({
  data:{
    textcolor1:'#014f8e',
    textcolor2:'#bfbfbf',
  },
  onLoad:function(){
    //下面是图表一显示的数据，只需替换掉数据折现就会发生变化实现动态生成
    var x_data=["12-05", "12-06", "12-07", "12-08", "12-09", "12-10", "12-11", "12-12", "12-13", "12-14", "12-15", "12-16", "12-17", "12-18", "12-19"]
    var y_data= ["2710778.83", "3701004.17", "1959107.37", "1875401.10", "1844007.76", "1927753.07", "2214439.68", "2501855.64", "2348521.30", "1815527.72", "1938038.04", "1911152.88", "2062097.59", "2397674.45", "2796167.86"]
    //绘制折线图
    this.OnWxChart(x_data,y_data,'图表一')
  },
  //更换折线图数据为图表一数据
  canvas1_click:function(){
    this.setData({
      textcolor1:'#014f8e',
      textcolor2:'#bfbfbf',
    })  
    var x_data=["12-05", "12-06", "12-07", "12-08", "12-09", "12-10", "12-11", "12-12", "12-13", "12-14", "12-15", "12-16", "12-17", "12-18", "12-19"]
    var y_data= ["2710778.83", "3701004.17", "1959107.37", "1875401.10", "1844007.76", "1927753.07", "2214439.68", "2501855.64", "2348521.30", "1815527.72", "1938038.04", "1911152.88", "2062097.59", "2397674.45", "2796167.86"]
    //绘制折线图
    this.OnWxChart(x_data,y_data,'图表一')
  },
  //更换折线图数据为图表二数据
  canvas2_click:function(){
    this.setData({
      textcolor1:'#bfbfbf',
      textcolor2:'#014f8e',
    })
    var x_data=["1", "2", "3", "4", "5", "6", "7", "8", "9"]
    var y_data= ["113", "620", "332", "540", "580", "580", "603", "100", "605"]
    //绘制折线图
    this.OnWxChart(x_data,y_data,'图表二')
  },
  //图表点击事件
  touchcanvas:function(e){
    lineChart.showToolTip(e, {
      format: function (item, category) {
        return category + ' ' + item.name + ':' + item.data
      }
    });
  },
  //折线图绘制方法
  OnWxChart:function(x_data,y_data,name){
    var windowWidth = '', windowHeight='';    //定义宽高
    try {
      var res = wx.getSystemInfoSync();    //试图获取屏幕宽高数据
      windowWidth = res.windowWidth / 750 * 690;   //以设计图750为主进行比例算换
      windowHeight = res.windowWidth / 750 * 550    //以设计图750为主进行比例算换
    } catch (e) {
      console.error('getSystemInfoSync failed!');   //如果获取失败
    }
    lineChart = new wxCharts({
      canvasId: 'lineCanvas',     //输入wxml中canvas的id
      type: 'line',     
      categories:x_data,    //模拟的x轴横坐标参数
      animation: true,  //是否开启动画
     
      series: [{
        name: name,
        data: y_data,
        format: function (val, name) {
          return val + '元';
        }
      }
      ],
      xAxis: {   //是否隐藏x轴分割线
        disableGrid: true,
      },
      yAxis: {      //y轴数据
        title: '',  //标题
        format: function (val) {  //返回数值
          return val.toFixed(2);
        },
        min: 400000.00,   //最小值
        gridColor: '#D8D8D8',
      },
      width: windowWidth*1.1,  //图表展示内容宽度
      height: windowHeight,  //图表展示内容高度
      dataLabel: false,  //是否在图表上直接显示数据
      dataPointShape: true, //是否在图标上显示数据点标志
      extra: {
        lineStyle: 'Broken'  //曲线
      },
    });
  }
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90