When men sit at home, POTS come from heaven.

Half a month ago, I was writing a project at home, but before I had time to propose and test it, my leader suddenly called me and I needed to support another project immediately. After I inquired about it, I found out that a project which had been completed for half a year was still going, even though I didn’t want to go. Because Lu Xun said, life is like QJ, since you can’t resist, then enjoy it.

This project is divided into PC side, client side small program and business side small program. Here I mainly talk about a module in the business side, which needs to use data statistics chart. At that time, I thought there were two plug-ins good:

  • Baidu echarts
  • Ali AntV

I chose Echarts as a charting plug-in for my project because I had used it a lot in my previous projects.

The introduction of echarts

I am following the echarts official website tutorial to introduce, very simple, without saying more. portal

Echarts uses multiple charts

The WXML code is as follows:

<! -- Graph 1--> <view class="echarts-container" hidden="{{! isShoweyes || ! echartsData.totalRecentRansactions.allTotalMoney}}">
    <ec-canvas id="mychart-dom-turnover" canvas-id="mychart-turnover" ec="{{ turnoverEc }}"></ec-canvas> </view> <! -- Figure 2--> <view class="echarts-container" hidden="{{! isShoweyes || ! echartsData.shopNewCustomerRespVo.allNewCustomer}}">
    <ec-canvas id="mychart-dom-customer" canvas-id="mychart-customer" ec="{{ customerEc }}"></ec-canvas> </view> <! -- Figure 3--> <view class="echarts-container" hidden="{{! isShoweyes || ! echartsData.customerOrderAverageRespVo.customerAverage}}">
    <ec-canvas id="mychart-dom-price" canvas-id="mychart-price" ec="{{ priceEc }}"></ec-canvas>
</view>
Copy the code

The js code is as follows

<! Data: {isShoweyes: {isShoweyes:true,
    turnoverEc: {
      lazyLoad: true,
    },
    customerEc: {
      lazyLoad: true,
    },
    priceEc: {
      lazyLoad: true, }, echartsData: {} }, <! Create a canvas panel when the page loads --> onLoad:function (options) {
    this.echartsComponnet1 = this.selectComponent('#mychart-dom-turnover');
    this.echartsComponnet2 = this.selectComponent('#mychart-dom-customer');
    this.echartsComponnet3 = this.selectComponent('#mychart-dom-price'); }, <! Initialize report --> getData:function() {/ /... Get data <! -- This uses a loop to initialize several diagrams -->for (let i = 1; i < 4; i++) {
        if(! Chart[i]) { this.initEcharts(i); // Initialize the chart}else{ this.setOption(i); }}}, <! --// Initialize diagram --> initEcharts:function (i) {
    this['echartsComponnet'Chart[i-1] = echarts. Init (canvas, null, {width: width, height: height }); this.setOption(i); // Note that the chart instance must be returned, otherwise it will affect event handling, etcreturn Chart[i - 1];
    });
  },
  setOption: function(i) { Chart[i - 1].clear(); // clear Chart[i-1]. SetOption (this['getOption'+ i]()); // Get new data}, <! -- Set the configuration items required by the report -->getOption1() {
    let {
      echartsData
    } = this.data;
    return {
      color: ['#0179FF'],
      tooltip: {
        trigger: 'axis', axisPointer: {// Axis indicator, axis trigger workstype: 'shadow'// The default is a straight line, which can be:'line' | 'shadow'ShadowStyle: {opacity: 0.8}}, the formatter: enclosing formatterTooltip, position: enclosing setTooltipPositionfunction}, the grid: { left: 20, right: 20, bottom: 15, top: 40, containLabel:true
      },
      xAxis: [{
        type: 'category',
        axisLine: {
          lineStyle: {
            color: '# 999',
          }
        },
        axisLabel: {
          color: '# 666',
        },
        data: echartsData.totalRecentRansactions.dates,
      }
      ],
      yAxis: [{
        type: 'value',
        axisTick: {
          show: false
        },
        axisLine: {
          show: false,
          lineStyle: {
            color: '# 999',
          }
        },
        axisLabel: {
          color: '# 666',
          fontSize: 13
        }
      }],
      series: [{
        name: 'Total order amount'.type: 'line',
        label: {
          normal: {
            show: true,// Whether to display the value position on the broken line:'inside'
          }
        },
        data: echartsData.totalRecentRansactions.allTotalMoney
      }]
    };
  }
Copy the code

In the pit of

1.Tooltip support is poor

Tooltip
Tooltip
Tooltip
Tooltip
formatter 

// Format Tooltip formatterTooltip(param) {return "Date:" + param[0].name + "\n" + param[0].seriesName + ":" + param[0].data
  },
Copy the code

2. When clicking on the item near the right or bottom of the screen,TooltipWill overflow the boundary, solution:

Return the position function in Tooltip to a position computed by the click position. (You can also give a fixed position, but the experience is bad.)

// Change the position of the Tooltip to handle the case where the boundary is exceededsetTooltipPositionfunction(Point, params, dom, rect, size) {// Point is the current mouse position and size has two properties: ViewSize and contentSize, the size of the outer div and tooltip tooltip, respectively // Change the display position of the tooltipletx = point[0]; //lety = point[1]; {contentSize: [width, height], viewSize: [width, height]}let boxWidth = size.contentSize[0];
    // letboxHeight = size.contentSize[1]; // size the dom height is not available here. The value is NAN, so a fixed value is specified belowlet boxHeight = 50;
    letposX = 0; // The x positionletposY = 0; // The y positionif(x < boxWidth) {posX = 5; }else{// posX = x-boxWidth; }if(y < boxHeight) {// posY = 5; }else{// posY = y-boxheight; }return [posX, posY];
  },
Copy the code

Note above that the dom height can be obtained from the size argument of the position callback, but I printed it as NAN.

params
outerWidth
size
contentSize
params
outerHeight
dom

3. When sliding the bar chart left or right, the bar chart drawing board will become blank. Click on the blank and the bar chart will appear again, and this problem only appears on the bar chart!

At first, I thought it was my own code. Later, I checked several times and found that there was no problem. Then I scanned the official small program demo and found that there was also this problem. Since it is the official code itself, so go to see the source code, as follows:

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

The official code binds the canvas to a BindTouchMove event

touchMove(e) {
      if (this.chart && e.touches.length > 0) {
        var touch = e.touches[0];
        var handler = this.chart.getZr().handler;
        handler.dispatch('mousemove', {
          zrX: touch.x,
          zrY: touch.y
        });
        handler.processGesture(wrapTouch(e), 'change'); }},Copy the code

This calls the echarts.js method again, and finally comes up with a rude solution:

Delete the bindTouchMove event from the source code

Perfect solution, haha or red-hot trance ~~~

The above is the pit I encountered in using Echarts in the small program, hope to help later people step on the pit.

Final image

The Demo source code

Click here