馨馨儿 發表於 2019-11-22 11:10:00

微信小程序中使用echarts 踩坑

<h2 id="主要记录echarts中的坑基本的使用就不详细说了随便百度都有">主要记录echarts中的坑，基本的使用就不详细说了，随便百度都有。。。</h2>
<h2 id="先是异步请求数据渲染echarts的方法踩坑在最后">先是异步请求数据渲染echarts的方法，踩坑在最后！！！</h2>
<h3 id="第一步首先引入echarts">第一步首先引入echarts</h3>
<p>echarts官网没有小程序版，不过已经有人在github发布echarts的小程序版本了。。但是echarts.js的版本不是最新的，个人推荐去官网在线定制。定制版的echarts体积更小，而且小程序中用到的图表种类不会很多，而且定制非常简单，一定要去自己定制，然后替换掉他的echarts.js。<br>
首先，下载echarts微信版 地址： https://github.com/ecomfe/echarts-for-weixin<br>
将下载好的文件中 ec-canvas目录 放在小程序项目<strong>根目录</strong>中即可。</p>
<h5 id="然后就是在jsonjs中引入">然后就是在json、js中引入，</h5>
<h2 id="异步请求数据">异步请求数据</h2>
<h3 id="wxml中在wxml中一定要给echarts的容器设置高度">wxml中在wxml中一定要给echarts的容器设置高度</h3>
<pre><code> &lt;view class="workLine"&gt;
      &lt;ec-canvas id="lessonChart" canvas-id="mychart-line" ec="{{ lessonLine }}"&gt;&lt;/ec-canvas&gt;
&lt;/view&gt;
</code></pre>
<h3 id="首先-建立一个全局变量注意放在page外面要全局变量方便修改">首先 建立一个全局变量（注意，放在page外面，要全局变量，方便修改），</h3>
<pre><code>var lessonMonthArr = [];
var lessonCountArr = [];
var lessonChart = null;
</code></pre>
<h3 id="在data中设置延迟加载">在data中设置延迟加载</h3>
<pre><code>    lessonLine: {
      lazyLoad: true
    }
</code></pre>
<h3 id="在异步请求中去调用初始化echarts的函数">在异步请求中，去调用初始化echarts的函数</h3>
<pre><code> getLesson() {
    app.fetch(Api.lessonRecordData, {
      officeId: this.data.adminInfo.officeId,
    }, "GET", res =&gt; {
      var arr = res.data.data.monthData
      var num = 0;
      var _data = [];
      var proportion = 4;
      for (let i = 0; i &lt; arr.length; i++) {      //for循环是自己处理的数据
      if (i % proportion == 0 &amp;&amp; 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) =&gt; {
      lessonMonthArr.push(item.month + "月");
      lessonCountArr.push(item.count);
      })
//去调用初始化函数
      this.init_lessonChart()
</code></pre>
<h3 id="初始化函数">初始化函数</h3>
<pre><code>//课堂折线图
init_lessonChart() {
    this.lessonChartComponnet = this.selectComponent('#lessonChart');      //去获取echarts    这里的id就是echarts的id
    this.lessonChartComponnet.init((canvas, width, height) =&gt; {
      // 初始化图表   这个lessonChart就是之前全局变量设置过的
      lessonChart = echarts.init(canvas, null, {      //echarts会继承父元素的宽高
      width: width,
      height: height,
      });
      lessonChart.setOption(this.getLineOption()); //这一步是给echarts 设置数据及配置项
      return lessonChart;            //一定要return出去
    });   
},
</code></pre>
<h3 id="设置配置项">设置配置项</h3>
<pre><code>//这里的配置项与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 - 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;
},
</code></pre>
<h3 id="最后贴上自己的效果图">最后贴上自己的效果图</h3>
<p><img src="https://img2018.cnblogs.com/blog/1742483/201911/1742483-20191122105557245-361476454.png"></p>
<h3 id="以上就是基本的异步请求数据渲染echarts">以上就是基本的异步请求数据渲染echarts</h3>
<h2 id="最坑的几点">最坑的几点</h2>
<h3 id="echarts-的所有父级元素都不能有定位---否则在测试时-就会出现echarts不随屏幕滚动的bug---overflowauto---也不行">echarts 的<strong>所有</strong>父级元素都不能有定位   否则在测试时 就会出现echarts不随屏幕滚动的bug！！！   overflow：auto   也不行！！！！！！！！！</h3>
<h3 id="echarts的层级最高---如果自定义的tabar--要使用-coverview---不然echarts会显示在tabar的上面">echarts的层级最高   如果自定义的tabar要使用 cover—view   不然echarts会显示在tabar的上面</h3>
<h3 id="echarts在开发者工具上不卡但是真机调试会特别卡卡卡卡卡卡卡卡卡卡卡卡卡卡这也是困扰了我好几天的原因但是发布之后就不会卡挺流畅的使用预览也不会卡所以真机调试卡不用担心也不用去怀疑是请求方式的问题使用预览或者发布体验版本就可以">echarts在开发者工具上不卡，但是真机调试会特别卡卡卡卡卡卡卡卡卡卡卡卡卡卡（这也是困扰了我好几天的原因！但是发布之后就不会卡挺流畅的，使用预览也不会卡）所以真机调试卡不用担心也不用去怀疑是请求方式的问题，使用预览或者发布体验版本就可以</h3>
<h3 id="嘻嘻">嘻嘻</h3><br><br>
来源：https://www.cnblogs.com/ak-blog/p/11910397.html
頁: [1]
查看完整版本: 微信小程序中使用echarts 踩坑