小程序使用echarts
参考文档:echarts官网、echarts-for-weixin
- 第一步引入组件库,可直接从echarts-for-weixin下载,也可以从echarts官网自定义生成,这里我们就不贴了
- 组件库引入好后,就是页面引用啦,废话不多说,直接上代码
index.js:
import * as echarts from '../../components/ec-canvas/echarts'; // 这样引用可避免报init is undefined
let chart = {};
Page({data: {ec: {lazyLoad: true}},onLoad(options) {this.initChart(1)},// 初始化组件initChart(status) {const data = this.selectComponent("#mychart-dom-bar" + status)data.init((canvas, width, height) => {chart[status] = echarts.init(canvas, null, {width: width,height: height,devicePixelRatio: 2});canvas.setChart(chart[status]);this.setOption(status);return chart[status];})},setOption(i) {chart[i].clear(); // 清除chart[i].setOption(this['getOption' + i](), true); //获取新数据},getOption1() {return {tooltip: {trigger: 'axis'},grid: {left: 0,bottom: 0,top: 25,containLabel: true},xAxis: {type: 'category',data: ['洗美', '贴膜', '改装', '改色'],axisTick: {show: false},axisLabel: {color: 'rgba(0,0,0,0.45)',fontWeight: 'bold',lineHeight: 14,padding: [10, 0, 19, 0]},axisLine: {lineStyle: {color: 'rgba(0,0,0,0.15)'}}},yAxis: {type: 'value',axisLabel: {color: 'rgba(0,0,0,0.45)',fontWeight: 'bold',lineHeight: 14,padding: [0, 8, 0, 0]},splitLine: {lineStyle: {color: 'rgba(0,0,0,0.15)'}}},series: [{data: [120, 200, 150, 80],type: 'bar',color: '#0E71B2',label: {show: true,position: 'top',color: '#0E71B2',fontSize: 16}}]}},
})
index.wxml:
<view class="ec-container"><ec-canvas id="mychart-dom-bar1" canvas-id="mychart-bar1" ec="{{ec}}"></ec-canvas>
</view>
index.wxss:
.ec-container {display: flex;flex-direction: column;align-items: center;justify-content: center;width: 100vw;height: 600rpx;padding: 0 20rpx;
}ec-canvas {width: 100%;height: 100%;
}
此方法也可封装为一个页面生成多个图表
欢迎大家留言指正!
相关文章:
小程序使用echarts
参考文档:echarts官网、echarts-for-weixin 第一步引入组件库,可直接从echarts-for-weixin下载,也可以从echarts官网自定义生成,这里我们就不贴了组件库引入好后,就是页面引用啦,废话不多说,直…...
面向对象——封装
C面向对象的三大特性为:封装、继承、多态 C认为万事万物都皆为对象,对象上有其属性和行为 例如: 人可以作为对象,属性有姓名、年龄、身高、体重…,行为有走、跑、跳、吃饭、唱歌… 车也可以作为对象…...
【LeetCode】160.相交链表
题目 给你两个单链表的头节点 headA 和 headB ,请你找出并返回两个单链表相交的起始节点。如果两个链表不存在相交节点,返回 null 。 图示两个链表在节点 c1 开始相交: 题目数据 保证 整个链式结构中不存在环。 注意,函数返回结…...
【JWT的使用】
文章目录 前言1、用户登录1.1 JWTThreadLocal 2.1 代码实现2.1.1 ThreadLocal工具类2.2.2 定义拦截器2.2.3 注册拦截器 前言 1、用户登录 1.1 JWT JSON Web Token简称JWT,用于对应用程序上用户进行身份验证的标记。使用 JWTS 之后不需要保存用户的 cookie 或其他…...
Python获取音视频时长
Python获取音视频时长 Python获取音视频时长1、安装插件2、获取音视频时长.py3、打包exe4、下载地址 Python获取音视频时长 1、安装插件 pip install moviepy -i https://pypi.tuna.tsinghua.edu.cn/simple2、获取音视频时长.py 上代码:获取音视频时长.py # -*-…...
TCP四次握手为什么客户端等待的时间是2MSL
目录 什么是MSL从第三次握手开始分析总结 什么是MSL MSL是Maximum Segment Lifetime英文的缩写,中文可以译为“报文最大生存时间”,他是任何报文在网络上存在的最长时间,超过这个时间报文将被丢弃。 从第三次握手开始分析 第三次握手服务端…...
Android Studio 启用设备远程调试配置完整步聚
启用手机设置->开发者选项-无线调试,然后选择允许 已启用后无线调试变成绿色 ,点击无线调试进入详情页面 点击Android Studio的Device Manager 下的WIFI图标 会弹出下图窗口 打开手机的开发者选项中的WIFI调试(无线调试)下的使用二维码配对设备进行扫描. 设备配对成功后手机…...
玩转LaTeX(三)【数学公式(基础)、矩阵、多行公式】
数学公式基础 导言区(引包) \usepackage{amsmath} %带星号的eqution 正文区 \begin{document}%数学公式初步 \section{简介} \LaTeX{}将排版内容分为文本模式和数学模式。文本模式用于普通文本排版,数学模式用于数学公式排版。 …...
jenkins 配置git
在linux 中输入 保证git 安装成功 git --version使用查看git 安装目录(非源码安装直接用yum 安装的) which gitjenkins 中到 系统管理–>全局工具配置–> Git installations 新建一个项目 选择自由风格 源码管理选择 git 如果使用的是码云&a…...
单机部署MinIo并设置开机自启
MinIO 是高性能的对象存储,是为海量数据存储、人工智能、大数据分析而设计的,它完全兼容Amazon S3接口,单个对象最大可达5TB,适合存储海量图片、视频、日志文件、备份数据和容器/虚拟机镜像等。MinIO主要采用Golang语言实现&#…...
Latex | 使用MATLAB生成.eps矢量图并导入Latex中的方法
一、问题描述 用Latex时写paper时,要导入MATLAB生成的图进去 二、解决思路 (1)在MATLAB生成图片的窗口中,导出.eps矢量图 (2)把图上传到overleaf的目录 (3)在文中添加相应代码 三…...
宝塔面板定时任务重启各种服务
一个php项目,laravel框架,使用了nginx php redis mysql 还有进程守护supervisor,用于laravel的异步队列进程queue,当服务器重启后有可能部分服务没有成功启动这个时候可以用定时任务去检查服务状态,然后对不正常的自动…...
Ansible playbook编写
目录 palybooks 组成示例:运行palybook定义,引用变量when 条件判断循环Templates模块tags 模块 palybooks 组成 Tasks:任务,即通过 task 调用 ansible 的模板将多个操作组织在一个 playbook 中运行Variables:变量Temp…...
个人博客系统 -- 登录页面添加图片验证码
目录 1. 功能展示 2. 前段代码 3. 后端代码 1. 功能展示 在登录页面添加验证码登录 1. 检测到没有输入验证码或者输入的验证码错误时,进行弹窗提示.并且刷新当前验证码图片 2. 点击验证码进行刷新 2. 前段代码 1. 添加验证码标签,在密码的下面,在login.html进行修改 主要…...
剑指offer10-I.斐波那契数列
学计算机的对这道题肯定不陌生,我记得是学C语言的时候学递归的时候有这道题,于是我就世界用递归写了如下代码: class Solution {public int fib(int n) {if(n1) return 1;if(n0) return 0;return (fib(n-1) fib(n-2)) % 1000000007;} } 到…...
13年测试经验,性能测试-压力测试指标分析总结,看这篇就够了...
目录:导读 前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结(尾部小惊喜) 前言 一般推荐…...
大数据课程D3——hadoop的Source
文章作者邮箱:yugongshiye@sina.cn 地址:广东惠州 ▲ 本章节目的 ⚪ 掌握Source的AVRO Source; ⚪ 掌握Source的Exec Source; ⚪ 掌握Source的Spooling Directory Source; ⚪ 掌握Source的Netcat Source; ⚪ 掌握Source的Sequence Generator Source;…...
F5 LTM 知识点和实验 4-持久化
第四章:持久化 持久化: 大多数应用都是有状态的,比如,使用一个购物网站,最重要的是用户在放入一个商品之后,刷新网页要能继续看到购物车里的东西,这就需要请求报文发到同一个后端服务器上,持久化就能完成这个功能。 持久化支持一下几种场景: 源地址目标地址SSLSIPH…...
SpringBoot之WebMvcConfigurer详解
目录 一、基本介绍 二、WebMvcConfigurer接口展示 三、常用方法列举 3.1 addInterceptors:添加拦截器 3.2 addResourceHandlers:添加静态资源 3.3 addCorsMappings:添加跨域 编写的初衷是为了自己巩固复习,如果能帮到你将是…...
WPF实战学习笔记22-添加自定义询问窗口
添加自定义询问窗口 详细代码:https://github.com/DongLiqiang/Mytodo/commit/221de6b2344d5c861f1d3b2fbb2480e3e3b35c26 添加自定义询问窗口显示方法 修改文件Mytodo.Extensions.DialogExtension 添加内容,类中添加内容 /// <summary> /// …...
【根据当天日期输出明天的日期(需对闰年做判定)。】2022-5-15
缘由根据当天日期输出明天的日期(需对闰年做判定)。日期类型结构体如下: struct data{ int year; int month; int day;};-编程语言-CSDN问答 struct mdata{ int year; int month; int day; }mdata; int 天数(int year, int month) {switch (month){case 1: case 3:…...
反向工程与模型迁移:打造未来商品详情API的可持续创新体系
在电商行业蓬勃发展的当下,商品详情API作为连接电商平台与开发者、商家及用户的关键纽带,其重要性日益凸显。传统商品详情API主要聚焦于商品基本信息(如名称、价格、库存等)的获取与展示,已难以满足市场对个性化、智能…...
相机Camera日志实例分析之二:相机Camx【专业模式开启直方图拍照】单帧流程日志详解
【关注我,后续持续新增专题博文,谢谢!!!】 上一篇我们讲了: 这一篇我们开始讲: 目录 一、场景操作步骤 二、日志基础关键字分级如下 三、场景日志如下: 一、场景操作步骤 操作步…...
Vue3 + Element Plus + TypeScript中el-transfer穿梭框组件使用详解及示例
使用详解 Element Plus 的 el-transfer 组件是一个强大的穿梭框组件,常用于在两个集合之间进行数据转移,如权限分配、数据选择等场景。下面我将详细介绍其用法并提供一个完整示例。 核心特性与用法 基本属性 v-model:绑定右侧列表的值&…...
如何在看板中体现优先级变化
在看板中有效体现优先级变化的关键措施包括:采用颜色或标签标识优先级、设置任务排序规则、使用独立的优先级列或泳道、结合自动化规则同步优先级变化、建立定期的优先级审查流程。其中,设置任务排序规则尤其重要,因为它让看板视觉上直观地体…...
Linux简单的操作
ls ls 查看当前目录 ll 查看详细内容 ls -a 查看所有的内容 ls --help 查看方法文档 pwd pwd 查看当前路径 cd cd 转路径 cd .. 转上一级路径 cd 名 转换路径 …...
Java-41 深入浅出 Spring - 声明式事务的支持 事务配置 XML模式 XML+注解模式
点一下关注吧!!!非常感谢!!持续更新!!! 🚀 AI篇持续更新中!(长期更新) 目前2025年06月05日更新到: AI炼丹日志-28 - Aud…...
uniapp中使用aixos 报错
问题: 在uniapp中使用aixos,运行后报如下错误: AxiosError: There is no suitable adapter to dispatch the request since : - adapter xhr is not supported by the environment - adapter http is not available in the build 解决方案&…...
初学 pytest 记录
安装 pip install pytest用例可以是函数也可以是类中的方法 def test_func():print()class TestAdd: # def __init__(self): 在 pytest 中不可以使用__init__方法 # self.cc 12345 pytest.mark.api def test_str(self):res add(1, 2)assert res 12def test_int(self):r…...
OD 算法题 B卷【正整数到Excel编号之间的转换】
文章目录 正整数到Excel编号之间的转换 正整数到Excel编号之间的转换 excel的列编号是这样的:a b c … z aa ab ac… az ba bb bc…yz za zb zc …zz aaa aab aac…; 分别代表以下的编号1 2 3 … 26 27 28 29… 52 53 54 55… 676 677 678 679 … 702 703 704 705;…...
