Taro引入echarts【兼容多端小程序(飞书/微信/支付宝小程序)】

近期接到公司新需求,开发飞书小程序,并且原型中含有大量的图表,本想使用飞书内置图表组件 ——
chart-space,但官方表示已经停止维护了,无奈之下,只能另寻他路,于是乎,图表之王(文档最完整,api最透彻,社区最活跃)echarts映入我脑海中,决定就是你了!

下载echarts代码

进入echarts下载地址,点击在线定制
在这里插入图片描述
勾选你需要的图表和组件,点击下载在这里插入图片描述
在这里插入图片描述

echarts引入项目

在开发项目中,components中创建Echarts文件,放入下载后的js包,并在该目录下创建wx-canvas.js,编写canvas构造函数代码,如下

export default class WxCanvas {constructor(ctx, canvasId, isNew, canvasNode) {this.ctx = ctx;this.canvasId = canvasId;this.chart = null;this.isNew = isNewif (isNew) {this.canvasNode = canvasNode;}else {this._initStyle(ctx);}// this._initCanvas(zrender, ctx);this._initEvent();}getContext(contextType) {if (contextType === '2d') {return this.ctx;}}// canvasToTempFilePath(opt) {//   if (!opt.canvasId) {//     opt.canvasId = this.canvasId;//   }//   return wx.canvasToTempFilePath(opt, this);// }setChart(chart) {this.chart = chart;}addEventListener() {// noop}attachEvent() {// noop}detachEvent() {// noop}_initCanvas(zrender, ctx) {zrender.util.getContext = function () {return ctx;};zrender.util.$override('measureText', function (text, font) {ctx.font = font || '12px sans-serif';return ctx.measureText(text);});}_initStyle(ctx) {ctx.createRadialGradient = () => {return ctx.createCircularGradient(arguments);};}_initEvent() {this.event = {};const eventNames = [{wxName: 'touchStart',ecName: 'mousedown'}, {wxName: 'touchMove',ecName: 'mousemove'}, {wxName: 'touchEnd',ecName: 'mouseup'}, {wxName: 'touchEnd',ecName: 'click'}];eventNames.forEach(name => {this.event[name.wxName] = e => {const touch = e.touches[0];this.chart.getZr().handler.dispatch(name.ecName, {zrX: name.wxName === 'tap' ? touch.clientX : touch.x,zrY: name.wxName === 'tap' ? touch.clientY : touch.y,preventDefault: () => {},stopImmediatePropagation: () => {},stopPropagation: () => {}});};});}set width(w) {if (this.canvasNode) this.canvasNode.width = w}set height(h) {if (this.canvasNode) this.canvasNode.height = h}get width() {if (this.canvasNode)return this.canvasNode.widthreturn 0}get height() {if (this.canvasNode)return this.canvasNode.heightreturn 0}
}

目录结构如下图
在这里插入图片描述
在Echarts文件中,创建ec-canvas.vue文件,创建canvas对象

<template><!--  // 多个echarts时将canvasId作为唯一标识,动态获取canvasId用于多个echarts可同时显示    --><canvastype="2d"class="ec-canvas":id="canvasId":canvas-id="canvasId"@touchStart="touchStart"@touchMove="touchMove"@touchEnd="touchEnd"></canvas>
</template><script lang="js">
import Taro from "@tarojs/taro";
import WxCanvas from "@/components/Echarts/wx-canvas";
import * as echarts from "@/components/Echarts/echarts.min";export default {name: "EcCanvas",props: {canvasId: {type: String,default: "",},chartData: {type: Array,default: () => [],},option: {type: Object,default: () => {}}},data() {return {}},watch: {chartData: function() {console.log('chartData', this.chartData)this.handleCreate()},},mounted() {echarts.registerPreprocessor(option => {if (option && option.series) {if (option.series.length > 0) {option.series.forEach(series => {series.progressive = 0;});} else if (typeof option.series === "object") {option.series.progressive = 0;}}})},methods: {init(callback) {this.initByNewWay(callback);},// eslint-disable-next-line complexityhandleCreate() {const option = this.optionconst v = thisv.init((canvas, width, height, canvasDpr) => {const chart = echarts.init(canvas, null, {width: width,height: height,devicePixelRatio: canvasDpr,})canvas.setChart(chart);chart.setOption(option);chart.on('click', (params) => {console.log('params', params)this.$emit('clickEChartItem', params)});return chart;})},initByNewWay(callback) {const query = Taro.createSelectorQuery();query.select(`#${this.canvasId}`) // 根据canvasId动态获取不同的echarts图表.fields({// node: true, // 飞书里面没有nodedataset: true,size: true,})// eslint-disable-next-line complexity.exec(res => {console.log('query res', res)// eslint-disable-next-line eqeqeq// if (!res || res.length == 0 || res[0] == null || res[0].node == null) {//   console.error('未获取到canvas的dom节点,请确认在页面渲染完成后或节点,taro中页面渲染完成的生命周期是useReady');//   return// }// const canvasNode = res[0].node;// this.canvasNode = canvasNode;console.log(11,this.option.height);const canvasDpr = Taro.getSystemInfoSync().pixelRatio;const canvasWidth = res[0].width;const canvasHeight = res[0].height;// const ctx = canvasNode.getContext("2d");const ctx = tt.createCanvasContext(this.canvasId)console.log('ctx', ctx)// const canvas = new WxCanvas(ctx, this.canvasId, true, canvasNode) // 不给canvasNode也可以const canvas = new WxCanvas(ctx, this.canvasId, true);echarts.setCanvasCreator(() => {return canvas;});this.chart = callback(canvas, canvasWidth, canvasHeight, canvasDpr)});},touchStart(e) {if (this.chart && e.touches.length > 0) {var touch = e.touches[0];var handler = this.chart.getZr().handler;handler.dispatch("mousedown", {zrX: touch.x,zrY: touch.y,});handler.dispatch("mousemove", {zrX: touch.x,zrY: touch.y,});handler.processGesture(this.wrapTouch(e), "start");}},touchMove(e) {if (this.chart && e.touches.length > 0) {var touch = e.touches[0];var handler = this.chart.getZr().handler;handler.dispatch("mousemove", {zrX: touch.x,zrY: touch.y,});handler.processGesture(this.wrapTouch(e), "change");}},touchEnd(e) {if (this.chart) {const touch = e.changedTouches ? e.changedTouches[0] : {};var handler = this.chart.getZr().handler;handler.dispatch("mouseup", {zrX: touch.x,zrY: touch.y,});handler.dispatch("click", {zrX: touch.x,zrY: touch.y,});handler.processGesture(this.wrapTouch(e), "end");}},wrapTouch(event) {for (let i = 0; i < event.touches.length; ++i) {const touch = event.touches[i];touch.offsetX = touch.x;touch.offsetY = touch.y;}return event;},},
};
</script><style>
.ec-canvas {width: 100%;height: 100%;min-height: 208px;flex: 1;
}
</style>

二次封装echarts组件

使用创建的echart组件,稍微进行二次封装,大佬可以用自己的方法封装更好的,我的思路是,页面只要给echarts传入不同option,就可以进行渲染,代码如下:

// eChart.vue
<template><EcCanvas :ref="canvasId" :canvasId="canvasId" :option="option"></EcCanvas>
</template><script>
import EcCanvas from './ec-canvas.vue'
import { watch, ref, toRefs } from 'vue'export default {components: {EcCanvas,},props: {canvasId: {type: String,default: () => '',},option: {type: Object,default: () => {},},},watch: {option: {handler(value) {this.$nextTick(() => { // 没有下一帧会出现无法渲染的问题 页面没有挂载完成this.$refs[this.canvasId] && this.$refs[this.canvasId].handleCreate()})},deep: true,},},
}
</script><style lang="scss">
</style>

使用echarts组件渲染页面

<template>
<view class="chart"><e-chart canvasId="canvasId" :option="option"></e-chart></view></template><script>import eChart from '@/componets/Echart/eChart.vue'import { reactive}  from 'vue'export default {components: { eChart },setup() {const state =  reactive({option: {}})onMounted(async () => {// 模拟在挂载后,进行数据请求,这边我直接对option赋值// 数据来源于echarts官方实例中,最基础的柱状图state.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'}]}})return {...toRefs(state),}}
}</script>
<style>
.chart {width: 100%;height: 300px;}
</style>

数据与图不符
最后,需要进行各种各样的渲染与修改,可直接参看echarts官网
希望此文对大家有帮助,也请大佬不吝赐教~

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/315011.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Apollo 7周年大会:百度智能驾驶的展望与未来

本心、输入输出、结果 文章目录 Apollo 7周年大会&#xff1a;百度智能驾驶的展望与未来前言百度集团副总裁、智能驾驶事业群组总裁王云鹏发言 直播回放大会相关内容先了解 Apollo&#xfeff;开放平台 9.0架构图 发布产品Apollo 定义自己对于智能化的认知百度集团副总裁 王云鹏…

Vue入门到关门之Vue介绍与使用

一、vue框架介绍 1、什么是Vue&#xff1f; Vue (读音 /vjuː/&#xff0c;类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是&#xff0c;Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层&#xff0c;不仅易于上手&#xff0c;还便于与…

1、Flink DataStreamAPI 概述(上)

一、DataStream API 1、概述 1&#xff09;Flink程序剖析 1.Flink程序组成 a&#xff09;Flink程序基本组成 获取一个执行环境&#xff08;execution environment&#xff09;&#xff1b;加载/创建初始数据&#xff1b;指定数据相关的转换&#xff1b;指定计算结果的存储…

图像处理的魔法师:Pillow 库探秘

文章目录 图像处理的魔法师&#xff1a;Pillow 库探秘第一部分&#xff1a;背景介绍第二部分&#xff1a;库是什么&#xff1f;第三部分&#xff1a;如何安装这个库&#xff1f;第四部分&#xff1a;库函数使用方法第五部分&#xff1a;场景应用第六部分&#xff1a;常见Bug及解…

字符串类型漏洞之updatexml函数盲注

UPDATEXML 是 MySQL 数据库中的一个函数&#xff0c;它用于对 XML 文档数据进行修改和查询。然而&#xff0c;当它被不当地使用或与恶意输入结合时&#xff0c;它可能成为 SQL 注入攻击的一部分&#xff0c;从而暴露敏感信息或导致其他安全漏洞。 在 SQL 注入攻击中&#xff0…

Prompt Engineering,提示工程

什么是提示工程&#xff1f; 提示工程也叫【指令工程】。 Prompt发送给大模型的指令。比如[讲个笑话]、[用Python编个贪吃蛇游戏]、[给男/女朋友写情书]等看起来简单&#xff0c;但上手简单精通难 [Propmpt]是AGI时代的[编程语言][Propmpt]是AGI时代的[软件工程][提示工程]是…

【Unity动画系统】详解Root Motion动画在Unity中的应用(一)

Root Motion动画与普通动画的区别 普通动画&#xff1a;动画文件里记录的是物体的绝对坐标和方向&#xff0c;在播放动画时&#xff0c;Unity会根据Animation中记录的值&#xff0c;直接修改游戏对象的坐标和方向&#xff0c;每一帧的坐标和方向都是通过插值计算得出来的&…

网工学习云计算HCIE感受如何?

作为一名网工&#xff0c;我经常会在各种网络论坛里查询搜索一些网络技术资料&#xff0c;以及跟论坛里的网友交流讨论平时在工作、学习中遇到的问题、故障&#xff0c;因此也经常能在论坛的首页看到誉天的宣传信息。机缘巧合之下关注了誉天的B站号&#xff0c;自从关注了誉天的…

李沐64_注意力机制——自学笔记

注意力机制 1.卷积、全连接和池化层都只考虑不随意线索 2.注意力机制则显示的考虑随意线索 &#xff08;1&#xff09;随意线索倍称之为查询(query) &#xff08;2&#xff09;每个输入是一个值value&#xff0c;和不随意线索key的对 &#xff08;3&#xff09;通过注意力池…

Python 面向对象——6.封装

本章学习链接如下&#xff1a; Python 面向对象——1.基本概念 Python 面向对象——2.类与对象实例属性补充解释&#xff0c;self的作用等 Python 面向对象——3.实例方法&#xff0c;类方法与静态方法 Python 面向对象——4.继承 Python 面向对象——5.多态 1. 封装的基…

每日一练-LeeCode-移除链表元素

题目 给你一个链表的头节点 head 和一个整数 val &#xff0c;请你删除链表中所有满足 Node.val val 的节点&#xff0c;并返回 新的头节点 。 示例 1&#xff1a; 输入&#xff1a;head [1,2,6,3,4,5,6], val 6 输出&#xff1a;[1,2,3,4,5] 示例 2&#xff1a; 输入&a…

【AI开发:音频】二、GPT-SoVITS使用方法和过程中出现的问题(GPU版)

1.FileNotFoundError: [Errno 2] No such file or directory: logs/guanshenxxx/2-name2text-0.txt 这个问题中包含了两个&#xff1a; 第一个&#xff1a;No module named pyopenjtalk 我的电脑出现的就是这个 解决&#xff1a;pip install pyopenjtalk 第二个&#xff1a…

156.25MHz的差分晶体振荡器SG3225VEN

数字经济正焕发出勃勃生机,云计算,大数据,5G和人工智能等新技术的发展给行业带来了新的机遇。无论是在数据中心内部还是在数据中心之间,提供低成本,高速的100/200/400G小型化解决方案都是光模块的发展需求。为了使DSP稳定工作&#xff0c;需要一个小型的封装晶体振荡器来提供参…

13.JAVAEE之HTTP协议

HTTP 最新的版本应该是 HTTP/3.0 目前大规模使用的版本 HTTP/1.1 使用 HTTP 协议的场景 1.浏览器打开网站 (基本上) 2.手机 APP 访问对应的服务器 (大概率) 学习 HTTP 协议, 重点学习 HTTP 的报文格式 前面的 TCP/IP/UDP 和这些不同, HTTP 的报文格式,要分两个部分来看待.请求…

「51媒体」城市推介会,地方旅游推荐,怎么做好媒体宣传

传媒如春雨&#xff0c;润物细无声&#xff0c;大家好&#xff0c;我是51媒体网胡老师。 城市推介会和地方旅游推荐是城市形象宣传的重要组成部分&#xff0c;通过有效的媒体宣传可以提升城市的知名度和吸引力。&#xff1a; 一&#xff0c;活动内容层面&#xff1a; 突出亮点…

Jenkins CI/CD 持续集成专题四 Jenkins服务器IP更换

一、查看brew 的 services brew services list 二、编辑 homebrew.mxcl.jenkins-lts.plist 将下面的httpListenAddress值修改为自己的ip 服务器&#xff0c;这里我是用的本机的ip 三 、重新启动 jenkins-lts brew services restart jenkins-lts 四 、浏览器访问 http://10.…

【Django】初识Django快速上手

Django简介 Django是一个高级的、开源的Python Web框架&#xff0c;旨在快速、高效地开发高质量的Web应用程序 https://developer.mozilla.org/zh-CN/docs/Learn/Server-side/Django/Introduction 安装Django pip install Django如果要知道安装的Django的版本&#xff0c;可…

鸿蒙内核源码分析(进程管理篇) | 谁在管理内核资源?

官方基本概念 从系统的角度看&#xff0c;进程是资源管理单元。进程可以使用或等待CPU、使用内存空间等系统资源&#xff0c;并独立于其它进程运行。 OpenHarmony内核的进程模块可以给用户提供多个进程&#xff0c;实现了进程之间的切换和通信&#xff0c;帮助用户管理业务程序…

yolov8旋转目标检测输出的角度转化为适合机械爪抓取的角度

1. 机械爪抓取时旋转的角度定义 以X轴正方向&#xff08;右&#xff09;为零度方向&#xff0c;角度取值范围[-90&#xff0c;90)。 确认角度的方法&#xff1a; 逆时针旋转X轴&#xff0c;X轴碰到矩形框长边时旋转过的角度记为angleX&#xff1a; 1.如果angleX小于90&#xf…

【源码】IM即时通讯源码/H5聊天软件/视频通话+语音通话/带文字部署教程

【源码介绍】 IM即时通讯源码/H5聊天软件/视频通话语音通话/带文字部署教程 【源码说明】 测试环境&#xff1a;Linux系统CentOS7.6、宝塔、PHP7.2、MySQL5.6&#xff0c;根目录public&#xff0c;伪静态laravel5&#xff0c;根据情况开启SSL 登录后台看到很熟悉。。原来是…