微信小程序使用ECharts图表

微信小程序使用ECharts图表

1，引入ECharts组件

GitHab网址：https://github.com/apache/incubator-echarts

1），引入项目

将这个文件夹添加到微信小程序项目里

2），配置需要引入的页面

“.json” 文件配置组件路径

  "usingComponents": {
    "ec-canvas": "../../../component/ec-canvas/ec-canvas"
  },
  "navigationBarTitleText": "人体成分检测"

“.wxml”页面配置

<ec-canvas id="mychart-dom-bar" canvas-id="mychart-bar" ec="{{ ec }}" bindmyevent="switchover" data-index="{{item}}"></ec-canvas>

“.js” 脚本

const echarts = require('../../../component/ec-canvas/echarts.js');
const api = require('../../../config/api.js');
const app = getApp();

function initChart(canvas, width, height) {
   //获取动态显示数据
  let list = wx.getStorageSync('exdataList');
  let exdataList = [];
  let fatPercentageList = [];
  let bIMList = [];
  let numList = [];
  let a = 0;
  for (let i = 0; i < list.length; i++) {
    if (list[i].type == 8) {
      a++;
      exdataList.push(list[i])
      let fatPercentage = JSON.parse(list[i].content).adiposerate
      let bIM = JSON.parse(list[i].content).bmi
      fatPercentageList.push(fatPercentage)
      bIMList.push(bIM)
      numList.push(a)
    }
  }
    
    
  const chart = echarts.init(canvas, null, {
    width: width,
    height: height
  });
  canvas.setChart(chart);

  var option = {
    title: {
      text: '人体成分检测',
      left: 'left'
    },
    color: ["#5AC8FA", "#FF9500"],
    legend: {
      data: ['脂肪率', 'BMI'],
      left: 'right',
      backgroundColor: '#FFFFFF',
      z: 100
    },
    grid: {
      containLabel: true
    },
    tooltip: {
      show: true,
      trigger: 'axis'
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: numList,
    },
    yAxis: {
      x: 'center',
      type: 'value',
      splitLine: {
        lineStyle: {
          type: 'dashed'
        }
      }
    },
    series: [
      {
        name: '脂肪率',
        type: 'line',
        smooth: true,
        data: fatPercentageList
      },
      {
        name: 'BMI',
        type: 'line',
        smooth: true,
        data: bIMList
      }
    ]
  };
  chart.setOption(option);
    
    //添加点击事件
  chart.getZr().on('click', (params) => {
    let pointInPixel = [params.offsetX, params.offsetY]

    let pointInGrid = chart.convertFromPixel('grid', pointInPixel)
    let xIndex = pointInGrid[0]
    //为点击区域的数据集合的索引  可以利用该索引，实现点击切换显示数据的效果
    app.globalData.dataIndex = xIndex
  })
  return chart;
}

注意 在当前页面的data中添加“ec”变量