028-86261949

当前位置:首页 > 技术交流 > 小程序echarts和分包使用

小程序echarts和分包使用

2021/03/15 11:18 分类: 技术交流 浏览:0

1. 需求详解

很多时候,我们在项目中会大量使用到可视化图表数据,在大量工作中,我们最熟悉的可视化数据一定是echarts这个工具,它非常好用并免费.听起来很香,对!它真的很香。

但是当我们在特定场景中,比如小程序,那它就是一个非常头痛的存在,为什么?在小程序中代码上传大小规定只有2M,而echarts在小程序中使用必须要在本地使用,无法使用连接的方式外部引用(微信官方规定项目有请求白名单)。

那么在项目中使用了echarts会非常占用我们有限的空间,那怎么办呢,下面就告诉大家在小程序项目使用可视化工具的方法。

 

2. 使用echarts

首先去官网,相对于有小程序开发经验的开发者来说, 步骤比较简单。大体上的步骤:

1、下载官网例子。

2、把官网例子中的ec-canvas文件夹复制到项目目录中。

3、在具体的页面中像使用组件一样引入ec-canvas。

4、在具体的页面的js中进行初始化。

在下载完官网例子后,找到ec-canvas文件夹,里面有echarts.js,wx-canvas.js还有ec-canvas四件套。

然后把这个文件夹复制到自己项目的目录下,放到utils下的,后来分包之后就放别的地方,这里就当放在utils下了。然后项目就大了700+KiB。

页面中的使用   xxx.json文件中

{

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

 }

xxx.wxml 中使用组件来实例

<view class="container-echarts margin-top-10">

<ec-canvas class="mycharts" id="mychart-dom-bar" canvas-id="mychart-bar" ec="{{ ec }}"></ec-canvas>

</view>

 

js文件中 

首先要引入echarts然后才能用下面的initChart方法,所以根据放置的ec-canvas的路径引入echarts。

 

import * as echarts from 'xxx/xxx/xxx/ec-canvas/echarts'; // 根据放置的ec-canvas的路径引入echarts

let chart = null  // 用一个变量保存echarts的初始化

let options = {   // 图形配置,用过echarts的人都知道是嘛意思~ 这里给出官网线图的基础例子

  xAxis: {

        type: 'category',

        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']

    },

    yAxis: {

        type: 'value'

    },

    series: [{

        data: [150, 230, 224, 218, 135, 147, 260],

        type: 'line'

    }]

}  

function initChart(canvas, width, height, dpr) {  // 这里的canvas,width,height,dpr都可以不用管

  const chart = echarts.init(canvas, null, {

    width: width,

    height: height,

    devicePixelRatio: dpr // 像素

  });

  canvas.setChart(chart);

  chart.setOption(options);

  return chart;

}

 

Page({

  data: {

    ec: {

      onInit: initChart  // 这里不要加括号哦!

    }

  }

});

 

保存运行,到这一步理论上echarts已经可以显示了,实际怎么样还要自己调试的。

用一个chart变量保存echarts的初始化,官网上把options也写在方法里,我给拿出来了。

那chart有什么用呢?因为大部分的数据都是异步获取的,所以要动态渲染echarts。当拿到数据后,这个chart就用上了。

 

chart.setOption({

  xAxis: {

    data: newData.map(item => {

      return item[0];

    })

  },

  series: {

    data: newData.map(item => {

      return item[1];

    })

  }

})

 

 

我们定义的data数据

data: {

  isUseNewCanvas: true // 这里改成true, 默认是false

}

 

在组件中使用数据 2种方式

<!-- 新的:接口对其了H5 -->

<canvas wx:if="{{isUseNewCanvas}}" type="2d" class="ec-canvas" canvas-id="{{ canvasId }}" bindinit="init" bindtouchstart="{{ ec.disableTouch ? '' : 'touchStart' }}" bindtouchmove="{{ ec.disableTouch ? '' : 'touchMove' }}" bindtouchend="{{ ec.disableTouch ? '' : 'touchEnd' }}"></canvas>

<!-- 旧的 -->

<canvas wx:else class="ec-canvas" canvas-id="{{ canvasId }}" bindinit="init" bindtouchstart="{{ ec.disableTouch ? '' : 'touchStart' }}" bindtouchmove="{{ ec.disableTouch ? '' : 'touchMove' }}" bindtouchend="{{ ec.disableTouch ? '' : 'touchEnd' }}"></canvas>

 

 

3. 分包加载

好,上面是我们使用echarts的使用步骤,但是echarts文件大小有500KB+ 它严重影响了我们项目打包大小,所以这里必须使用分包加载

在app.json里面,有一个subpackages

{

  "subPackages": [

    {

      "root": "xxx/xxx",

      "name": "xxx",

      "independent": false,

      "pages": [

        "pages/xxx",

        "pages/xxx",

        "pages/xxx"

      ]

    },

    {

      "root": "baoziTask/",

      "name": "baozi",

      "pages": [

        "pages/roubaozi/roubaozi"

      ]

    }

  ],

}

 

这个分包在官网上讲的挺简单的,但是在我使用时是这样理解的。

root是要分包的路径,放到根目录的。那么baoziTask下的所有文件都会被认为是一个包。那不在这个baoziTask路径下的文件都会被打包进app这个主包内。

name就是分包的别名,预下载的时候会用,这个预下载就当在某个页面的时候,想主动下载这个可能被使用的分包,以提高访问速度。

比如当我进入某个页面的时候,很大可能会点击某处跳转到某个分包里面,这个时候可以预下载这个分包,而不用跳转的时候才下载这个分包。

independent是分包是否独立,但是我没用过就没有直观的感觉。说是可以单独运行,不依赖app这个主包。这个需要配置,不是代码的下载,配置preloadRule,具体的话得看官网和自己尝试了。

#标签:H5,前端,小程序,echarts