小程序中引入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 ✨支持一下哦!手动码字,如有错误,欢迎在评论区指正💬~

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

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

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

相关文章

15-利用dubbo远程服务调用

本文介绍利用apache dubbo调用远程服务的开发过程&#xff0c;其中利用zookeeper作为注册中心。关于zookeeper的环境搭建&#xff0c;可以参考我的另一篇博文&#xff1a;14-zookeeper环境搭建。 0、环境 jdk&#xff1a;1.8zookeeper&#xff1a;3.8.4dubbo&#xff1a;2.7.…

一个最简单的ios程序(object_c)的编写

前言 如何在苹果系统MacOS创建一个简单的ios&#xff08;iphone&#xff09;程序&#xff0c;貌似非常的简单。但是&#xff0c;作为习惯了Windows开发的程序员来说&#xff0c;有时候还觉得有点麻烦&#xff0c;至少开始有点很不习惯。 本博文试着把这个过程展现一下&#xff…

文件传输工具FTransferor<优化篇>

在上一篇文章中&#xff0c;我们详细探讨了FTransferor文件传输工具的设计与实现&#xff0c;并展示了它在局域网文件传输方面的高效性。然而&#xff0c;随着互联网应用场景的不断丰富&#xff0c;传统的基于 TCP/UDP 的传输方式已经无法满足部分开发者的需求。特别是在跨平台…

Rabbitmq追问2

分析rabbitmq 默认使用姿势是什么 direct fanout还是什么 public void convertAndSend(String exchange, String routingKey, Object object, CorrelationData correlationData) throws AmqpException { this.send(exchange, routingKey, this.convertMessageIfNecessary(obje…

[文献阅读]ReAct: Synergizing Reasoning and Acting in Language Models

文章目录 摘要Abstract:思考与行为协同化Reason(Chain of thought)ReAct ReAct如何协同推理 响应Action&#xff08;动作空间&#xff09;协同推理 结果总结 摘要 ReAct: Synergizing Reasoning and Acting in Language Models [2210.03629] ReAct: Synergizing Reasoning an…

Rocky Linux下安装meld

背景介绍&#xff1a; meld是一款Linux系统下的用于 文件夹和文件的比对软件&#xff0c;非常常用&#xff1b; 故障现象&#xff1a; 输入安装命令后&#xff0c;sudo yum install meld&#xff0c;报错。 12-31 22:12:17 ~]$ sudo yum install meld Last metadata expirat…

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

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

【亚马逊云】基于Amazon EC2实例部署 NextCloud 云网盘并使用 Docker-compose 搭建 ONLYOFFICE 企业在线办公应用软件

文章目录 1. 部署EC2实例2. 安装 Docker 服务3. 安装docker-compose4. 创建Docker-compose文件5. 创建nginx.conf文件6. 运行docker-compose命令开始部署7. 访问ONLYOFFICE插件8. 访问NextCloud云盘9. 下载并启用ONLYOFFICE插件10. 上传文件测试11. 所遇问题12. 参考链接 1. 部…

如何在梯度计算中处理bf16精度损失:混合精度训练中的误差分析

如何在梯度计算中处理 bf16 精度损失&#xff1a;混合精度训练中的误差分析 在现代深度学习训练中&#xff0c;为了加速计算并节省内存&#xff0c;越来越多的训练任务采用混合精度&#xff08;Mixed Precision&#xff09;技术&#xff0c;其中常见的做法是使用低精度格式&am…

揭秘文件上传漏洞之操作原理(Thoughts on File Upload Vulnerabilities)

从上传到入侵&#xff1a;揭秘文件上传漏洞之操作原理 大家好&#xff0c;今天我们来聊一个"老而弥坚"的漏洞类型 —— 文件上传漏洞。虽然这个漏洞存在很多年了&#xff0c;但直到现在依然频频出现在各种漏洞报告中。今天我们就来深入了解一下它的原理和各种校验方…

《迁移学习与联邦学习:推动人工智能发展的关键力量》

在人工智能的发展历程中&#xff0c;数据和模型的学习方式不断演进。迁移学习和联邦学习作为两种重要的技术&#xff0c;正逐渐成为行业关注的焦点。 迁移学习&#xff1a;跨越边界的智慧 迁移学习旨在将从一个任务中学习到的知识迁移到另一个相关任务中。简单来说&#xff0…

哈夫曼编码(Huffman Coding)与哈夫曼树(Huffman Tree)

已知字符集{a,b,c,d,e,f}&#xff0c;若各字符出现的次数分别为6&#xff0c;3&#xff0c;8&#xff0c;2&#xff0c;10&#xff0c;4&#xff0c;则对应字符集中各字符的哈夫曼编码可能是&#xff08; &#xff09;。 A.00&#xff0c;1011&#xff0c;01&#xff0…

R语言入门笔记:第一节,快速了解R语言——文件与基础操作

关于 R 语言的简单介绍 上一期 R 语言入门笔记里面我简单介绍了 R 语言的安装和使用方法&#xff0c;以及各项避免踩坑的注意事项。我想把这个系列的笔记持续写下去。 这份笔记只是我的 R 语言入门学习笔记&#xff0c;而不是一套 R 语言教程。换句话说&#xff1a;这份笔记不…

创意思维与决策方法——SCAMPER:探索创新思维的利器

探索创新思维的利器&#xff1a;SCAMPER法 在面对复杂问题或需要突破性创意时&#xff0c;我们常常需要一些行之有效的工具来引导思考。SCAMPER法正是这样一个激发创新思维的利器&#xff0c;它通过七个步骤&#xff1a;替代&#xff08;Substitute&#xff09;、组合&#xf…

微信小程序调用 WebAssembly 烹饪指南

我们都是在夜里崩溃过的俗人&#xff0c;所幸终会天亮。明天就是新的开始&#xff0c;我们会变得与昨天不同。 一、Rust 导出 wasm 参考 wasm-bindgen 官方指南 https://wasm.rust-lang.net.cn/wasm-bindgen/introduction.html wasm-bindgen&#xff0c;这是一个 Rust 库和 CLI…

自动驾驶3D目标检测综述(六)

停更了好久终于回来了&#xff08;其实是因为博主去备考期末了hh&#xff09; 这一篇接着&#xff08;五&#xff09;的第七章开始讲述第八章的内容。第八章主要介绍的是三维目标检测的高效标签。 目录 第八章 三维目标检测高效标签 一、域适应 &#xff08;一&#xff09;…

计算机毕业设计hadoop+spark+hive图书推荐系统 豆瓣图书数据分析可视化大屏 豆瓣图书爬虫 知识图谱 图书大数据 大数据毕业设计 机器学习

温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 作者简介&#xff1a;Java领…

极品飞车6的游戏手柄设置

极品飞车&#xff0c;既可以用键盘来控制车辆的前进、后退、左转、右转、加速与减速&#xff0c;也可以使用游戏手柄来操作车辆的运行。需要注意的是&#xff0c;极品飞车虽然支持手柄&#xff0c;但是仅支持常见的北通、罗技还有部分Xbox系列的手柄&#xff0c;至于其他的PS4手…

【VBA】EXCEL - VBA 创建 Sheet 表的 6 种方法,以及注意事项

目录 1. 创建一个新工作表&#xff0c;并将其添加到工作簿的末尾 2. 创建一个新工作表&#xff0c;并命名它 3. 创建一个新工作表&#xff0c;并将其插入到指定位置 4. 检查是否已有同名工作表&#xff0c;避免重复创建 5. 创建多个工作表 6. 基于现有模板创建新工作表 …

html文件通过script标签引入外部js文件,但没正确加载的原因

移动端H5应用&#xff0c;html文件通过script标签引入外部js文件&#xff0c;但没正确加载&#xff0c;在移动设备上难以排查。通过PC浏览器打开&#xff0c;发现js被阻止了&#xff1a;blocked:mixed-content。 原因在于&#xff1a; “blocked:mixed - content” 是浏览器的…