微信小程序echarts学习记录

2023-11-11 08:05:10

微信小程序echarts学习记录——曲线图

需要在微信小程序中使用曲线图来展示数据，这里使用echarts插件来画曲线图

1、下载echarts组件

首先，下载echarts组件，下载地址https://github.com/ecomfe/echarts-for-weixin

2、引入echarts组件

下载好后，将下载文件中 ec-canvas目录下的文件拷贝到小程序的目录中。

然后在需要的页面引入即可。

3、开始在小程序中使用echarts组件画曲线图

1）在页面开启使用echarts

在.json页面的usingComponents里面引入echarts组件，如下：

2）在js文件中引入echarts

在.js文件中引入echarts组件，如下：

3）前端页面使用echarts元素

在.wxml文件中，echarts创建了一个组件，内容如下

其中 ec 是一个ECharts在 index.js 中定义的对象，它使得图表能够在页面加载后被初始化并设置

4）开始编写曲线图

在.js文件中编写方法，如下：

var option = {
  color: ["#999999"],
  legend: {
    data: [‘测量身高‘],
    left: ‘right‘,
    z: 100
  },
  grid: {
    containLabel: true,
    left: ‘5%‘,
    right: ‘5%‘
  },
  tooltip: {
    show: true,
    trigger: ‘axis‘,
    // formatter: "周数:{b}\n增重:{c}",
    position: function (pos, params, el, elRect, size) {
      var obj = { top: 100 };
      obj[[‘left‘, ‘right‘][+(pos[0] < size.viewSize[0] / 3)]] = 30;
      return obj;
    },
  },
  xAxis: {
    type: ‘category‘,
    boundaryGap: false,
    data: [],
    show: true,
  },
  yAxis: {
    x: ‘center‘,
    type: ‘value‘,
    name: ‘身高(厘米)‘,
    splitLine: {
      lineStyle: {
        type: ‘dashed‘
      }
    },
    min:45,
    max:135,
    interval: 5,
    // show: false
  },
  series: [{
    name: ‘建议增长上限‘,
    type: ‘line‘,
    smooth: true,
    data: [],
    connectNulls: true
  }, {
    name: ‘测量身高‘,
    type: ‘line‘,
    smooth: true,
    data: [],
    connectNulls: true
  }, {
    name: ‘建议增长下限‘,
    type: ‘line‘,
    smooth: true,
    data: [],
    connectNulls: true
  }],
};

function initChart(canvas, width, height) {
  var windowWidth = 320;
  try {
    var res = wx.getSystemInfoSync();
    windowWidth = res.windowWidth;
  } catch (e) { }
  lineChart = echarts.init(canvas, null, {
    width: windowWidth,
    height: 480
  });
  canvas.setChart(lineChart);
  lineChart.setOption(option);
  return lineChart;
}

data: {
image_height: 480,
    image_width: 0,
    ec: {
      onInit: initChart
    },
}

drawImage: function (data, that) {
    var windowWidth = 320;
    try {
      var res = wx.getSystemInfoSync();
      windowWidth = res.windowWidth;
    } catch (e) { }
    that.setData({
      image_width: windowWidth
    })
    let gravidaInfo = wxcache.get(sessionKey.gravidaInfo)
    var category = [];
    for (var i = 0; i < 49; i++) category.push(i == 0 ? (i + "月") : i);
    let series = [{
      name: ‘建议增长上限‘,
      data: ‘‘
    }, {
      name: ‘测量身高‘,
      data: data
    }, {
      name: ‘建议增长下限‘,
      data: ‘‘
    }];
    setTimeout(function () {
      lineChart.setOption({
        xAxis: {
          data: category
        },
        series: series
      });
    }, 500)
  },

onShow: function() {
  let that = this
  that.drawImage(Stature, this);
}

5)最终效果