使用 Echarts 图表的微信小程序

微信小程序是一种不需要下载安装即开即用的应用，可实现现用app应用70%的功能，用户扫一扫或者搜索即可使用，快捷方便使得微信小程序在我们生活中已经广泛使用。为了满足微信小程序开发者的需求，Echarts官方和微信小程序官方团队合作，提供了 ECharts 的微信小程序版本。开发者可以通过熟悉的 ECharts 配置方式，快速开发图表，满足各种可视化需求。这篇博客记录一下微信小程序中使用Echarts图表库

1. 新建微信小程序项目

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

图1

图2

2. 将Echarts官方项目下载到本地

使用Echarts的图表库，我们需要将Echarts的组件先下载到本地，可以从Echarts官网（图3所示）中找到github上的图表组件下载地址（图4），下面是两个链接：

Echarts官方地址：Echarts官方介绍微信小程序使用Echarts

图表组件下载地址：github官网上的 ecomfe/echarts-for-weixin 项目下载

图3

图4

注意：github是外国网站，很有可能无法访问，可以去我上传资源下载

3. 将Echarts组件复制粘贴到项目

3.1 我们将下载的代码解压后的echarts-for-weixin-master文件夹（图5所示），用微信开发者工具打开可以看到是一个Echarts图表的微信小程序示例（图6所示）

图5

图6

3.2 我们将echarts-for-weixin-master文件夹下的ec-canvas图表组件核心文件复制粘贴到我们新建项目的根目录下（图7所示）

图7

4. 编码创建图表

把图表文件夹下载复制成功，我们需要修改index页面下的wxml；json；js和wxss实现图表的展示

4.1 修改index.json代码

我们需要在页面json文件中引入ec-canvas组件，内容如下：

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

4.2 修改index.html代码

index.html用组件标签显示图表，指定id；canvas-id；ec，内容如下：

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

4.3 修改index.js代码

index.js中引入了echarts.js获取echarts实例，定义绑定数据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代码

我们需要为view容器和ec-canvas组件指定样式才可以显示，不然无法显示图表

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

5. 编译运行

图表信息复制的是柱状图的信息，所以显示的是柱状图，可以自行去Echarts官网复制粘贴样式

6. 微信小程序使用Echarts总结

echarts图表还是挺有意思的，值得去学习一下，用一些可视化图表去展示数据更加直观，很有成就感，引入图表需要一些echarts的基础知识，可以去Echarts官网了解学习一下，一起学习，一起努力吧