WeChat 미니 프로그램에서 전자 차트 사용하기

사람들이 집에 앉아 있는데 냄비가 하늘에서 내려옵니다.

보름 전에 집에서 프로젝트를 작성하고 있었는데, 테스트할 시간도 되기 전에 리더님이 갑자기 전화하셔서 다른 프로젝트를 바로 지원해 달라고 문의하셨는데, 바로 그 프로젝트였습니다. 반년 동안 미완성이었습니다. 원하지 않더라도 계속해야했습니다. 루쉰이 말했듯이 인생은 강간과도 같아서 저항할 수 없으니 즐겨라.

이 프로젝트는 PC 측, 사용자 측 애플릿, 판매자 측 애플릿으로 나누어집니다. 여기서는 주로 통계 차트를 사용해야 하는 특정 모듈에 대해 이야기합니다. 당시에는 두 가지 플러그가 있다고 생각했습니다. - 좋았던 기능:

• Baidu echarts

• Ali AntV

예전 프로젝트에서 echarts를 많이 사용하다보니 결국 echarts를 선택하게 되었습니다. 프로젝트의 차트 플러그인echarts比较多，所以最终选择了echarts作为项目中的图表插件

echarts的引入

我是按照echarts官网教程来引入的，很简单，不多说。传送门

echarts中使用多个图表

wxml代码如下：

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

js代码如下

<!--通过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];
  },

上面需要注意的是，获取dom的高度，官方上说的是可以从position回调函数的size参数中获取到dom的高度，但是我打印出来却是NAN。

打印出来结果：

后来发现参数params中outerWidth的值和参数size中contentSize的宽度值相同，所以果断取参数params中的outerHeight作为dom的高度，最后运行的效果确实没有问题。

3.左右滑动柱状图时，柱状图画板会变空白，点一下空白又会出现柱状图，而且这个问题只有在柱状图上出现！

刚开始以为是自己代码的问题，后来自己检查了几遍，确实没什么问题，然后扫码体验了官方的小程序demo，发现也有这个问题，顿时只想对它口吐芬芳。既然是官方代码自身的问题，于是去看了下源码，如下：

<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>

官方代码给画布绑定一个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');
      }
    },

这里面又去调用了echarts.js中的方法，最后想了一个粗暴的解决办法：

删掉源码中的bindtouchmove事件

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

<img src="https://img.php.cn/upload/image/417/204/228/1591249707644801.jpg" title="1591249707644801.jpg" alt="WeChat 미니 프로그램에서 전자 차트 사용하기">

echarts 소개

echarts 공식 홈페이지 튜토리얼을 따라 소개했습니다. 아주 간단해서 별로 할 말이 없습니다. 포털🎜🎜

🎜echarts에서 여러 차트 사용🎜 🎜🎜 wxml 코드는 다음과 같습니다. 🎜rrreee🎜js 코드는 다음과 같습니다🎜rrreee🎜위에서 주목해야 할 것은 dom의 높이를 얻으려면 콜백 함수를 사용할 수 있다는 것입니다. position에서 호출됩니다. dom의 높이는 size 매개변수에서 가져오는데, 인쇄해 보니 NAN입니다. 코드>. 🎜🎜<img src="https://img.php.cn/upload/image/208/596/719/1591249510744545.jpg" title="1591249510744545.jpg" alt="WeChat 미니 프로그램에서 전자 차트 사용하기"> 🎜 🎜결과 인쇄: 🎜🎜<img src="https://img.php.cn/upload/image/387/366/705/1591249554690992.jpg" title="1591249554690992.jpg" alt="529723908-adc36b63826e1e9a 아이렉스 .jpg">🎜🎜나중에 <code>params 매개변수에서 outerWidth 값을 찾았고 size 매개변수에서 <code>contentSize 너비 값을 찾았습니다. 동일하므로 params 매개변수의 outerHeight를 dom의 높이로 결정하면 최종 실행 효과는 실제로 괜찮아요. 🎜🎜 🎜

3. 히스토그램을 왼쪽이나 오른쪽으로 밀면 히스토그램 드로잉 보드가 공백이 됩니다. 빈칸을 클릭하세요. 히스토그램이 다시 나타날 것입니다. 이 문제는 히스토그램에서만 발생합니다! 🎜🎜처음에는 제가 만든 코드에 문제가 있는 줄 알았는데, 몇번을 확인해 보니 정말 문제가 없었습니다. 그러다가 공식 미니 프로그램 데모를 체험해 보았는데 이 문제도 존재한다는 것을 알게 되었습니다. 나는 그것에 대해 토하고 싶었습니다. 공식 코드 자체의 문제였기 때문에 소스코드를 살펴보니 다음과 같습니다. 🎜rrreee🎜공식 코드는 bindtouchmove 이벤트를 캔버스에 바인딩합니다🎜rrreee🎜여기서 다시 , echarts가 호출됩니다. js, 마침내 조잡한 해결책이 생각났습니다. 🎜🎜소스 코드에서 바인딩터치무브 이벤트를 삭제하세요🎜🎜완벽한 해결책입니다. 하하 ​​아니면 번영하고 무아지경에 빠진 상태~~🎜

<img src="https://img.php.cn/upload/image/%20417/204/228/%201591249707644801.jpg" title="1591249707644801.jpg" alt="WeChat 미니 프로그램에서 전자 차트 사용하기">🎜🎜🎜위 내용은 제가 작은 프로그램에서 echart를 사용할 때 겪게 되는 함정들입니다. 나중에 사람들이 함정을 피하는 데 도움이 되기를 바랍니다. 🎜🎜

최종 효과 사진

데모 소스 코드

여기를 클릭하세요

추천 튜토리얼: "JS Tutorial"

위 내용은 WeChat 미니 프로그램에서 전자 차트 사용하기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!