在小程序中如何优雅的实现数据可视化

in 小程序 with 0 comment

封面图

前言

现在很多企业都开始将产品部分、甚至全部模块转移到小程序中。想一想当年的轻应用,小程序的发展到今天属实非常不错。况且它的身后有微信这么一个庞大的生态圈。自从去年末开始,我也好久没有录制小程序的课程了,那今天就写一篇关于小程序之echarts数据可视化的踩坑记。

什么是ECharts?

做前端的朋友一定听过Echarts吧。我们平常在项目中需要使用折线图柱状图饼图K线图等等图表展示一些数据。简单来说,它就是我们做数据以图表展示的开源库。不过ECharts官网没有小程序版本的开源库可以引入~不过呢,已经有人在GitHub上发布了echarts的小程序版本。

echarts微信小程序版下载地址:
https://github.com/ecomfe/echarts-for-weixin

安装ECharts组件

我们将下载好的文件中的ec-canvas目录放到小程序项目的根目录中(如下图所示)。然后在需要引入的Page中的JSON,js引入(如下代码块所示)。
根目录结构

在index目录中的index.json引入ec-canvas组件。

{
  "usingComponents": {
    "ec-canvas": "../../ec-canvas/ec-canvas"
  }
}

在index目录中的index.js引入charts.js依赖。

import * as echarts from'../../ec-canvas/echarts';

ec-canvas布局

在index目录中的index.wxml中建立ec-canvas,并且设置它的高度。

<view class="echart_panel">
    <ec-canvas id="mychart" canvas-id="mychart-line" ec="{{ ec }}"></ec-canvas>
 </view>

在index目录中的index.wxss中定义echart_panel的样式。

.echart_panel {
  width: 750rpx;
  height: 700rpx;
}

异步请求数据并渲染数据

平常业务中,我们的数据都是实时获取的。我就不使用模拟数据展示了。
逻辑层(js)——data中设置echarts延时加载。

ec: {
      lazyLoad: true,
    }

通过id获取echarts组件

this.ecComponent =this.selectComponent('#mychart');

获取接口数据,使用this.setData({})渲染到视图层

 getPriceByMonth() {
    var that = this;
    wx.request({
      url: app.globalData.appUrl + '/detail/getPriceByMonth',
      data: {
        //设置接口参数
        year: that.data.nowSelectYear.substring(0, 4),
        month: that.data.nowSelectMonth.substring(0, 2),
        openid: wx.getStorageSync('openid'),
        type: that.data.ieSelectStatus
      },
      success(res) {//成功回调
        var data = res.data;
        var countPrice = 0;
        var xData = [];
        var yData = [];
        for (var i in data) {
          xData.push(data[i].category);
          yData.push(data[i].price);
        }
        //去调用初始化设置图表映射函数
        that.initChart(xData, yData);
        that.setData({
          xData,
          yData
        })
      },
      fail(e) {}
    })
  }

设置图表映射函数

/**设置图表映射 */
  initChart: function(xData, yData) {
    var that = this;
    var option = {
      grid: {
        containLabel: true
      },
      tooltip: {//重写图表提示内容
        show: true,
        trigger: 'axis',
        position: ['50%', '30%'],
        formatter: function(params) {
          return params[0].axisValue + ': ' + params[0].data + '元'
        }
      },
      xAxis: {
        type: 'category',
        data: xData,//异步请求的数据
        nameTextStyle: {
          fontSize: 20
        },
      },
      yAxis: {
        type: 'value',
        name: '元',
        axisLabel: {
          formatter: function(p) {//重写y坐标数值单位
            return p;
          }
        },
        nameTextStyle: {
          fontSize: 20
        }
      },
      series: [{
        data: yData,//异步请求的数据
        type: 'line',
        label: {
          show: true
        }
      }]
    };
    //echarts会继承父元素的宽高,所以我们一定要设置echarts组件父元素的高度。
    var myChart = that.ecComponent.init((canvas, width, height) => {
      const chart = echarts.init(canvas, null, {
        width: width,
        height: height,
      });
      //给echarts 设置数据及配置项(图表类型、数据量等)
      chart.setOption(option);
      return chart;
    });

  }

预览图

预览图

小提示

ec-canvas 目录下有一个 echarts.js,它不是最新版本。我建议去官网在线定制。定制版的体积会更小,况且小程序本来就限制代码体积,然后将自己定制的echarts.js替换就可以了。

可恶的坑

1、echarts不可以配合scroll-view+tabbar使用,在tabbar切换的时候,如果echarts在scroll-view中,切换后会消失(俗话:白屏)。
2、自定义的tabbar中,切换tabbar时,对echarts需使用wx:if进行显示隐藏处理,否则切换后也会消失(俗话:白屏)。
3、echarts 的所有父级元素都不能有定位,否则在测试时就会出现echarts不随屏幕滚动的bug。overflow:auto 也不行。
4、echarts的层级最高 如果自定义的tabar 要使用cover—view,不然echarts会显示在tabar的上面
5、自定义tabbar中,建议设置延迟1秒左右再通过id获取echarts组件,渲染数据。否则会寻找不到echarts,小程序会报错。

结语

因为近期很多同学反映自己访问GitHub总是超时,所以我已经把下载好的echarts小程序版放到公众号(郭小睿同学)内,有需要的同学,回复echarts获取。

我已经把该踩的坑给你踩完了,最后,如果你在开发中遇到的困惑,欢迎进行留言讨论。

Responses