微信小程序使用ECharts图表

小程序包下载地址

GitHub 地址  https://github.com/ecomfe/echarts-for-weixin

如何使用ECharts

1、首先把整个ec-canvas文件夹复制到自己的小程序项目中。

2、引用组件，打开项目页的json文件:

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

3. 在 js文件里引入

import * as echarts from '../../ec-canvas/echarts.js';

4. whtml代码

<view class="container">
  <ec-canvas id="mychart-dom-line"  force-use-old-canvas="true" canvas-id="mychart-line" ec="{{ ec }}"></ec-canvas>
</view>

或者

<ec-canvas style="width: 100%; height: 300px;"  force-use-old-canvas="true" id="mychart-dom-line" canvas-id="mychart-line" ec="{{ ec }}">

最终效果大概如下，下面数据

部分手机会有小程序图表压倒了小程序页面问题 ，如果使用旧的cavas即设置force-use-old-canvas=“true"即可

 // 加上 force-use-old-canvas="true"
 
 <ec-canvas style="width: 100%; height: 300px;"  force-use-old-canvas="true" id="mychart-dom-line" canvas-id="mychart-line" ec="{{ ec }}">

最后完整的js文件代码如下，复制后可以用，插件的地址需要根据自己情况进行引入。

const app = getApp();
import * as echarts from '../../ec-canvas/echarts';
Page({
  data: {
    // 新统计使用
    lazyEc: {
      lazyLoad: true
    },
    paobu:{[18, 36, 65, 30, 78, 40, 33],['周一', '周二', '周三', '周四', '周五', '周六', '周日']}
  }, 
  // 新统计使用
  init(optionData) { 
        //手动初始化
        this.lazyComponent.init((canvas, width, height, dpr) => {
        let chart = echarts.init(canvas, null, {
              width: width,
              height: 200,
              devicePixelRation: dpr
        })
        let option = this.getOption(optionData)  // echarts的配置信息
        chart.setOption(option)
        this.chart = chart //将图表实例绑定到this上，方便其他函数访问
          return chart
        })
    },

    //  mark:刷新切换图表使用 当前我没用 可以自行改造
    changeType(e) { 
      //确定按钮，只按一次，可以根据需要做逻辑disable掉
      var temprrT = new Array(50).fill(0);//50个数组，根据需要修改
      var temprrPV = new Array(50).fill(0);
      var temprrSP = new Array(50).fill(0);
      var times = 0;
      this.data.dataT = this.data.dataPV = this.data.dataSP = [0];//这句好像没什么用
      var i = setInterval(() => {
      times++;
      if (times >= 50) { //同上，数据个数根据需要修改
        clearInterval(i)
      } else {
        temprrT.shift()
        temprrT.push(times)
        temprrPV.shift()
        temprrPV.push(Math.random().toFixed(2))
        temprrSP.shift()
        temprrSP.push(Math.random().toFixed(2))
        console.log('数组', temprrT, temprrPV, temprrSP)
        this.setData({
                dataT: temprrT,
                dataPV: temprrPV,
                dataSP: temprrSP
        })
    }
      let option = getOption(this.data.dataT, this.data.dataPV, this.data.dataSP)
      this.chart.setOption(option)
      }, 1000);
    },
  
 // 新统计使用 配置图表信息
getOption(dataT, dataPV, dataSP) {
    return {
      // title: {
      //   text: '测试下面legend的红色区域不应被裁剪',
      //   left: 'center'
      // },
      // legend: {
      //   data: ['A', 'B', 'C'],
      //   top: 10,
      //   left: 'center',
      //   backgroundColor: 'red',
      //   z: 100,
      //   show:false,
      // },
      // grid: {
      //   containLabel: true
      // },
      grid:{ 
        // 让图表占满容器
        top:"15px",
        left:"15%",
        right:"8%",
        bottom:"30px"
      },
      tooltip: {
        show: true,
        trigger: 'axis'
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: this.data.paobu[1],//['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
        show: true
      },
      yAxis: {
        x: 'center',
        type: 'value',
        splitLine: {
          lineStyle: {
            type: 'dashed'
          }
        },
        axisLine: {
          show: true,    // 是否显示坐标轴轴线
          // symbol: ['none', 'arrow'],     // 轴线两端箭头，两个值，none表示没有箭头，arrow表示有箭头
          // symbolSize: [10, 15],     // 轴线两端箭头大小，数值一表示宽度，数值二表示高度
          lineStyle: {
              color: '#333',    // 坐标轴线线的颜色
              width: '1',    // 坐标轴线线宽
              type: 'solid',    // 坐标轴线线的类型（solid实线类型；dashed虚线类型；dotted点状类型）
          },
      },
        // show: false
      },
      series: [{
        name: '步数',
        type: 'line',
        smooth: true,
        data: this.data.paobu[0],//
      }]
    };
  },
  onLoad: function (options) {
     // 新统计使用
    this.lazyComponent = this.selectComponent('#lazy-mychart-dom')
},
  // 加载数据
  onReady: function (options) {
    var that = this;
  
    wx.showLoading({ title: '玩命加载中' });
    wx.request({
      url: app.globalData.host+'xxxxxxx',
      method: 'get',
      data: {id:this.data.id},
      header: {
        "Cookie": "PHPSESSID=" + app.globalData.sessionId
      },
      success: function (r) {
        wx.hideLoading();
        var res = r.data;
        var msg = '获取数据成功'; 
        if (!res.status) {
          var msg = res.msg?res.msg:'获取数据失败';
          wx.showToast({
            title: msg,
            icon:'none'
          }) 
        } else {
         
          that.setData({
            paobu:d.paobu,
          });

          // 数据返回后，初始化图表 新统计使用 调用
          that.init([]);
        }

        
        wx.hideLoading();
      }
    })
  },
  onShow: function () {

  },
  onHide: function () {
    
  },
  onUnload: function () {
    
  },
  onPullDownRefresh: function () {
    
  },
  onReachBottom: function () {
    
  },
  onShareAppMessage: function () {
    
  },

})