在uniapp中使用echarts

发布于2025-02-17 10:40:38字数3289

序：

产品：客户说他们晚上也想看数据，但是不想开电脑，所以我想把我们的数据平台搬上小程序端。

开发：😳也可以用h5啊，我们的数据平台没用到小程序端的功能，不用弄上小程序吧。

产品：可是客户说他们不想每次都输入网址。

开发：那可以加个书签呀。

产品：可客户说他们就喜欢小程序，就想在小程序上看，所以还是弄小程序吧。

开发：😩嗯。。。好的

所以，需求来了，我们需要在小程序端展示数据图表，由于我们原先的数据平台用的就是echarts，所以可视化图表库优先选择echarts，我们之前的小程序端技术栈用的uniapp，所以uniapp结合echarts的技术栈就来了。

做过或了解数据图表的同学应该都接触过百度的echarts库；echarts一个基于 JavaScript 的开源可视化图表库，常用于web端的数据图表展示，也可以用于其他平台；这篇文章的目的就是分享怎么在uniapp框架下小程序环境中使用echarts。

安装：

这次分享我们就不从构建项目开始了，需要了解怎么构建uniapp项目的同学可以自己去官网查看（传说门）；注意⚠️ 我们这次分享的项目是基于Vue3/Vite/Ts构建的。

// npm
npm install echarts

// yarn
yarn add echarts

coding：

先创建文件，然后写好最基础的内容：

<template>
  <canvas type="2d" :canvas-id="state.canvasId" :id="state.canvasId" />
</template>

<script setup lang="ts">
const state = reactive({
  canvasId: "canvasId",
});
</script>

现在我们的页面中已经有canvas元素了，接下来的就是重点了；在小程序中是不能直接使用document获取元素的，那我们该怎么将echart初始化到我们的canvas元素中呢？

答案就是 setPlatformAPI

我们在echarts的API文档中可以找到setPlatformAPI，可以看到对它的描述是 设置平台相关的 API，在 NodeJS 等非浏览器平台的时候可能需要提供；里面有个createCanvas方法是用于告诉echarts该怎么处理我们的canvas。

导入echarts，并调用setPlatformAPI

import * as echarts from "echarts"

echarts.setPlatformAPI({
  createCanvas() {
    //uniapp创建离屏 canvas 实例
    return uni['createOffscreenCanvas']({ type: "2d" });
  },
})

现在可以准备使用echart的init方法了，但是又有个问题，我们之前使用setPlatformAPI是告诉echarts怎么处理canvas；但echart的init方法需要传入一个节点我们又该怎么处理呢？既然不知道怎么处理，那先传个空对象，毕竟js的世界里所有的一切都是对象嘛🤣

echarts.init({})

然后我们就能看到控制台报了 this.dom.getContext is not a function 错误，那我们知道了，缺了个getContext方法；getContext方法顾名思义就是获取dom的上下文的方法，我们需要返回一个canvas的上下文，怎么获取呢？uniapp中有createSelectorQuery方法：

import {getCurrentInstance} from "vue"
const instance = getCurrentInstance();//vue3 setup用getCurrentInstance方法获取，vue2之间传入this
//获取canvas节点
const getNode = ()=>{
  return new Promise((resolve, reject) => {
    const dom = uni.createSelectorQuery().in(instance).select(state.canvasId);
    return dom['fields'](
      {
        node: true,
        size: true,
        rect: true,
      },
      (rect)=>{
        if(rect){
          resolve(rect);
        }else{
          reject();
        }
      }
     ).exec();
  })
}
//获取canvas的context
const { node } = getNode();
//这个就是canvas的context
const ctx = node.getContext("2d");

现在我们已经拿到canvas的context了，将它给getContext方法返回即可。

然后我们接着看控制台，报错信息已经从this.dom.getContext is not a function 变成了el.addEventListener is not a function，addEventListener方法就不用多说了，事件监听器；由于我们先不添加事件处理方法，所以直接先给个空的箭头函数，保存后再看看控制台，发现已经没有错误了；可以往下继续走，我们使用echarts的setOption方法配置图表信息：

charts.setOption({
			tooltip: {
				trigger: "item",
			},
			legend: {
				top: "5%",
				left: "center",
			},
			series: [
				{
					name: "Access From",
					type: "pie",
					radius: ["40%", "70%"],
					avoidLabelOverlap: false,
					label: {
						show: false,
						position: "center",
					},
					emphasis: {
						label: {
							show: true,
							fontSize: 40,
							fontWeight: "bold",
						},
					},
					labelLine: {
						show: false,
					},
					data: [
						{ value: 1048, name: "Search Engine" },
						{ value: 735, name: "Direct" },
						{ value: 580, name: "Email" },
						{ value: 484, name: "Union Ads" },
						{ value: 300, name: "Video Ads" },
					],
				},
			],
		});

注意： charts是由echarts.init方法返回的值，这个使用是按照echart文档中来的

现在再看看页面，我们已经可以看到页面中已经有图表的图案了，但是图案的大小有点不对，我们可以在init传入的对象中给到width及height给予宽高就会正常了。

写到这里我们的uniapp怎么使用echarts显示图表就已经基本讲完了，至于后面的事件处理及图片下载、图表全屏等功能下次再聊🥱

back top