• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

微信小程序中使用echarts 踩坑

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

主要记录echarts中的坑,基本的使用就不详细说了,随便百度都有。。。

先是异步请求数据渲染echarts的方法,踩坑在最后!!!

第一步首先引入echarts

echarts官网没有小程序版,不过已经有人在github发布echarts的小程序版本了。。但是echarts.js的版本不是最新的,个人推荐去官网在线定制。定制版的echarts体积更小,而且小程序中用到的图表种类不会很多,而且定制非常简单,一定要去自己定制,然后替换掉他的echarts.js。
首先,下载echarts微信版 地址: https://github.com/ecomfe/echarts-for-weixin
将下载好的文件中 ec-canvas目录 放在小程序项目根目录中即可。

然后就是在json、js中引入,

异步请求数据

wxml中在wxml中一定要给echarts的容器设置高度

 <view class="workLine">
      <ec-canvas id="lessonChart" canvas-id="mychart-line" ec="{{ lessonLine }}"></ec-canvas>
  </view>

首先 建立一个全局变量(注意,放在page外面,要全局变量,方便修改),

  var lessonMonthArr = [];
  var lessonCountArr = [];
  var lessonChart = null;

在data中设置延迟加载

    lessonLine: {
      lazyLoad: true 
    }

在异步请求中,去调用初始化echarts的函数

 getLesson() {
    app.fetch(Api.lessonRecordData, {
      officeId: this.data.adminInfo.officeId,
    }, "GET", res => {
      var arr = res.data.data.monthData
      var num = 0;
      var _data = [];
      var proportion = 4;
      for (let i = 0; i < arr.length; i++) {        //for循环是自己处理的数据
        if (i % proportion == 0 && i != 0) {
          _data.push(arr.slice(num, i));
          num = i;
        }
        if ((i + 1) == arr.length) {
          _data.push(arr.slice(num, (i + 1)));
        }
      }
      this.setData({
        lessonData: _data,
        lessonTotal: res.data.data.total
      })
//重要的是这两步,  因为如果页面加载过,全局变量中的值并不会消失,所以我先清空一下全局变量
	lessonMonthArr = [];        
	lessonCountArr = [];
//然后去给这两个全局变量赋值
      arr.forEach((item) => {
        lessonMonthArr.push(item.month + "月");
        lessonCountArr.push(item.count);
      })
//去调用初始化函数
        this.init_lessonChart()

初始化函数

  //课堂折线图
  init_lessonChart() {
    this.lessonChartComponnet = this.selectComponent(\'#lessonChart\');        //去获取echarts    这里的id就是echarts的id
    this.lessonChartComponnet.init((canvas, width, height) => {
      // 初始化图表   这个lessonChart  就是之前全局变量设置过的
      lessonChart = echarts.init(canvas, null, {        //echarts会继承父元素的宽高
        width: width,
        height: height,
      });
      lessonChart.setOption(this.getLineOption()); //这一步是给echarts 设置数据及配置项
      return lessonChart;            //一定要return出去
    });    
  },

设置配置项

//这里的配置项与pc端一样
 getLineOption(xData, data) {
    var lineStyle = {
      color: {
        type: \'linear\',
        x: 0,
        x2: 1,
        colorStops: [{
            offset: 0,
            color: "#4a5e6b" // 0% 处的颜色
          }, {
            offset: 0.5,
            color: \'#5cd6cb\' // 50% 处的颜色
          },
          {
            offset: 1,
            color: \'#4a5e6b\' // 100% 处的颜色
          },
        ],
        global: false // 缺省为 false
      },
      width: 4
    }
    var option = {
      color: ["#73ffe4"],
      tooltip: {
        trigger: "axis",
        position: function(pos, params, dom, rect, size) {
          return [pos[0] - 35, \'10%\'];
        }
      },
      grid: {
        show: true,
        borderColor: "transparent",
        backgroundColor: bgcolor,
        top: 30,
        bottom: 20,
        right: 0
      },
      textStyle: {
        color: "#fff",
      },
      xAxis: {
        type: \'category\',
        boundaryGap: true,
        data: workMonthArr,        //异步请求的数据
        axisTick: {
          alignWithLabel: true,
          inside: true
        },
        axisLabel: {
          align: "center",
          fontSize: 10
        },
        axisLine: {
          lineStyle: {
            color: "#697082",
          },
        },
      },
      yAxis: {
        x: \'center\',
        type: \'value\',
        name: "数量",
        nameTextStyle: {
          color: "#a4a4ae"
        },
        axisTick: {
          show: false
        },
        splitLine: {
          lineStyle: {
            color: "#47516f"
          }
        },
        axisLine: {
          lineStyle: {
            color: "#697082",
          },
        },
      },
      series: [{
        type: \'line\',
        smooth: true,
        data: workCountArr,      //异步请求的数据
        lineStyle
      }]
    };

    return option;
  },

最后贴上自己的效果图

以上就是基本的异步请求数据渲染echarts

最坑的几点

echarts 的所有父级元素都不能有定位 否则在测试时 就会出现echarts不随屏幕滚动的bug!!! overflow:auto 也不行!!!!!!!!!

echarts的层级最高 如果自定义的tabar 要使用 cover—view 不然echarts会显示在tabar的上面

echarts在开发者工具上不卡,但是真机调试会特别卡卡卡卡卡卡卡卡卡卡卡卡卡卡(这也是困扰了我好几天的原因!但是发布之后就不会卡挺流畅的,使用预览也不会卡)所以真机调试卡不用担心也不用去怀疑是请求方式的问题,使用预览或者发布体验版本就可以

嘻嘻


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
微信小程序 canvas 文字居中发布时间:2022-07-18
下一篇:
7-微信小程序开发-Canvas画图入门与尺寸转换 - 杨奉武发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap