小程序图形:echarts-weixin 入门使用

去官网下载整个项目:

https://github.com/ecomfe/echarts-for-weixin

 

拷贝ec-canvs文件夹到小程序里面

index.js里面的写法

import * as echarts from "../../components/ec-canvas/echarts"
const app = getApp();
function initChart(canvas, width, height, dpr) {const chart = echarts.init(canvas, null, {width: width,height: height,devicePixelRatio: dpr });canvas.setChart(chart);var option = {backgroundColor: "#ffffff",series: [{label: {normal: {fontSize: 14}},type: 'pie',center: ['50%', '50%'],radius: ['20%', '40%'],data: [{value: 55,name: '北京'}, {value: 20,name: '武汉'}, {value: 10,name: '杭州'}, {value: 20,name: '广州'}, {value: 38,name: '上海'}]}]};chart.setOption(option);return chart;
}Page({/*** 页面的初始数据*/data: {ec: {onInit: initChart}}
})

index.json里面的写法

{"usingComponents": {"ec-canvas":"../../components/ec-canvas/ec-canvas"}
}

页面的写法

<view class="chart"><ec-canvas id="mychart-dom-pie" canvas-id="mychart-pie" ec="{{ ec }}"></ec-canvas></view>

样式大小控制

.chart{width: 100%;height: 300px;
}
ec-canvas {width: 100%;height: 100%;}

效果图

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

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

相关文章

Vscode 使用SSH远程连接树莓派的教程(解决卡在Downloading with wget)

配置Vscode Remote SSH 安装OpenSSH 打开Windows开始页面&#xff0c;直接进行搜索PowerShell&#xff0c;打开第一个Windows PowerShell&#xff0c;点击以管理员身份运行 输入指令 Get-WindowsCapability -Online | ? Name -like OpenSSH* 我是已经安装好了&#xff0c;…

学会玩游戏,智能究竟从何而来?

最近在读梅拉妮米歇尔《AI 3.0》第三部分第九章&#xff0c;谈到学会玩游戏&#xff0c;智能究竟从何而来&#xff1f; 作者: [美] 梅拉妮米歇尔 出版社: 四川科学技术出版社湛庐 原作名: Artificial Intelligence: A Guide for Thinking Humans 译者: 王飞跃 / 李玉珂 / 王晓…

基于springboot实现计算机类考研交流平台系统项目【项目源码+论文说明】

基于springboot实现计算机类考研交流平台系统演示 摘要 高校的大学生考研是继高校的高等教育更上一层的表现形式&#xff0c;教育的发展是我们社会的根本&#xff0c;那么信息技术的发展又是改变我们生活的重要因素&#xff0c;生活当中各种各样的场景都存在着信息技术的发展。…

程序员超强大脑——更好地解决编程问题(二)

概念机器 概念机器是计算机的抽象表征&#xff0c;可以借此分析计算机执行的操作。 程序员不仅经常借助概念机器推理计算机的运行方式&#xff0c;而且往往用它来分析代码。例如&#xff0c;虽然并不存在能够出存储数值的实体&#xff0c;但程序员还是会将变量描述为“保存”…

Debezium发布历史163

原文地址&#xff1a; https://debezium.io/blog/2023/09/23/flink-spark-online-learning/ 欢迎关注留言&#xff0c;我是收集整理小能手&#xff0c;工具翻译&#xff0c;仅供参考&#xff0c;笔芯笔芯. Online machine learning with the data streams from the database …

SpringBlade CVE-2022-27360 export-user SQL 注入漏洞分析

漏洞描述 SpringBlade是一个基于Spring Cloud和Spring Boot的开发框架&#xff0c;旨在简化和加速微服务架构的开发过程。它提供了一系列开箱即用的功能和组件&#xff0c;帮助开发人员快速构建高效可靠的微服务应用。该产品/api/blade-user/export-user接口存在SQL注入。 漏…

Java - List集合与Array数组的相互转换

一、List 转 Array 使用集合转数组的方法&#xff0c;必须使用集合的 toArray(T[] array)&#xff0c;传入的是类型完全一样的数组&#xff0c;大小就是 list.size() public static void main(String[] args) throws Exception {List<String> list new ArrayList<S…

无处不在的智慧:探索嵌入式系统的奇妙

无处不在的智慧&#xff1a;探索嵌入式系统的奇妙 嵌入式系统作为当今科技领域中无处不在的一种技术&#xff0c;其奇妙之处正在逐步被揭示和探索。从智能家居到智能穿戴设备&#xff0c;从工业自动化到医疗健康&#xff0c;嵌入式系统已经深入到我们生活和工作的方方面面&…

分布式ID生成策略-雪花算法Snowflake

分布式ID生成策略-雪花算法Snowflake 一、其他分布式ID策略1.UUID2.数据库自增与优化2.1 优化1 - 共用id自增表2.2 优化2 - 分段获取id 3.Reids的incr和incrby 二、雪花算法Snowflake1.雪花算法的定义2.基础雪花算法源码解读3.并发1000测试4.如何设置机房和机器id4.雪花算法时钟…

【misc | CTF】BUUCTF 二维码

天命&#xff1a;这题使用到脚本暴力破解压缩包文件里面的密码&#xff0c;还是比较有意思的 一开始是一个二维码&#xff0c;扫码进去有一个假flag 扔进图片隐写工具&#xff0c;啥也没有&#xff0c;都是同一个二维码 使用工具&#xff1a;foremost&#xff0c;直接分离图片&…

【详识JAVA语言】抽象类和接口

抽象类 抽象类概念 在面向对象的概念中&#xff0c;所有的对象都是通过类来描绘的&#xff0c;但是反过来&#xff0c;并不是所有的类都是用来描绘对象的&#xff0c;如果 一个类中没有包含足够的信息来描绘一个具体的对象&#xff0c;这样的类就是抽象类。 比如&#xff1a;…

水印相机小程序源码

水印相机前端源码&#xff0c;本程序无需后端&#xff0c;前端直接导入即可&#xff0c;没有添加流量主功能&#xff0c;大家开通后自行添加 源码搜索&#xff1a;源码软件库 注意小程序后台的隐私权限设置&#xff0c;前端需要授权才可使用 真实时间地址拍照记录&#xff0c…

Endnote x9 最快方法批量导入.enw格式文件

按照网上看到的一个方法直接选中所有enw批量拖拽到 All references 附件不行啊&#xff0c; 以为只能写bat脚本方式了 经过一番尝试&#xff0c;惊人的发现拖到下面这个符号的地方就行了&#xff01;&#xff01;&#xff01; 如果不成功的话&#xff0c;可能&#xff1a; 我…

使用typescript实现引入vue3生命周期函数的基础知识整理

在Vue 3中&#xff0c;生命周期函数被更改为组合式API&#xff0c;并且不再使用官方命名的生命周期钩子函数。不过&#xff0c;我们仍然可以模拟类似的功能&#xff0c;使用onBeforeMount、onMounted、onBeforeUpdate、onUpdated、onBeforeUnmount、onUnmounted等组合式API。 …

浅谈vue的自定义指令

Vue 的自定义指令是一种强大的工具&#xff0c;允许你为 DOM 元素添加自定义行为。自定义指令可以通过 Vue 的 Vue.directive() 全局 API 或组件内的 directives 选项来定义。 下面是如何使用 Vue 的自定义指令的基本步骤&#xff1a; 全局注册自定义指令 Vue.directive(foc…

js 手写深拷贝方法

文章目录 一、深拷贝实现代码二、代码讲解2.1 obj.constructor(obj)2.2 防止循环引用手写一个深拷贝是我们常见的面试题,在实现过程中我们需要考虑的类型很多,包括对象、数组、函数、日期等。以下就是深拷贝实现逻辑 一、深拷贝实现代码 const originalObject = {string: H…

蓝桥杯复习之差分

题目&#xff1a;空调 题目链接&#xff1a;https://www.acwing.com/problem/content/description/4265/ 思路&#xff1a; 对希望温度与实际温度做差&#xff0c;再对这个做差数组做差分。我们的每次操作等价于在差分数组中选一个数加一或者选两个数一个加一&#xff0c…

【小沐学GIS】QGIS安装和入门使用

文章目录 1、简介2、下载和安装3、使用3.1 XYZ Tiles3.2 WMS / WMTS3.3 GeoJson文件加载 4、在线资源结语 1、简介 QGIS是一款开源地理信息系统。该项目于2002年5月诞生&#xff0c;同年6月作为SourceForge上的一个项目建立。QGIS目前运行在大多数Unix平台、Windows和macOS上。…

奥尔特曼被曝身价超过140亿,但并未在OpenAI持股

作为OpenAI CEO和新一轮AI热潮代表人物&#xff0c;奥尔特曼&#xff08;Sam Altman&#xff09;却没有在OpenAI公司赚到“身价”。 钛媒体AGI 3月3日消息&#xff0c;据彭博亿万富翁指数最新数据显示&#xff0c;今年38岁的奥尔特曼最新身价&#xff08;净收入&#xff09;至少…

什么是区块链粉尘攻击?

文章目录 一、什么是粉尘&#xff1f;二、什么是粉尘攻击&#xff1f;三、粉尘攻击的危害3.1 钓鱼式攻击3.2 揭露该钱包和其所有者的详细信息3.3 造成链上网络拥堵 四、可能使用粉尘交易的人群五、如何避免粉尘攻击&#xff1f; 一、什么是粉尘&#xff1f; 粉尘的含义为小额资…