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

小程序中引入echarts(保姆级教程)

在这里插入图片描述

hello hello~ ,这里是 code袁~💖💖 ,欢迎大家点赞🥳🥳关注💥💥收藏🌹🌹🌹

🦁作者简介:一名喜欢分享和记录学习的在校大学生
💥个人主页:code袁的博客
💥 个人QQ:2647996100
🐯 个人wechat:code8896
code袁系列专栏导航
1.《毕业设计与课程设计》本专栏分享一些毕业设计的源码以及项目成果。🥰🥰🥰
2.《微信小程序开发》本专栏从基础到入门的一系开发流程,并且分享了自己在开发中遇到的一系列问题。🤹🤹🤹
3.《vue开发系列全程线路》本专栏分享自己的vue的学习历程。

非常期待和您一起在这个小小的互联网世界里共同探索、学习和成长。💝💝💝 ✨✨ 欢迎订阅本专栏 ✨✨ 

在这里插入图片描述

文章目录

      • 一、echarts的简介
      • 二、下载
      • 三、定制图标
      • 四、引入小程序配置
      • 四、引入小程序页面
      • 🎉写在最后

一、echarts的简介

是一个基于JS的数据可视化图标库,它提供了直观,生动,可交互,可个性定制的数据可视化图表

二、下载

echarts-for-weixin下载地址

在这里插入图片描述

在下载之前看看自己下载的版本号,后面有用

在这里插入图片描述

三、定制图标

1、echarts官网
在这里插入图片描述在这里插入图片描述

在这里插入图片描述

当你看到ok时说明下载好了

在这里插入图片描述
在这里插入图片描述

四、引入小程序配置

将下载的文件解压后将其中的ec-canvas中的内容放到小程序components中,然后用在线定制的echarts.min.js换掉原先的echarts.js

在这里插入图片描述

在这里插入图片描述

在自己需要的页面中引入

在这里插入图片描述

四、引入小程序页面

1.logs.wxml

<view class="main"><ec-canvas id="mychart-dom-line" canvas-id="mychart-line" ec="{{ ec }}" force-use-old-canvas="true"></ec-canvas></view></view>

2.logs.wxss

  .main {height: 500rpx;}ec-canvas {width: 100%;height: 100%;}

1=3.logs.js

import * as echarts from "../../components/echarts/echarts.min.js"
Page({
onLoad(){this.initChart()},initChart: function () {this.echartsComponentline = this.selectComponent('#mychart-dom-line');this.echartsComponentline.init((canvas, width, height) => {// 初始化图表const chartline = echarts.init(canvas, null, {width: width,height: height});this.setChartOptionline(chartline);return chartline;});},canvas.setChart(chart);setChartOptionline: function (chart) {var option = {backgroundColor: 'rgba(255,255,255,0.8)',tooltip: {trigger: 'item'},legend: {//显示图例show: true,top: '5%',left: 'center'},series: [{label: {normal: {fontSize: 14}},type: 'pie',center: ['50%', '60%'],//位置radius: ['20%', '30%'],//圈大小data: [{//每一项value: 3,name: '数字农业 3个'}, {value: 2,name: '体育产业 2个'}, {value: 7,name: '乡村新业态 7个'}, {value: 3,name: '其他产业 3个'}]}]};chart.setOption(option);
}
}
})

效果展示(具体以实际效果为准)

在这里插入图片描述

具体样式以及对应的数据属性产看官方文档

在这里插入图片描述

🎉写在最后

🍻伙伴们,如果你已经看到了这里,觉得这篇文章有帮助到你的话不妨点赞👍或 Star ✨支持一下哦!手动码字,如有错误,欢迎在评论区指正💬~

你的支持就是我更新的最大动力💪~
在这里插入图片描述

相关文章:

小程序中引入echarts(保姆级教程)

hello hello~ &#xff0c;这里是 code袁~&#x1f496;&#x1f496; &#xff0c;欢迎大家点赞&#x1f973;&#x1f973;关注&#x1f4a5;&#x1f4a5;收藏&#x1f339;&#x1f339;&#x1f339; &#x1f981;作者简介&#xff1a;一名喜欢分享和记录学习的在校大学生…...

INNER JOIN,LEFT JOIN,RIGHT JOIN,FULL JOIN这四个怎么在gorm中使用

在 GORM 中&#xff0c;JOIN 操作是通过 Joins 方法实现的&#xff0c;而不同类型的 JOIN&#xff08;如 INNER JOIN、LEFT JOIN、RIGHT JOIN 和 FULL JOIN&#xff09;可以通过特定的 SQL 语法来表示。GORM 本身并没有直接的 INNER, LEFT, RIGHT 等专用方法&#xff0c;但可以…...

分布式版本管理工具——Git关联远程仓库(github+gitee)

Git远程仓库&#xff08;Github&#xff09;的基本使用 一、前言二、Git远程仓库介绍三、演示1. 关联github远程仓库2. 关联gitee&#xff08;码云&#xff09;远程仓库3. 重命名远程仓库名4. 移除远程仓库 四、结束语 一、前言 古之立大事者&#xff0c;不惟有超世之才&#x…...

复习打卡大数据篇——HIVE 01

目录 1. 数据仓库初识 1.1 数据仓库概念 1.2 数据仓库特点 1.3 OLTP、OLAP区别 1.4 数仓分层架构 2. HIVE初识 2.1 什么是hive&#xff1f; 2.2 hive架构 3. HIVE初体验 3.1 beeline客户端使用 1. 数据仓库初识 1.1 数据仓库概念 数据仓库&#xff0c;Data WareHou…...

第430场周赛:使每一列严格递增的最少操作次数、从盒子中找出字典序最大的字符串 Ⅰ、统计特殊子序列的数目、统计恰好有 K 个相邻元素的数组数目

Q1、使每一列严格递增的最少操作次数 1、题目描述 给你一个由 非负 整数组成的 m x n 矩阵 grid。 在一次操作中&#xff0c;你可以将任意元素 grid[i][j] 的值增加 1。 返回使 grid 的所有列 严格递增 所需的 最少 操作次数。 2、解题思路 逐列处理&#xff1a;我们需要逐…...

前端处理跨域的几种方式

什么是跨域 指一个域下文档或者脚本去请求另一个域下的资源&#xff0c;这里的跨域是广义的&#xff1b; 广义的跨域&#xff1a; 资源提跳转&#xff1a;A链接、重定向、表单提交资源潜入&#xff1a;link、script、img、frame等dom标签&#xff0c;还有样式中background:url(…...

《计算机网络A》单选题-复习题库

1. 计算机网络最突出的优点是&#xff08;D&#xff09; A、存储容量大B、将计算机技术与通信技术相结合C、集中计算D、资源共享 2. RIP 路由协议的最大跳数是&#xff08;C&#xff09; A、13B、14C、15D、16 3. 下面哪一个网络层次不属于 TCP/IP 体系模型&#xff08;D&a…...

网络安全威胁2024年中报告

下载地址&#xff1a; 网络安全威胁2024年中报告-奇安信...

Quartz - JDBC-Based JobStore事务管理及锁机制

​ 由于JDBC-Based JobStore在进行job注册、trigger注册、任务调度及执行过程中需要操作数据库&#xff0c;而且会涉及到多张表&#xff0c;比如trigger注册的时候会根据不同情况写入triggers、simple_triggers或cron_triggers表&#xff0c;在执行任务的时候会读取和更新trigg…...

机器学习作业 | 泰坦尼克号生存的预测任务

泰坦尼克号生存的预测任务 学校作业&#xff0c;我来水一水 环境&#xff1a;pycharmanaconda虚拟环境 文章目录 泰坦尼克号生存的预测任务0.环境搭建参考&#xff1a;1 目的与要求2 任务背景3 任务简介4 模型介绍1.决策树&#xff08;Decision Tree&#xff09;2.朴素贝叶斯…...

Tonghttpserver6.0.1.3 使用整理(by lqw)

文章目录 1.声明2.关于单机版控制台和集中管理控制台3.单机版控制台3.1安装&#xff0c;启动和查看授权信息3.2一些常见的使用问题&#xff08;单机控制台&#xff09;3.3之前使用的是nginx&#xff0c;现在要配nginx.conf上的配置&#xff0c;在THS上如何配置3.4如何配置密码过…...

图像坐标导数的表达式 Expression for Image Coordinate Derivate

Title: 图像坐标导数的表达式 Expression for Image Coordinate Derivate 文章目录 I. 图像坐标 Image CoordinatesII. 关于 x \mathbf{x} x 的导数 Derivative wrt x \mathbf{x} x1. 第一部分2. 第二部分3. 两部分合并 III. 关于 H H H 的导数 Derivative wrt H H H1. 第一…...

Jenkins 中自动化部署 Spring Boot 项目

&#x1f468;&#x1f3fb;‍&#x1f4bb; 热爱摄影的程序员 &#x1f468;&#x1f3fb;‍&#x1f3a8; 喜欢编码的设计师 &#x1f9d5;&#x1f3fb; 擅长设计的剪辑师 &#x1f9d1;&#x1f3fb;‍&#x1f3eb; 一位高冷无情的全栈工程师 欢迎分享 / 收藏 / 赞 / 在看…...

Live555、FFmpeg、GStreamer介绍

Live555、FFmpeg 和 GStreamer 都是处理流媒体和视频数据的强大开源框架和工具&#xff0c;它们广泛应用于实时视频流的推送、接收、处理和播放。每个框架有不同的设计理念、功能特性以及适用场景。下面将详细分析这三个框架的作用、解决的问题、适用场景、优缺点&#xff0c;并…...

西门子DBX DBD DBB DBW的关系

DB10.DBD0 DB10.DBW0DB10.DBW2 DB10.DBB0DB10.DBB1DB10.DBB2DB10.DBB3 DB10.DBX0.00.7DB10.DBX1.01.7DB10.DBX2.02.7DB10.DBX3.03.7 使用之前需要在DB10中先定义&#xff0c;如果你仅在DB10中定义了一个DBD0&#xff0c;那么原则上你是可以使用上述所有地址的&#xff0c;但…...

语言模型在时间序列预测中的作用

语言模型在时间序列预测中的作用 从目前相关的研究情况来看,大语言模型在时间序列预测中的作用存在争议。 质疑其有用性的方面 消融研究结果:在对一些流行的基于语言模型(LLM)的时间序列预测方法进行消融研究时发现,去除LLM组件或将其替换为基本注意力层,在大多数情况下…...

【centos8 镜像修改】centos8 镜像修改阿里云

要将 CentOS 8 的镜像源修改为阿里云镜像&#xff0c;你需要编辑 /etc/yum.repos.d/ 目录下的 .repo 文件。以下是具体的步骤&#xff1a; 备份原始的 .repo 文件&#xff1a; 在编辑之前&#xff0c;建议备份原始的 .repo 文件&#xff0c;以便在出现问题时可以恢复。 sudo cp…...

2024年12月个人工作生活总结

本文为 2024年12月工作生活总结。 研发编码 Golang语言byte数组赋值 假定有如下变量&#xff1a; var strCode string var bCode [9]byte现需将string类型转换成byte类型&#xff0c;如下&#xff1a; bCode []byte(strCode)无法转换&#xff0c;提示&#xff1a; cannot…...

[cg] android studio 无法调试cpp问题

折腾了好久&#xff0c;native cpp库无法调试问题&#xff0c;原因 下面的Deploy 需要选Apk from app bundle!! 另外就是指定Debug type为Dual&#xff0c;并在Symbol Directories 指定native cpp的so路径 UE项目调试&#xff1a; 使用Android Studio调试虚幻引擎Android项目…...

vulnhub靶场【warzone】之2

前言 靶机&#xff1a;warzone-1&#xff0c;IP地址192.168.1.71 攻击&#xff1a;kali&#xff0c;IP地址192.168.1.16 都采用虚拟机&#xff0c;网卡为桥接模式 主机发现 因为都是同一局域网下&#xff0c;相当于内网环境&#xff0c;所以使用下面的工具&#xff0c;若想…...

MySQL什么情况下会加间隙锁?

目录 一、使用范围条件查询 二、唯一索引的范围查询 三、普通索引的查询 四、间隙锁的锁定规则 五、间隙锁的影响 间隙锁(Gap Lock)是MySQL中的一种锁机制,主要用于防止幻读现象。在MySQL的InnoDB存储引擎中,当事务隔离级别设置为可重复读(Repeatable Read)时,间隙…...

REDIS2.0

string list hash set 无序集合 声明一个key&#xff0c;键里面的值是元素&#xff0c;元素的类型是string 元素的值是唯一的&#xff0c;不能重复 多个集合类型之间可以进行并集&#xff0c;交集&#xff0c;集查的运算 sadd test1 a b c c d &#xff1a;添加5个元素&am…...

Java方法使用详解:从基本概念到进阶技巧

1. 方法介绍 方法是执行特定功能的代码块&#xff0c;可以被多次调用。方法由方法头和方法体组成&#xff0c;方法头包括方法名、参数列表和返回类型。方法体包含实际执行的代码。 2. 无参无返回值方法使用 这种方法没有参数&#xff0c;也不返回任何值。常用于执行一些不需…...

RT-Thread中堆和栈怎么跟单片机内存相联系

现在RT-ThreadMCU的应用方式越来越普遍&#xff0c;RT-Thread需要配置MCU中的RAM到的系统中&#xff0c;进入系统内存管理&#xff0c;才能提供给基于实时系统的应用程序使用&#xff0c;比如给应用程序提供malloc、free等函数调用功能。在嵌入式软件开发中&#xff0c;我们经常…...

对jenkins的rpm进行处理

下载Jenkins RPM包 首先&#xff0c;你需要从Jenkins官方网站&#xff08;https://pkg.jenkins.io/redhat - stable/&#xff09;下载合适的RPM包。通常&#xff0c;对于CentOS等基于RPM的系统&#xff0c;可以选择jenkins - <version>.noarch.rpm这种格式的包&#xff0…...

从Huggingface中下载数据集、模型

报错&#xff1a; 可能原因&#xff1a; 1. 服务器网络连接 这样就显示没有问题 2.访问权限问题 3.连接超时 4.使用镜像 使用镜像的方法在autodl上是可以成功的&#xff0c;但是在一些服务器却不能成功&#xff0c;那么就需要我们下载到本地&#xff0c;然后再把本地的打包…...

设计模式的分类

根据概念性动机分3类设计模式 创建型模式&#xff1a;管理对象的创建。 常用的有单例模式&#xff0c;简单工厂模式&#xff0c;工厂方法模式&#xff0c;另外还有原型模式&#xff0c;抽象工厂模式&#xff0c;建造者模式 结构型模式&#xff1a;将已有对象加入到设计中时…...

【图像去噪】论文精读:DualDn: Dual-domain Denoising via Differentiable ISP

请先看【专栏介绍文章】:【图像去噪(Image Denoising)】关于【图像去噪】专栏的相关说明,包含适配人群、专栏简介、专栏亮点、阅读方法、定价理由、品质承诺、关于更新、去噪概述、文章目录、资料汇总、问题汇总(更新中) 文章目录 前言Abstract1 Introduction2 Related W…...

张量与数据类型

Pytorch最基本的操作对象——张量&#xff08;tensor&#xff09;&#xff0c;张量是Pytorch中重要的数据结构&#xff0c;可认为是一个高维数组。一般的&#xff0c;标量&#xff08;scalar&#xff09;是只有大小没有方向的量&#xff0c;如1、2、3等&#xff1b;向量&#x…...

JavaScript概述

Web网页的三要素&#xff1a;HTML结构、CSS表现、JavaScript行为。 一、JavaScript语言的组成 JS的全称叫JavaScript&#xff0c;它一门面向对象的解释型弱类型语言。 JavaScript也是由3个部分来组成的&#xff1a;ECMAScript、DOM、BOM。 ECMAScript——它是JS的核心部分&a…...

tarjan算法——割边

今天也是小小的学了一个tarjan算法中的割边的一个应用 他和割点很像&#xff0c;都是用来处理无向图的&#xff0c;只不过是不能走反向边罢了 我们首先来说一个割边的定义 割边 当我们在无向图中删除一个边&#xff0c;无向图被分成不联通的两部分&#xff0c;那么这条边就…...

ESP32 I2S音频总线学习笔记(一):初识I2S通信与配置基础

文章目录 简介为什么需要I2S&#xff1f;关于音频信号采样率分辨率音频声道 怎样使用I2S传输音频&#xff1f;位时钟BCLK字时钟WS串行数据SD I2S传输模型I2S通信格式I2S格式左对齐格式右对齐格式 i2s基本配置i2s 底层API加载I2S驱动设置I2S使用的引脚I2S读取数据I2S发送数据卸载…...

Mybatisplus-IService

IService 是 MyBatis-Plus 提供的一个通用 Service 层接口&#xff0c;它封装了常见的 CRUD 操作&#xff0c;包括插入、删除、查询和分页等。通过继承 IService 接口&#xff0c;可以快速实现对数据库的基本操作&#xff0c;同时保持代码的简洁性和可维护性。 IService 接口中…...

深入浅出 Beam Search:自然语言处理中的高效搜索利器

Beam Search 技术详解 1. 引言 Beam Search 是一种广泛应用于自然语言处理&#xff08;NLP&#xff09;、机器翻译、语音识别等序列生成任务中的启发式搜索方法。本文将详细探讨 Beam Search 的原理、实现步骤、应用场景及其优缺点&#xff0c;并通过具体例子帮助读者更好地理…...

MySQL 可重复读隔离级别,完全解决幻读了吗?

什么是事务隔离级别&#xff1f; 事务隔离级别是数据库用来控制多个并发事务之间如何交互的机制。不同的隔离级别提供了不同程度的保护&#xff0c;以防止并发事务之间的相互干扰。MySQL 支持四种隔离级别&#xff1a; 读未提交&#xff08;Read Uncommitted&#xff09;&…...

Nginx知识详解(理论+实战更易懂)

目录 一、Nginx架构和安装 1.1 Nginx 概述 1.1.1 nginx介绍 1.1.2?Nginx 功能介绍 1.1.3?基础特性 1.1.4?Web 服务相关的功能 1.2?Nginx 架构和进程 1.2.1?Nginx 进程结构 1.2.2?Nginx 进程间通信 1.2.3?Nginx 启动和 HTTP 连接建立 1.2.4?HTTP 处理过程 1…...

VScode怎么重启

原文链接&#xff1a;【vscode】vscode重新启动 键盘按下 Ctrl Shift p 打开命令行&#xff0c;如下图&#xff1a; 输入Reload Window&#xff0c;如下图&#xff1a;...

华夏ERP系统部署

JDK安装及环境变量配置 数据库安装 Redis安装部署 Nginx安装部署 后端程序前端程序部署...

实际部署Dify可能遇到的问题:忘记密码、开启HTTPS、知识库文档上传的大小限制和数量限制

背景 前面我们以 docker compose 容器化的方式本地部署了 Dify 社区版&#xff0c;并快速体验了其聊天助手、工作量编排以及智能体&#xff08;Agent&#xff09;功能。不过后续实际生产环境使用时遇到了忘记密码、如何开启SSL以支持HTTPS、如何突破知识库文档上传的大小限制和…...

【C语言】库函数常见的陷阱与缺陷(三):内存分配函数[4]--free

C语言中的free函数用于释放之前通过malloc、calloc或realloc动态分配的内存。然而,在使用free函数时,开发者可能会遇到一些陷阱和缺陷。 一、功能与用法 free 函数是 C 语言中用于释放动态分配内存的关键函数。在程序使用 malloc、calloc 或 realloc 等函数在堆上分配了内存…...

【TypeScript篇】TypeScript命令行编译和自动化编译

目录 1. 命令行编译 步骤一&#xff1a;创建一个demo.ts文件 步骤二&#xff1a;全局安装TypeScript 步骤三&#xff1a;使用命令编译.ts文件 2. 自动化编译 步骤一&#xff1a;生成编译控制文件 步骤二&#xff1a;开启监视 3. 自动化编译的一些其它问题 1. 命令行编译…...

电子应用设计方案78:智能窗户系统设计

智能窗户系统设计 一、引言 智能窗户系统旨在为用户提供更便捷、舒适和节能的窗户控制体验&#xff0c;同时增强家居的安全性和智能化程度。 二、系统概述 1. 系统目标 - 实现窗户的自动开关控制&#xff0c;根据环境条件和用户设定进行操作。 - 具备风雨感应功能&#xff0c…...

数据挖掘笔记 | 插值 | 拉格朗日插值 | 龙格现象 | 埃尔米特插值 | 分段三次埃尔米特插值

Interpolation插值 ​ 对于缺失值的处理&#xff0c;比较常见的是数值分析中的插值和拟合这两种方法。插值指的是在离散数据的基础上补插连续函数&#xff0c;使得这条连续曲线通过全部给定的离散数据点&#xff1b;拟合则是找到一条“最优”的曲线&#xff0c;尽可能地贴近平…...

Ubuntu网络配置(桥接模式, nat模式, host主机模式)

windows上安装了vmware虚拟机&#xff0c; vmware虚拟机上运行着ubuntu系统。windows与虚拟机可以通过三种方式进行通信。分别是桥接模式&#xff1b;nat模式&#xff1b;host模式 一、桥接模式 所谓桥接模式&#xff0c;也就是虚拟机与宿主机处于同一个网段&#xff0c; 宿主机…...

【Linux网络编程】第十七弹---深入理解以太网与ARP协议:从帧格式到数据报解析

✨个人主页&#xff1a; 熬夜学编程的小林 &#x1f497;系列专栏&#xff1a; 【C语言详解】 【数据结构详解】【C详解】【Linux系统编程】【Linux网络编程】 目录 1、认识以太网 1.1、以太网帧格式 1.2、认识 MAC 地址 1.3、对比理解 MAC 地址和 IP 地址 1.4、认识 MT…...

AVL 树

1.AVL树的概念 AVL树是最先发明的自平衡二叉查找树&#xff0c;AVL树可以是一棵空树&#xff0c;或者具有以下性质的树&#xff1a;左右子树都是AVL树。且左右子树的高度差的绝对值不超过1。 AVL树是一颗高度平衡搜索二叉树&#xff0c;通过控制高度去控制平衡。 AVL树的发明…...

PHP关键字Self、Static和parent的区别

简介 在使用PHP代码时&#xff0c;您可能经常会遇到parent::、static::和self::。但是当你第一次作为一个开发人员开始的时候&#xff0c;有时候你会很困惑&#xff0c;不知道它们是做什么的&#xff0c;以及它们之间的区别。 在我第一次作为开发人员开始工作后的很长一段时间…...

Vscode左大括号不另起一行、注释自动换行

参考大佬的博客VSCode 格式化 cpp 文件时配置左大括号不换行_vscode大括号不换行-CSDN博客 Clang_format_style {BasedOnStyle: Chromium, IndentWidth: 4}...

golang标准库archive/tar实现打包压缩及解压

文章目录 前言一、单个文件操作1.单个文件打包示例2.单个文件解包示例 二、目录示例1.打包压缩2.解包 补充 前言 这个包就是将文件进行打包和解包&#xff0c;通俗理解就是Linux 下的 tar 命令。 主要是通过 tar.Reader 读取 tar 包&#xff0c;通过 tar.Writer 写入 tar包&am…...

模方匀色功能中,加载的模板文件从哪里来

使用 DasViewerV3.1.2及以上版本导出的颜色调整文件 模方是一款针对实景三维模型的冗余碎片、水面残缺、道路不平、标牌破损、纹理拉伸模糊等共性问题研发的实景三维模型修复编辑软件。模方4.2新增内置“自动UV展开”功能&#xff0c;新增局部调色功能和DOM匀色功能等。同时可与…...