记一次完整小程序项目中的的echarts踩坑

##主要记录echarts中的坑，基本的使用就不详细说了，随便百度都有。。。 ##先是异步请求数据渲染echarts的方法，踩坑在最后！！！ ###第一步首先引入echarts echarts官网没有小程序版，不过已经有人在github发布echarts的小程序版本了。。可是echarts.js的版本不是最新的，我的推荐去官网在线定制。定制版的echarts体积更小，并且小程序中用到的图表种类不会不少，并且定制很是简单，必定要去本身定制，而后替换掉他的echarts.js。 首先，下载echarts微信版 地址： <a href="https://github.com/ecomfe/echarts-for-weixin" target="_blank">https://github.com/ecomfe/echarts-for-weixin</a> 将下载好的文件中 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在开发者工具上不卡，可是真机调试会特别卡卡卡卡卡卡卡卡卡卡卡卡卡卡（这也是困扰了我好几天的缘由！可是发布以后就不会卡挺流畅的，使用预览也不会卡）因此真机调试卡不用担忧也不用去怀疑是请求方式的问题，使用预览或者发布体验版本就能够

嘻嘻