微信小程序echarts运用指南

小蓝 • 2024-11-09 02:14 • 编程

一、基本概念

微信小程序是一种新兴的应用平台，echarts则是一种常用的JavaScript图表库。微信小程序echarts可以将这两者结合起来，让小程序用户能够方便地使用echarts展示数据，同时在小程序端实现交互和动态效果。

二、安装与基本使用

1、安装echarts


npm install echarts -S

2、在需要使用echarts的页面json文件中添加引用


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

3、在需要使用echarts的页面wxml文件中添加使用代码

4、在需要使用echarts的页面js文件中添加代码


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

Page({
  data: {
    ec: {
      onInit: initChart
    }
  }
})

function initChart (canvas, width, height, dpr) {
  const chart = echarts.init(canvas, null, {
    width: width,
    height: height,
    devicePixelRatio: dpr // new
  });
  canvas.setChart(chart);

  var option = {
      // echarts配置
  };

  chart.setOption(option);
  return chart;
}

三、数据与交互

1、数据绑定

echarts的数据可以通过data属性进行传递，通过setData动态更新数据，实现动态展示效果。


this.setData({
  ec: {
    onInit: initChart,
    // echarts配置
    data: {
      // echarts数据
    }
  }
});

2、交互与事件

微信小程序可以通过wx.canvasTouchEvent将用户的触摸事件转化为echarts的触摸事件，进而进行交互。


canvasId = e.currentTarget.dataset.canvasId;
chartInstance = this.selectComponent('#' + canvasId).getChart();
if (chartInstance) {
  const canvas = chartInstance.getDom();
  const touchEvent = e.changedTouches[0];
  const touch = {
    x: touchEvent.x,
    y: touchEvent.y,
  };
  chartInstance.dispatchAction({
    type: 'mousemove',
    event: {
      target: 'none',
      // 转换触摸位置
      zrX: touch.x - canvas.offsetLeft,
      zrY: touch.y - canvas.offsetTop,
    }
  });
}

四、常用图表展示效果

1、折线图

折线图是一种展示连续数据变化趋势的图表，可以通过echarts提供的配置项实现各种效果。


option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [{
    data: [820, 932, 901, 934, 1290, 1330, 1320],
    type: 'line'
  }]
};

2、柱状图

柱状图是用长方形的面积或高度等比例的表现数据的图表。在echarts中，可以通过配置项实现多种效果的柱状图。


option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [{
    data: [820, 932, 901, 934, 1290, 1330, 1320],
    type: 'bar'
  }]
};

3、饼状图

饼状图是一种用圆环的比例表现数据的图表，echarts提供的饼状图配置项可以实现多种效果。


option = {
  series: [{
    type: 'pie',
    data: [
      {value: 335, name: '直接访问'},
      {value: 310, name: '邮件营销'},
      {value: 234, name: '联盟广告'},
      {value: 135, name: '视频广告'},
      {value: 1548, name: '搜索引擎'}
    ]
  }]
};

五、总结

本文简要介绍了微信小程序echarts的基本概念、安装与使用、数据与交互以及常用图表展示效果。希望读者能够应用本文所述的技能，为小程序增添更美观、人性化的数据展示效果。

原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/150885.html