微信小程序echarts使用，以及一些坑

小程序中使用echarts

一.下载

下载 GitHub 上的 ecomfe/echarts-for-weixin 项目。放在项目根目录

二.使用

1、index.json 配置如下

{
  "usingComponents": {
    "ec-canvas": "../../ec-canvas/ec-canvas"
  }
}

2、index.wxml 中，ECharts创建了一个 组件

<view class="content">
  <ec-canvas id="charts" canvas-id="charts" ec="{{ ecOne }}"></ec-canvas>
  <button bindtap="checkNums">动态切换数据</button>
</view>

3、ecOne 是一个ECharts在 index.js 中定义的对象，它使得图表能够在页面加载后被初始化并设置。index.js 的结构如下:

import * as echarts from '../../ec-canvas/echarts';
function setOption(chart,datas) {
  const option = {
    tooltip: {
        trigger: 'axis',
        axisPointer: {            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
        }
    },
    grid: {
        left: '3%',
        right: '5%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: {
        type: 'category',
        data: ['','','','','','','','','','','','','','','','','','','','','','','','',''], 
        axisTick:{
            show:false
        },
       
    },
    yAxis: {
        type: 'value',
        show:false
    },
    series: [
        {
            name: '日均深睡',
            type: 'bar',
            stack: '总量',
            label: {
                position: 'insideRight'
            },
            data: datas,
            color:"#F87628",
            barWidth : 5
        }
    ]
  };
  chart.setOption(option)
}
Page({
  data: {
    ecOne: {
      lazyLoad: true
  },
  },
  onLoad: function () {
    this.getOneOption();
  },
  checkNums(){
    this.getOneOption();
  },
  onReady: function () {               //这一步是一定要注意的
    this.oneComponent = this.selectComponent('#charts');  
  },
  init_one: function (datasd) {           //初始化第一个图表
    this.oneComponent.init((canvas, width, height) => {
        const chart = echarts.init(canvas, null, {
            width: width,
            height: height
        });
        setOption(chart,datasd)
        this.chart = chart;
        return chart;
    });
  },
  getOneOption(){            //动态请求数据
    var _this = this;
    wx.request({
      url: "https://xxxxxxx",
      method:"POST",
      header:{
          'content-type': 'application/json'
      },
      data:{},
      dataType: 'json',
      success: (res) => {
          var allsd = []                   //模拟后端传来的数据
          for(var i=0;i<20;i++){
            allsd.push(_this.random(20,300))
          }
          _this.init_one(allsd)
      },
    });
  },
  random(min, max) {
    return Math.floor(Math.random() * (max - min)) + min;
  }
})

4、index.wxss样式

.content {
  width: 100%;
  background-color: #F2F2F2;
  overflow-y: auto;
}
#charts{
  position: absolute; 
  top: 0;
  height: 50%;
  left: 0;
  right: 0;
}

-----------------------------------------------------------------------------------------------------------------------------------------

总结遇到的坑，真机无法预览 报错

一、开发者工具使用预览模式，真机无法显示数据问题?

解决方法： wx.request的请求地址一定要在微信公众平台进行配置，必须是https。配置之后重新预览就可以看见了

二、开发者工具使用真机调试模式，数据无法显示

解决方法：1.也需要在公众平台配置请求地址，2.在标签中加上force-use-old-canvas=“true”，目的是使用旧版canvas进行绘制，**注意的是：发布前一定要删掉

三、上传体验版也不需要加force-use-old-canvas=“true”