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

时间：2024-03-11 10:00:53

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

前言

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

什么是ECharts？

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

echarts微信小程序版下载地址

安装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 获取。

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

觉得不错，给个 呗~

相关文章