原生小程序实现折线图wx-charts(比echars体积小很多)

        因工作需要做折线图,做插件的时候使用echars的定制折线图,但是体积还是太大了,就定制了一个体积就有500kb,所以后来大改,全部改用wx-charts显示折线图,只有40kb左右,做个普通的显示图表还是很不错的选择

实现效果如图:

1.首先下载wx-charts图表,选择我框的这个压缩后的文件就行

2.可以看看wx-charts官网

3.在需要使用图表的pages页面的wxml文件下先定义一个画布,

canvas-id:这个很重要,自己定义个属性值,对应后面的js代码!!!

  <view class="mychart-view">
        <canvas canvas-id="areaCanvas" disable-scroll="true" class="canvas"></canvas>
    </view>

4.在wxss页面给画布添加宽度和高度,我在这边的画布父级添加了宽高,当然你也可以直接给canvas添加宽高,如果不添加宽高可能导致无法正常显示哦

  .mychart-view,.mychart-wd{
    margin-top: 50rpx;
    width: 100%;
    height: 520rpx;
  }
  .canvas{
    width: 100%;
    height: 100%;
}

5.到了最重要的js代码了!

5.1-首先先把下好的wxcharts-min.js文件放在项目公用的文件夹下,之后导入到需要使用的页面的js文件中,我在这是放在了api的文件,可以自行更改哈~

import wxCharts from '../../api/wxcharts-min'

js文件如下, x轴和y轴数据都是后台反的数据哈,是以['1','2','3']这种格式的,如果想使用静态可以使用这种格式显示哈~,顺便提一嘴,函数要定义在page({})的外面,和page同级,如果page里要调用,可以使用函数名的形式调用echartsdt()

function echartsdt() {
  var windowWidth = '',
    windowHeight = ''; //定义宽高
  try {
    var res = wx.getSystemInfoSync(); //试图获取屏幕宽高数据
    windowWidth = res.windowWidth / 750 * 650; //以设计图750为主进行比例算换
    windowHeight = res.windowWidth / 750 * 500 //以设计图750为主进行比例算换
  } catch (e) {
    console.error('getSystemInfoSync failed!'); //如果获取失败
  }
  new wxCharts({
    canvasId: 'areaCanvas',
    type: 'area',
    categories: dateechars,//x轴数据
    animation: true,
    legend: false,
    series: [{
      name: '步数',
      data: all_walk,//y轴数据
      color: '#9ad672' //折线颜色
    }],
    yAxis: {
      title: '步数/步',
      min: 0,
      gridColor: '#e0e6f1',
      type: 'value'
    },
    xAxis: {},
    extra: {
      legendTextColor: '#333',
      // lineStyle: 'curve'
    },
    width: windowWidth * 1.1, //图表展示内容宽度
    height: windowHeight, //图表展示内容高度
  });
 
}

讲解结束啦~希望对你有所帮助