Wechat applet uses Echarts and subcontracting

The holiday is over, but it shows us in another form (touching our tummy). It was my holiday pre-research task to display data graphically on the small program. I checked the articles of Internet masters and learned about Ucharts, F2, WX-Charts and Echarts. I only tried F2 and Echarts, because of the recent update of Echarts and I am more familiar with Echarts. So I chose Echarts, F2 also tried, although it came out, but I wasn’t too familiar with it so I gave up.

Get into the business

First of all, I saw someone else’s article about Echarts, gave the official website portal, and then went to the official website to follow the look, relatively simple, here I also give a portal. General steps

1. Download examples from the official website.

2. Copy the ec-canvas folder from the official website example into the project directory.

3. Introduce EC-Canvas in a concrete page as a component.

4. Initialize it in the JS of a specific page.

After downloading the examples from the official website, find the ec-Canvas folder, which contains echarts.js, wX-Canvas. js and ec-Canvas. Then I copy this folder into my project directory. I put it under utils at first, and then I subcontracted it and put it somewhere else, so I put it under utils here. Then the project is 700+KiB bigger.

In the page

xxx.json

{
  "usingComponents": {
    "ec-canvas": "xxx/xxx/xxx/ec-canvas/ec-canvas"}}Copy the code

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>
Copy the code

Xxx. js first introduces echarts before using the initChart method below, so it introduces echarts according to the path of the ec-Canvas placed.

import * as echarts from 'xxx/xxx/xxx/ec-canvas/echarts'; // Introduce echarts based on the path of the placed EC-canvas
let chart = null  // Use a variable to hold the initialization of echarts
let options = {   // Echarts is a graphical configuration
  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 can be ignored
  const chart = echarts.init(canvas, null, {
    width: width,
    height: height,
    devicePixelRatio: dpr / / pixel
  });
  canvas.setChart(chart);
  chart.setOption(options);
  return chart;
}

Page({
  data: {
    ec: {
      onInit: initChart  // No parentheses here!}}});Copy the code

Save and run. At this point echarts should in theory be able to show you how to actually debug it yourself.

Use a chart variable to save echarts initialization, the official website also wrote options in the method, I took out. So what does chart do? Because most of the data is retrieved asynchronously, echarts is rendered dynamically. When you get the data, this chart is used.

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

Here about the data format, see each person’s options in the rendering of what is the picture. Here I use the example portal given by the official website, echarts data update can be directly used by setOption.

Zooming in and out scrolling in developer tools doesn’t work, but uploading to the Experience version works fine on the phone. Wechat has type=”2d” for canvas. If you want to use type=”2d” in EC-Canvas, you need to change ec-canvas.js

data: {
  isUseNewCanvas: true // The default value is false
}
Copy the code

Because: isUseNewCanvas defaults to false and is an old canvas.

<! -- New: interface to it 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>
<! - the 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>

Copy the code

Echarts.js volume problem, upload item 2MiB limitation problem

The echarts.js in the ec-Canvas download has several hundred kiBs, which is quite large compared to 2MiB. When I upload the project and it tells me that I am over the limit, I can think of two immediate solutions: reducing the size of echarts.js and subcontracting.

Echarts.js is a big problem

There is an on-demand build method on the echarts website (portal – Online Customization), go to the following online customization, select your image, I selected the line diagram, the coordinate system selected cartesian coordinates, components except brush, toolbar and custom graphics, other options have SVG checked. Then click Download to enter the building page, where it will automatically download an echarts.min.js file with 200 KiB missing in the end. Then rename it to echarts.js and replace it with ec-canvas.

Upload item 2MiB restriction problem

The size of echarts.js has been reduced, but upload restrictions remain, that is, subcontracting.

In app.json, there are subpackages

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

This subcontracting is quite simple on the official website, but I understand it like this when I use it.

Root is the path to subcontract, I put it in the root directory. Then all files under baoziTask will be considered as one package. Files that are not in the baoziTask path will be packaged into the main app package.

Name is an alias for subcontracting, which is used during pre-downloading. This pre-downloading is used when a page wants to actively download the subcontracting that may be used to improve access speed. For example, when I enter a page, IT is very likely that I will click somewhere to jump to a subcontract. At this time, I can pre-download this subcontract, instead of downloading it when I do not jump to it.

Independent means whether the subcontract is independent, but I have no intuitive feeling since I have not used it. It is said that it can run independently, independent of the main package app. PreloadRule preloadRule preloadRule preloadRule preloadRule preloadRule preloadRule Portal — Subcontract pre-download

Pages is a page inside a package.

If you want to jump to these pages in the subcontract, you can write the correct path to the jump URL, for example, when jumping to roubaozi, write ⬇️ :

url: '/baoziTask/pages/roubaozi/roubaozi'
Copy the code

Then how to check the success of subcontracting?

There is a detail button in the upper right corner of the developer tool. Click on the view Details side slider to see the line “local code”. Click on the size behind it to see the size of the main package and each subpackage. If the main package does not exceed 2MiB, then the upload is successful!

Crowd: Why do you put an I between KB and MB? Xiao Ao Jiao: Because the exact expression is 1024

New Year cup non-stop, cheers calculate, tea tea 🍵 My Life.