微信小程序开发使用echarts统计

最近才学习微信小程序开发，一点一点填坑中....

1.下载

echart微信小程序git下载地址

https://github.com/ecomfe/echarts-for-weixin

2.引入

将下载后的压缩包解压，将里面对应ec-canvas文件夹，放到微信小程序项目的根目录下，与app.js同级。

3.使用

一、.wxml页面（在使用到echarts组件的目录下）

<view class="box">
  <view class="echarts-box">
    <ec-canvas id="mychart" canvas-id="mychart-bar" ec="{{ ec }}"></ec-canvas>
  </view>
</view>

二、wxss页面

/* pages/data_curve/data_curve.wxss */
.box {
	width:100%;
	height:100%;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
} 
.echarts-box{
  height: 50%;
  padding: 0 20rpx;
}

三、 .json文件

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

四、.js文件

引入echart

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

data

 data: {
    ec: {
      lazyLoad: true 
    },
    equipId: '1210467320944361473',
    monitorTimeBegin: '1584547200',
    monitorTimeEnd: '1585151999',
    temperatureData: [],
    humidityData: [],
    dateArr: []
  },

onLoad方法

 onLoad: function (options) {
    this.echartsComponnet = this.selectComponent('#mychart');
    this.init_echarts()
  },

获取数据方法

//初始化
  init_echarts: function () {
    this.echartsComponnet.init((canvas, width, height) => {
      // 初始化图表
      const chart = echarts.init(canvas, null, {
        width: width,
        height: height
      });
      chart.setOption(this.getOption());
      // 返回 chart 实例，否则会影响事件处理等
      return chart;
    });
  },
  // 获取数据
  getOption: function () {
    var that = this
    var option = {
      title: {
        left: 'center',
        text: '温湿度设备曲线'
      },
      color: ['#CD5555', '#00a0e9'],
      tooltip: {
        trigger: 'axis',
        formatter: function (params) {
          // 当前这组数据值，是一个数组
          let html = params[0].name + '<br>'
          for (let i = 0; i < params.length; i++) {
            // 判断每一项的值的名字
            if (params[i].seriesName === '温度(℃)') {
              html += params[i].seriesName + ':' + params[i].value + '℃'
            } else {
              html += params[i].seriesName + ':' + params[i].value + '%'
            }
          }
          return html
        },
        axisPointer: {
          type: 'cross',
          crossStyle: {
            color: '#999'
          }
        }
      },
      legend: {
        type: 'scroll',
        orient: 'vertical',
        right: 0,
        data: ['温度(℃)', '湿度(%)']
      },
      grid: {
        top: 90,
        bottom: 30
      },
      xAxis: [
        {
          type: 'category',
          axisTick: {
            alignWithLabel: true
          },
          axisLine: {
            onZero: false,
            lineStyle: {
              color: '#d14a61'
            }
          },
          axisPointer: {
            label: {
              formatter: function (params) {
                return (
                  '温度  ' +
                  params.value +
                  (params.seriesData.length
                    ? '：' + params.seriesData[0].data
                    : '')
                )
              }
            }
          },
          // 当前一天的时间
          data: that.data.dateArr
        }
      ],
      yAxis: [
        {
          type: 'value',
          name: '温度(℃)',
          axisLabel: {
            formatter: '{value}'
          },
          axisLine: {
            lineStyle: {
              color: 'gray'
            }
          },
          splitLine: { show: false }
        },
        {
          type: 'value',
          name: '湿度(%)',
          axisLabel: {
            formatter: '{value}'
          },
          axisLine: {
            lineStyle: {
              color: 'gray'
            }
          },
          splitLine: { show: false }
        }
      ],
      series: [
        {
          name: '温度(℃)',
          type: 'line',
          lineStyle: {
            color: '#CD5555'
          },
          smooth: true,
          data: that.data.temperatureData,
        },
        {
          name: '湿度(%)',
          type: 'line',
          lineStyle: {
            color: '#00a0e9'
          },
          yAxisIndex: 1,
          smooth: true,
          data: that.data.humidityData
        }
      ]
    }
    return option
  },
  // 获取温湿度设备曲线数据
  _getLineInfo() {
    const that = this
    wx.showLoading({
      title: '加载中',
    })
    // 请求地址，传参等
    httpRequest(GETLINE, { equipId: that.data.equipId, monitorTimeBegin: that.data.monitorTimeBegin, monitorTimeEnd: that.data.monitorTimeEnd }, 'POST').then(res => {
      wx.hideLoading()
      const { code, data, msg } = res.data
      if (code === '1') {
        // 将获取的数据循环到series数组里
        that.setData({
          temperatureData: data.map(({ temperature }) => temperature),
          humidityData: data.map(({ humidity }) => humidity),
          dateArr: data.map(({ monitorTime }) => monitorTime)
        })
        that.init_echarts()
      } else {
        wx.showToast({
          title: msg,
          icon: 'none',
          duration: 2000
        })
      }
    }).catch(err => {
      wx.hideLoading()
      console.log(err)
    })
  },

onReady方法

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    this._getLineInfo()
  },

效果如图: