>  기사  >  위챗 애플릿  >  WeChat 미니 프로그램에서 전자 차트 사용하기

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

hzc
hzc앞으로
2020-06-04 13:56:124065검색

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

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

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

예전 프로젝트에서 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

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

打印出来结果:

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

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

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

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(&#39;mousemove&#39;, {
          zrX: touch.x,
          zrY: touch.y
        });
        handler.processGesture(wrapTouch(e), &#39;change&#39;);
      }
    },

这里面又去调用了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 매개변수의 outerHeightdom의 높이로 결정하면 최종 실행 효과는 실제로 괜찮아요. 🎜🎜WeChat 미니 프로그램에서 전자 차트 사용하기 🎜

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를 사용할 때 겪게 되는 함정들입니다. 나중에 사람들이 함정을 피하는 데 도움이 되기를 바랍니다. 🎜🎜

최종 효과 사진

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

데모 소스 코드

여기를 클릭하세요

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

추천 튜토리얼: "JS Tutorial"

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

성명:
이 기사는 csdn.net에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제