Complete steps for using Echarts and sub-packaging in WeChat Mini Program

Preface

Although the holiday is over, it shows up on us in another form (touching our belly). Displaying data graphically on the mini program is the holiday pre-research task assigned to me. I checked the articles of the big guys on the Internet and learned about Ucharts, F2, Wx-charts and Echarts. I only tried F2 and Echarts. Due to the recent update of Echarts and my more familiarity with Echarts, I chose Echarts. I also tried F2, and although it worked, I was not too familiar with it so I gave up.

Let’s get down to business

First, I saw someone else's article about Echarts, which gave the link to the official website. Then I went to the official website and read it. It was relatively simple. I will also give a link here. The general steps

1. Download the official website example.

2. Copy the ec-canvas folder in the official website example to the project directory.

3. Introduce ec-canvas into the specific page just like using components.

4. Initialize in the js of the specific page.

After downloading the official website example, find the ec-canvas folder, which contains echarts.js, wx-canvas.js and ec-canvas. Then copy this folder to the directory of your own project. At first, I put it under utils, and then I put it somewhere else after subpackaging. Here I will put it under utils. Then the project became 700+KiB larger.

Page

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>

xxx.js must first import echarts before using the following initChart method, so import echarts according to the path of the placed ec-canvas.

import * as echarts from 'xxx/xxx/xxx/ec-canvas/echarts'; // Import echarts according to the path of the placed ec-canvas
let chart = null // Use a variable to save the initialization of echarts let options = { // Graphics configuration, anyone who has used echarts knows what it means~ Here is a basic example of the official website line chart 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) { // here canvas, width, height, dpr can be ignored const chart = echarts.init(canvas, null, {
 width: width,
 height: height,
 devicePixelRatio: dpr // pixels});
 canvas.setChart(chart);
 chart.setOption(options);
 return chart;
}

Page({
 data: {
 ec: {
  onInit: initChart // Don't add brackets here!
 }
 }
});

Save and run. At this point, echarts can theoretically display the results, but you still need to debug it yourself.

Use a chart variable to save the initialization of echarts. The official website also writes options in the method, so I took it out. So what is the use of chart? Because most of the data is obtained asynchronously, echarts needs to be rendered dynamically. Once the data is obtained, this chart is used.

chart.setOption({
 xAxis:
 data: newData.map(item => {
  return item[0];
 })
 },
 series: {
 data: newData.map(item => {
  return item[1];
 })
 }
})

Regarding the data format here, please refer to what image you want to render in each person's options. I am using the example portal provided by the official website. The data update of echarts can be directly updated using setOption.

The zooming and scrolling in the developer tools didn't work, but it worked on the phone after uploading to the trial version. WeChat has type="2d" for canvas. If you want to use type="2d" in ec-canvas, you need to modify ec-canvas.js

data: {
 isUseNewCanvas: true // Change to true here, the default is false
}

Because: isUseNewCanvas is false by default, which is the old version of canvas.

<!-- New: Interface aligned to 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>
<!-- Old -->
<canvas wx:else class="ec-canvas" canvas-id="{{ canvasId }}" bindinit="init" bindtouchstart="{{ ec.disableTouch ? '' : 'touchStart' }}" bindtouchmove="{{ ec.disableTouch ? '' : 'touchMove' }}" bindtouchend="{{ ec.disableTouch ? '' : 'touchEnd' }}"></canvas>

echarts.js has a large size and the upload project has a 2 MiB limit

The echarts.js in the downloaded ec-canvas is several hundred KiB, which is quite large compared to 2MiB. When I uploaded the project, it prompted me that the limit was exceeded. The only two methods I could think of that would be effective immediately were to reduce the size of echarts.js and to split it into different packages.

The problem of large size of echarts.js

There is an on-demand construction method on the official website of echarts (portal---online customization). Enter the online customization below and select the graph you need. I chose a line graph and a rectangular coordinate system. In the component, I selected all the components except brush selection, toolbar and custom graphics. I also checked svg in other options. Then click download to enter the building page. When the building is completed, it will automatically download an echarts.min.js file, which reduces the size by about 200 KiB. Then rename it to echarts.js and replace it in ec-canvas.

Upload project 2MiB limit problem

The size of echarts.js has been reduced, but the upload restriction problem still exists, that is, subpackaging.

In app.json, there is a subpackages

{
 "subPackages": [
 {
  "root": "xxx/xxx",
  "name": "xxx",
  "independent": false,
  "pages": [
  "pages/xxx",
  "pages/xxx",
  "pages/xxx"
  ]
 },
 {
  "root": "baoziTask/",
  "name": "baozi",
  "pages": [
  "pages/roubaozi/roubaozi"
  ]
 }
 ],
}

This subpackage is described quite simply on the official website, but this is how I understood it when I used it.

Root is the path to be subpackaged, I put it in the root directory. Then all files under baoziTask will be considered as a package. All files not in the baoziTask path will be packaged into the main package of app.

name is the alias of the subpackage, which will be used during pre-download. This pre-download means that when you are on a certain page, you want to actively download the subpackage that may be used to increase the access speed. For example, when I enter a certain page, I will most likely click somewhere to jump to a certain sub-package. At this time, I can pre-download this sub-package instead of downloading it when I jump.

Independent refers to whether the subcontract is independent, but I have never used it so I don’t have an intuitive feeling about it. It is said that it can run independently and does not depend on the main package of app. This requires configuration, not code download, configuration of preloadRule. For details, you need to refer to the official website and try it yourself. Portal---Sub-package pre-download

Pages is easier to understand, they are the pages within the package.

When you want to jump to the pages in these subpackages, just write the correct path for the jump URL. For example, when jumping to roubaozi, the URL is written as follows:

url: '/baoziTask/pages/roubaozi/roubaozi'

How to check if the subcontracting is successful?

There is a details button in the upper right corner of the developer tool. Click it to view the details and slide it down. You can see the "local code" line. You can click the size behind it to see the size of the main package and each sub-package. If you see that the main package does not exceed 2MiB, then the upload is successful!

Crowd: Why do you add an i between KB and MB? Xiaotsuojiao: Because to express it accurately, it is 1024

Summarize

This is the end of this article about the use of Echarts and subcontracting in WeChat Mini Programs. For more relevant content about WeChat Mini Programs Echarts and subcontracting, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope everyone will support 123WORDPRESS.COM in the future!