当前位置: 首页 > news >正文

【uniapp微信小程序】跨平台使用echarts的方案选择踩坑

一、前言

使用Uniapp(vue)开发微信小程序,想用echarts图表实现类似github热力图的效果。
简要列一些可行或不可行的方案。

二、方案对比

1. 【应用】:微信小程序原生开发

  • 有echarts官网提供的跨平台方案:在微信小程序中使用 ECharts
  • 简单易用,图表齐全

2. 【应用】:uniapp+app端

  • renderjs-echarts-demo在这里插入图片描述

    • 可参考的使用总结
  • render.js+echarts
    -

  • echarts图表在移动端的应用
    在这里插入图片描述

    • 支持的图表种类比较少,没试过

3. 【应用】uniapp+跨平台

  • uCharts可以跨h5+app+微信,但只有常用图表(热力图这种就没有)

4. 【应用】(Vue)uniapp+微信小程序

  • 引用mpvue-charts

mpvue是一个使用 Vue.js 开发小程序的前端框架,由美团点评技术团队开发在2018年3月开源。(支持转化为h5)

  • 不知道为啥要又用uniapp(跨平台)又引入mpvue= =有点奇怪。实际使用的时候,这种方案也是只能实现微信小程序的图表效果

三、方案4的实现与更新

  • 总之可实现hbuilder平台开发+使用mpvue-charts实现echarts图表在微信小程序展示的效果
  1. 下载 基础的demo,可以在这个基础上修改或者自己搭建环境和项目。

  2. 基础demo的优化:
    a. 需要根据自己的需求定制echarts.min.js,echarts在线构建(如果使用的不是min.js,要修改vue文件中的引用),版本选择参考b的信息
    b. echart的版本比较老(是v4的),所以【日历图】不能使用(其他的没测试)
    且为了避免更高版本出现下述问题,选择更新版本为 @5.2.2,npm i echarts@5.2.2 -S
    参考:mpvue使用echarts,遇到t.addEventListener is not a function 错误解决。

  3. 其他常见问题

    1. Q:echart报错: Component series.XXX not exists. Load it first
      A:可能是定制包里没有下载对应的图表。

相关文章:

【uniapp微信小程序】跨平台使用echarts的方案选择踩坑

一、前言 使用Uniapp(vue)开发微信小程序,想用echarts图表实现类似github热力图的效果。 简要列一些可行或不可行的方案。 二、方案对比 1. 【应用】:微信小程序原生开发 有echarts官网提供的跨平台方案:在微信小程…...

WAF渗透攻防实践(16)

预备知识 WAF:WEB攻击一直是黑客攻击的主流手段,WAF作为网站安全基础设施的标配。Web Application Firewall,Web应用防火墙,通过执行一系列针对HTTP/HTTPS的安全策略来专门为Web应用提供保护的产品。 Nginx:Nginx 是…...

高并发场景下机器性能优化sop

之前接触过一些高并发场景下的性能优化,最近过年时候又碰巧看了一些相关资料,趁着还没忘干净,手动整理一下,有一些是在别处看到的,有一些是自己的亲身经历,因为偏向于自己整理笔记所以很多地方都只是列了一…...

【女程序员进大厂面试经验】

*那些犹豫想做技术又不敢的女生一定不要胆怯,就认准了这条路坚持走下去。大三的学生已经可以开始投简历、寻找面试机会了。先说一下我的情况吧!我是郑州一双普通本科的女大学生,刚找工作的时候也很迷茫。同班的女生有做产品的、有做前端的、还…...

计算机网络笔记(复试准备)第一章

计算机网络笔记(复试准备) 第一章 网络,互联网与因特网 网络由若干个结点和连接这些结点的链路组成 多个网络通过路由器连接起来这也就形成了一个更大的网络即是我们熟知的互联网也就是“网络的网络” 因特网是世界上最大的网络 问&#xf…...

WooCommerce 上传文件 Vanquish v71.6

今天用wp 搭一个b2c外贸跨境电商网站 找 了一个文件上传插件,可以 上传无限数量的文件,没有文件大小限制WooCommerce 上传文件允许您上传无限数量的文件,没有任何文件大小限制。得益于其创新的块上传技术,它可以不受限制地上传任何…...

zabbix4.0 Web页面配置 - 聚合图形的实现

目录 1、主机组Host groups配置 创建主机组 ​编辑 将一个主机添加至刚才创建的主机里面 2、用户参数UserParameter设置 示例: 添加一个参数:show.host.messages 模拟zabbix模板里面的参数再添加一个userparameter 3、触发器设置 示例: …...

计算机网络 — UDP协议(看这一篇就可以

UDP协议UDP是传输层的重要协议之一,另一重要协议为TCP协议。两者对比:TCP协议复杂,但传输可靠。UDP协议简单,但传输不可靠。UDP协议全称为:User Datagram Protocol(用户数据报协议)。它是一个简…...

Pikachu靶场(暴力破解)

目录标题暴力破解(登录)基于表单的暴力破解验证码绕过(on server)验证码绕过(on client)token防爆破?上学期用这个靶场写过作业,现在抽空给它过一遍,由于需要抓包,从而通过小皮,使用本地(127.0…...

浅谈script,link,import,@import引入

一.页面导入样式,使用link和import有什么区别 链接式和导入式有什么区别(链接式,导入式,内嵌式,行内) 1.从属关系:link是html标签,import是css提供的. 2.加载差异:页面加载时,link会…...

【CSS】CSS 层叠样式表 ① ( 简介 | CSS 引入方式 - 内联样式 | 内联样式语法 | 内联样式缺点 )

文章目录一、CSS 层叠样式表二、CSS 引入方式 - 内联样式1、内联样式语法2、内联样式缺点3、内联样式代码示例① 核心代码示例② 完整代码示例③ 执行结果一、CSS 层叠样式表 CSS 全称 Cascading Style Sheets , 层叠样式表 ; 作用如下 : 设置 HTML 页面 文本内容 的 字体 , 颜…...

12.STM32系统定时器-SysTick

目录 1.系统定时器-SysTick 2.SysTick定时时间的计算 3.SysTick结构体 4.SysTick固件库函数 5.SysTick中断优先级 1.系统定时器-SysTick SysTick:24位系统定时器,只能递减,存在于内核嵌套在NVIC中。所有的Cortex-M中都有这个系统定时器。 重装载值…...

28张图讲解支付系统的通用设计,漂亮!

支付永远是一个公司的核心领域,因为这是一个有交易属性公司的命脉。那么,支付系统到底长什么样,又是怎么运行交互的呢?抛开带有支付牌照的金融公司的支付架构,下述链路和系统组成基本上符合绝大多数支付场景。其实整体…...

【5】linux命令每日分享——touch创建文件

大家好,这里是sdust-vrlab,Linux是一种免费使用和自由传播的类UNIX操作系统,Linux的基本思想有两点:一切都是文件;每个文件都有确定的用途;linux涉及到IT行业的方方面面,在我们日常的学习中&…...

TypeScript快速上手语法+结合vue3用法

TypeScript快速上手语法结合vue3用法 前言: 本篇内容不涉及TypeScript安装以及配置,具体安装及配置篇可以看下面目录,本篇只涉及TypeScript语法相关内容,及结合vue3的用法。不讲废话,简单直接直接开撸。 目录 Type…...

一,下载iPerf3最新源代码

本文目录普通下载方式:git下载方式:普通下载方式: 如果你只是要阅读源代码,不涉及到编译安装修改源代码,那么可以简单的通过此方式下载代码。如果你希望编译安装修改源代码,那么建议通过git来进行源代码的…...

keithley6487/吉时利6487皮安表

产品概览 5-1/2 位 Keithley 6487 皮安表/电压源改进了屡获殊荣的 Keithley 6485 皮安表的测量能力,并增加了高分辨率 500V 电源。它提供更高的精度和更快的上升时间,以及与电容设备一起使用的阻尼功能。这款经济高效的仪器具有八个电流测量范围和高速自…...

sql命令大全

一:基本命令 1.数据库连接 mysql -h 主机名 -u root -p2.添加用户 insert into user (host,user,password,select_priv,insert_priv,update_priv) values (localhost,guest,password(guest123),Y,Y,Y);3.创建用户 create user usernamehost identified by passw…...

Ubuntu 定时执行脚本

一、关于crontab cron是一个Linux定时执行工具,可以在无需人工干预的情况下运行作业。在Ubuntu中,cron是被默认安装并启动的。 二、例子 直接上例子,来看看怎么用。 需求:定时每天8点,自动执行保存在/root目录下he…...

Python带你制作一个属于自己的多功能音乐播放器

前言 嗨喽,大家好呀~这里是爱看美女的茜茜呐 就是用Python做一个简易的音乐播放器,废话不多说,咱们直接开干 当然,今天做这个肯定不是最简单的,最简单的音乐播放器,9行代码足以 完整源码等直接在文末名片领…...

java_网络服务相关_gateway_nacos_feign区别联系

1. spring-cloud-starter-gateway 作用:作为微服务架构的网关,统一入口,处理所有外部请求。 核心能力: 路由转发(基于路径、服务名等)过滤器(鉴权、限流、日志、Header 处理)支持负…...

利用ngx_stream_return_module构建简易 TCP/UDP 响应网关

一、模块概述 ngx_stream_return_module 提供了一个极简的指令&#xff1a; return <value>;在收到客户端连接后&#xff0c;立即将 <value> 写回并关闭连接。<value> 支持内嵌文本和内置变量&#xff08;如 $time_iso8601、$remote_addr 等&#xff09;&a…...

(十)学生端搭建

本次旨在将之前的已完成的部分功能进行拼装到学生端&#xff0c;同时完善学生端的构建。本次工作主要包括&#xff1a; 1.学生端整体界面布局 2.模拟考场与部分个人画像流程的串联 3.整体学生端逻辑 一、学生端 在主界面可以选择自己的用户角色 选择学生则进入学生登录界面…...

日语学习-日语知识点小记-构建基础-JLPT-N4阶段(33):にする

日语学习-日语知识点小记-构建基础-JLPT-N4阶段(33):にする 1、前言(1)情况说明(2)工程师的信仰2、知识点(1) にする1,接续:名词+にする2,接续:疑问词+にする3,(A)は(B)にする。(2)復習:(1)复习句子(2)ために & ように(3)そう(4)にする3、…...

逻辑回归:给不确定性划界的分类大师

想象你是一名医生。面对患者的检查报告&#xff08;肿瘤大小、血液指标&#xff09;&#xff0c;你需要做出一个**决定性判断**&#xff1a;恶性还是良性&#xff1f;这种“非黑即白”的抉择&#xff0c;正是**逻辑回归&#xff08;Logistic Regression&#xff09;** 的战场&a…...

JVM垃圾回收机制全解析

Java虚拟机&#xff08;JVM&#xff09;中的垃圾收集器&#xff08;Garbage Collector&#xff0c;简称GC&#xff09;是用于自动管理内存的机制。它负责识别和清除不再被程序使用的对象&#xff0c;从而释放内存空间&#xff0c;避免内存泄漏和内存溢出等问题。垃圾收集器在Ja…...

高危文件识别的常用算法:原理、应用与企业场景

高危文件识别的常用算法&#xff1a;原理、应用与企业场景 高危文件识别旨在检测可能导致安全威胁的文件&#xff0c;如包含恶意代码、敏感数据或欺诈内容的文档&#xff0c;在企业协同办公环境中&#xff08;如Teams、Google Workspace&#xff09;尤为重要。结合大模型技术&…...

从零实现STL哈希容器:unordered_map/unordered_set封装详解

本篇文章是对C学习的STL哈希容器自主实现部分的学习分享 希望也能为你带来些帮助~ 那咱们废话不多说&#xff0c;直接开始吧&#xff01; 一、源码结构分析 1. SGISTL30实现剖析 // hash_set核心结构 template <class Value, class HashFcn, ...> class hash_set {ty…...

BCS 2025|百度副总裁陈洋:智能体在安全领域的应用实践

6月5日&#xff0c;2025全球数字经济大会数字安全主论坛暨北京网络安全大会在国家会议中心隆重开幕。百度副总裁陈洋受邀出席&#xff0c;并作《智能体在安全领域的应用实践》主题演讲&#xff0c;分享了在智能体在安全领域的突破性实践。他指出&#xff0c;百度通过将安全能力…...

python执行测试用例,allure报乱码且未成功生成报告

allure执行测试用例时显示乱码&#xff1a;‘allure’ &#xfffd;&#xfffd;&#xfffd;&#xfffd;&#xfffd;ڲ&#xfffd;&#xfffd;&#xfffd;&#xfffd;ⲿ&#xfffd;&#xfffd;&#xfffd;Ҳ&#xfffd;&#xfffd;&#xfffd;ǿ&#xfffd;&am…...