小白学习微信小程序的数据可视化和图表展示

大黄鸭duck.

于 2024-07-06 00:53:07 发布

阅读量303

点赞数 5

文章标签：学习微信小程序信息可视化

本文链接：https://blog.csdn.net/qq_67153941/article/details/140220893

版权

微信小程序是一种可以在微信客户端内运行的应用程序，它可以提供丰富的交互和数据展示功能。在小程序中进行数据可视化和图表展示是非常常见的需求，可以通过使用一些开源的图表库来实现。在本文中，将介绍如何使用微信小程序和 echarts 库来进行数据可视化和图表展示。

准备工作

首先，需要准备好微信小程序的开发环境。可以在微信官方网站上下载并安装微信开发者工具。安装完成后，打开微信开发者工具，并登录自己的微信账号。

创建小程序

在微信开发者工具中，选择创建新项目。填写自己的小程序项目信息，包括项目名称、AppID、项目目录等。点击确定后，会生成一个新的小程序项目。

引入 echarts 库

在微信开发者工具左侧的项目文件树中，找到项目的根目录，在根目录下新建一个 libs 目录，用于存放引入的第三方库。然后，从 echarts 官网上下载 echarts.min.js 文件，并将它拖放到 libs 目录中。

接下来，在项目的 app.json 文件中，将 echarts.min.js 添加到小程序的全局脚本中。代码如下：

{
  "pages": [
    "pages/index/index"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "小程序",
    "navigationBarTextStyle": "black"
  },
  "usingComponents": {},
  "plugins": {
    "echarts": {
      "version": "1.2.3",
      "provider": "wx2ec3e513892f5bf4"
    }
  },
  "requiredBackgroundModes": ["audio", "location"],
  "permission": {
    "scope.userLocation": {
      "desc": "你的位置信息将用于小程序位置接口的效果展示"
    }
  },
  "style": "v2",
  "networkTimeout": {
    "request": 10000,
    "downloadFile": 10000,
    "uploadFile": 10000,
    "connectSocket": 10000
  },
  "echarts": "/libs/echarts.min"
}

上面的代码中，我们将 echarts.min.js 文件添加到了小程序的全局脚本中，并指定了它的路径为 /libs/echarts.min。

创建数据可视化页面

在小程序的根目录下，创建一个名为 charts 的目录，用于存放数据可视化相关的页面。在 charts 目录下，创建一个名为 line-chart 的页面，用于展示折线图。在 line-chart 页面的 json 文件中，添加 echarts 组件和页面的自定义样式。代码如下：

{
  "usingComponents": {
    "ec-canvas": "/libs/ec-canvas/ec-canvas"
  },
  "style": "v2"
}

在 line-chart 页面的 wxml 文件中，添加 echarts 组件，并设置它的 id 和 canvas-id。代码如下：

<view class="container">
  <ec-canvas id="mychart-dom-bar" canvas-id="mychart-bar"></ec-canvas>
</view>

在 line-chart 页面的 js 文件中，引入 echarts 库，并创建图表实例。代码如下：

import * as echarts from '../../libs/echarts.min';

Page({
  data: {
    // 图表实例
    chart: null,
    // 图表配置项
    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'
      }]
    }
  },
  onReady: function() {
    // 创建图表实例
    this.setData({
      chart: echarts.init(this.selectComponent('#mychart-dom-bar').canvasContext)
    });
  },
  onShow: function() {
    // 绘制图表
    this.data.chart.setOption(this.data.option);
  }
});

在上面的代码中，我们在页面的 onReady 生命周期函数中创建了图表实例，并通过 setData 方法将它保存在 data 中；在页面的 onShow 生命周期函数中，调用 chart.setOption 方法绘制图表。