小程序 wx-chart图表

 

对应图表类型：

线图 line

柱状图 column

区域图 area

雷达图 radar

1.下载wxchart.js到小程序某文件夹并在需要的页面js文件引入

const Charts=require('wxcharts.js')

 

data: {

　//画布的大小

    canvas:{

        width:'320',

        height:'205',

        canvasheight:'535rpx',

    }

  },

 

//设置画布

  setcanvas:function(){

    new Charts({

      canvasId: 'lineCanvas',

      type: 'line',

      background:'black',

      categories: ['0', '1', '2', '3', '4', '5','6'],

　　//适用于折线图，curve曲线，straight直线

 　  extra:{

        lineStyle:'straight',

      },

　  //x轴数据和样式

      series: [{

          name: '最低温',

          data: [0, 12, 25, 30, 24, 20],

          format: function (val) {

              return val.toFixed(0) + '°C';

          }

      }, {

          name: '最高温',

          data: [35, 24, 23, 22, 21, 20],

          color:'white',

          format: function (val) {

              return val.toFixed(0) + '°C';

          }

      },

      {

        name: '温差',

        data: [10, 20, 30, 20, 11, 20],

        color:'yellow',

        format: function (val) {

            return val.toFixed(0)

        }

    }

    ],

　  //y轴数据和样式

      yAxis: {

          title: '',

          format: function (val) {

              return val.toFixed(0);

          },

          min: 0,

      },

      width:this.data.canvas.width,

      height:this.data.canvas.height

  })

  },

 

  //画布自适应

  getwindow:function(){

    wx.getSystemInfo({

      success:res=> {

          this.setData({

            canvas:{

                width:res.windowWidth,

                height:res.windowWidth/1.56,

                canvasheight:res.windowWidth/1.4+'px'

            }

          })

      },

    })

  },

 

//监听并引用事件

onShow: function () {

    this.getwindow()

    this.setcanvas()

  },

 

2.wxml

<view class="canvasbg">

  <text>°C/1</text>

  <canvas canvas-id="lineCanvas" disable-scroll="true" class="canvas" style="height:{{canvas.canvasheight}}"></canvas>

</view>

 

3.wxss

.canvasbg{

  width:100%;

  margin:auto;

  background-color:black;

  overflow: hidden;

  padding-top:30rpx;

}

.canvasbg text{

  color:#666;

  font-weight: bold;

  font-size:25rpx;

}

.canvas {

  width:1200rpx;

  top:30rpx;

  left:-20rpx;

  margin:auto;

}