Utilisation d'echarts dans le mini-programme WeChat

Les gens sont assis à la maison et les pots viennent du ciel.

Il y a un demi-mois, j'écrivais un projet chez moi, mais avant d'avoir eu le temps de le tester, le leader m'a soudainement appelé et m'a demandé de soutenir immédiatement un autre projet lorsque j'ai posé des questions à ce sujet. , j'ai découvert que c'était un projet inachevé depuis six mois. Si vous ne le voulez pas dans votre cœur, vous devez quand même y aller. Parce que Lu Xun a dit, la vie est comme un viol Puisque vous ne pouvez pas résister, profitez-en.

Ce projet est divisé en côté PC, applet côté utilisateur et applet côté marchand. Ici, nous parlons principalement d'un certain module côté marchand, qui nécessite l'utilisation de graphiques de statistiques de données à ce moment-là. , j'ai senti qu'il y avait deux Un bon plug-in :

• Baidu echarts

• Ali AntV

Parce que j'ai beaucoup utilisé echarts dans le projet auparavant, j'ai finalement choisi echarts comme plug-in de graphique dans le projet

L'introduction des echarts

Je l'ai présenté selon le echarts tutoriel du site officiel C'est très simple, pas grand chose à dire. Portail

Utilisation de plusieurs graphiques dans les echarts

Le code wxml est le suivant :

<!--图表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><!--图表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><!--图表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>

le code js est le suivant

<!--通过lazyLoad设置图表懒加载-->data: {
    isShoweyes: true,
    turnoverEc: {
      lazyLoad: true,
    },
    customerEc: {
      lazyLoad: true,
    },
    priceEc: {
      lazyLoad: true,
    },
    echartsData: {}
  },
  <!--页面加载时创建对应的canvas面板-->onLoad: function (options) {
    this.echartsComponnet1 = this.selectComponent(&#39;#mychart-dom-turnover&#39;);
    this.echartsComponnet2 = this.selectComponent(&#39;#mychart-dom-customer&#39;);
    this.echartsComponnet3 = this.selectComponent(&#39;#mychart-dom-price&#39;);
  },
  <!--获取到数据后，初始化报表-->
  getData: function () {
    //  .... 获取数据

    <!--此用循环初始化几个图表-->
    for (let i = 1; i < 4; i++) {
        if (!Chart[i]) {
          this.initEcharts(i); //初始化图表
        } else {
          this.setOption(i); //更新数据
        }
      }
  },
  <!--//初始化图表-->
  initEcharts: function (i) {
    this[&#39;echartsComponnet&#39; + i].init((canvas, width, height) => {
      // 初始化图表
      Chart[i - 1] = echarts.init(canvas, null, {
        width: width,
        height: height
      });
      this.setOption(i);
      // 注意这里一定要返回 chart 实例，否则会影响事件处理等
      return Chart[i - 1];
    });
  },
  setOption: function (i) {
    Chart[i - 1].clear(); // 清除
    Chart[i - 1].setOption(this[&#39;getOption&#39; + i]()); //获取新数据
  },

  <!--设置报表需要的配置项-->
  getOption1() {
    let {
      echartsData
    } = this.data;
    return {
      color: [&#39;#0179FF&#39;],
      tooltip: {
        trigger: &#39;axis&#39;,
        axisPointer: { // 坐标轴指示器，坐标轴触发有效
          type: &#39;shadow&#39;, // 默认为直线，可选为：&#39;line&#39; | &#39;shadow&#39;
          shadowStyle: {
            opacity: 0.8
          }
        },
        formatter: this.formatterTooltip,
        position: this.setTooltipPositionfunction
      },
      grid: {
        left: 20,
        right: 20,
        bottom: 15,
        top: 40,
        containLabel: true
      },
      xAxis: [{
        type: &#39;category&#39;,
        axisLine: {
          lineStyle: {
            color: &#39;#999&#39;,
          }
        },
        axisLabel: {
          color: &#39;#666&#39;,
        },
        data: echartsData.totalRecentRansactions.dates,
      }
      ],
      yAxis: [{
        type: &#39;value&#39;,
        axisTick: {
          show: false
        },
        axisLine: {
          show: false,
          lineStyle: {
            color: &#39;#999&#39;,
          }
        },
        axisLabel: {
          color: &#39;#666&#39;,
          fontSize: 13
        }
      }],
      series: [{
        name: &#39;订单总额&#39;,
        type: &#39;line&#39;,
        label: {
          normal: {
            show: true,// 是否在折线点上显示数值
            position: &#39;inside&#39;
          }
        },
        data: echartsData.totalRecentRansactions.allTotalMoney
      }]
    };
  }
遇到的坑
1.Tooltip支持不好

虽然官网上echarts暂时不支持Tooltip，但是经过试验，还是Tooltip还是有效果的，但是，x轴对应的坐标值并不会显示在Tooltip中，需要使用Tooltip的formatter函数，自己处理需要展示的数据，代码如下：
// 格式化Tooltip
  formatterTooltip(param) {    return "日期：" + param[0].name + "\n" + param[0].seriesName + ": " + param[0].data
  },
2.当点击靠近屏幕右侧或者底部的item项时，Tooltip会溢出边界，解决办法：
给Tooltip的position函数返回一个根据点击位置计算的坐标点，（也可以给一个固定的位置，但是体验不好）
 // 更改Tooltip的位置，处理边界超出的情况
  setTooltipPositionfunction(point, params, dom, rect, size) {    //其中point为当前鼠标的位置，size中有两个属性：viewSize和contentSize，分别为外层div和tooltip提示框的大小
    // 更改提示框的显示位置
    let x = point[0];//
    let y = point[1];    // size: 包括 dom 的尺寸和 echarts 容器的当前尺寸，例如：{contentSize: [width, height], viewSize: [width, height]}
    let boxWidth = size.contentSize[0];    // let boxHeight = size.contentSize[1]; // size里面此处获取不到dom的高度，值为NAN，所以下面指定了一个固定值
    let boxHeight = 50;    let posX = 0;//x坐标位置
    let posY = 0;//y坐标位置
    if (x < boxWidth) {//左边放不开
      posX = 5;
    } else {//左边放的下
      posX = x - boxWidth;
    }    if (y < boxHeight) {//上边放不开
      posY = 5;
    } else {//上边放得下
      posY = y - boxHeight;
    }    return [posX, posY];
  },

Ce qu'il faut noter ci-dessus c'est que pour obtenir la hauteur de dom, il est officiellement dit que la hauteur de position peut être obtenue à partir du paramètre size de la fonction de rappel dom , mais quand je l'ai imprimé, c'était NAN.

Imprimer le résultat :

Plus tard, j'ai trouvé la valeur de params en paramètre outerWidth et le paramètre <🎜 Les valeurs de largeur de size dans > sont les mêmes, donc on prend définitivement le contentSize dans le paramètre params comme hauteur de outerHeight, et il n'y a en effet aucun problème avec le fonctionnement final effet. dom

3. Lorsque vous faites glisser l'histogramme vers la gauche ou la droite, la planche à dessin de l'histogramme deviendra vide. Cliquez sur le blanc et l'histogramme réapparaîtra, et ce problème ne se produira que. sur l'histogramme !

Au début, j'ai pensé que c'était un problème avec mon propre code. Ensuite, je l'ai vérifié plusieurs fois et j'ai constaté qu'il n'y avait effectivement aucun problème. Ensuite, j'ai scanné le code et essayé la démo officielle du mini programme. ce problème existait aussi, et j'avais juste envie de vomir à ce sujet. Comme il s'agissait d'un problème avec le code officiel lui-même, j'ai jeté un œil au code source, qui est le suivant :

<canvas class="ec-canvas" canvas-id="{{ canvasId }}" bindinit="init" bindtouchstart="{{ ec.disableTouch ? &#39;&#39; : &#39;touchStart&#39; }}" bindtouchmove="{{ ec.disableTouch ? &#39;&#39; : &#39;touchMove&#39; }}" bindtouchend="{{ ec.disableTouch ? &#39;&#39; : &#39;touchEnd&#39; }}"></canvas>

Le code officiel lie un

événement au canevas bindtouchmove

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');
      }
    },

qui l'appelle à nouveau

, et a finalement trouvé une solution grossière : echarts.js

删掉源码中的bindtouchmove事件

完美解决，哈哈或或红红火火恍恍惚惚~~~

<img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/image/417/204/228/1591249707644801.jpg" class="lazy" title="1591249707644801.jpg" alt="Utilisation decharts dans le mini-programme WeChat">

Ce qui précède sont les pièges que j'ai rencontrés lors de l'utilisation d'echarts dans le mini programme. J'espère que cela pourra aider ceux qui rencontreront des pièges plus tard.

Image de l'effet final

Code source de la démonstration

Cliquez ici

Tutoriel recommandé : "Tutoriel JS"

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!