微信小程序中使用图表库，你用对了吗？

菏泽炫佑科技 菏泽炫佑小程序开发 菏泽炫佑app制作 炫佑科技

微信小程序中使用图表库，你用对了吗？

1.新建微信小程序项目

首先我们使用微信开发工具创建一个不使用云开发微信小程序项目（如图1），以及新创建的微信小程序目录结构（如图2）

图1

图22.下载官方工程到本地

要使用图表库，我们需要先将组件下载到本地。 您可以从官网（如图3）找到图表组件下载地址（图4）。 这里有两个链接：

官方地址：

图表组件下载地址：/-for-官网项目下载

图3

图4注意：该网站为国外网站，可能无法访问。 可以到我的上传资源下载 3.将组件复制粘贴到项目中 3.1. 我们将下载的代码解压到 -for-- 文件夹中（如图 5 所示）。 使用微信开发工具打开微信小程序示例，展示图表（如图6）

图5

图63.2 我们将-for--文件夹中的ec-chart组件核心文件复制粘贴到我们新项目的根目录中（如图7）

图 74. 创建图表的编码

下载并复制chart文件夹成功后，我们需要修改wxml； json； 索引页下的js和wxss显示图表

4.1 修改index.json代码

我们需要在页面json文件中引入ec-微信小程序中使用图表库，你用对了吗？，内容如下：

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

4.2 修改index.html代码

index.html使用组件标签展示图表，指定id； -ID; ec，内容如下：

<view class="echarts">
<ec-canvas id="echarts" canvas-id="echarts" ec="{{ec}}">ec-canvas>
view>

4.3 修改index.js代码

Index.js引入.js获取实例，定义绑定数据ec，初始化函数获取图表数据。

// 引入echarts.js
import * as echarts from '../../ec-canvas/echarts';
let chart = null;
Page({
  data: {
    ec: {
      onInit: initChart
    }
  }
})
// 初始化图表函数
function initChart(canvas, width, height, dpr) {
  chart = echarts.init(canvas, null, {
    width: width,
    height: height,
    devicePixelRatio: dpr
  })
  canvas.setChart(chart)
  // 显示Echarts图表类型信息，可以去Echarts官网复制粘贴
  let option = {
    xAxis: {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
      type: 'value'
    },
    series: [{
      data: [120, 200, 150, 80, 70, 110, 130],
      type: 'bar',
      showBackground: true,
      backgroundStyle: {
        color: 'rgba(180, 180, 180, 0.2)'
      }
    }]
  }
  chart.setOption(option);
  return chart;
}

4.4 修改index.wxss代码

我们需要为视图容器和ec组件指定样式才能显示，否则图表无法显示。

.echarts{
  width: 800rpx;
  height: 800rpx;
}
ec-canvas{
  width: 100%;
  height: 100%;
}

5、编译并运行图表信息，复制直方图信息，从而显示直方图。 你可以去官网自行复制粘贴样式。

六、微信小程序使用总结

图表非常有趣，值得学习。 使用一些可视化图表来展示数据更直观微信小程序如何开发，更有成就感。 介绍图表需要一些基础知识。 您可以去官方网站了解一下。 让我们一起学习，一起努力。

炫佑科技专注互联网开发小程序开发-app开发-软件开发-网站制作等