小程序图形: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.hqwc.cn/news/505633.html

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

相关文章

WEB漏洞 SSRF简单入门实践

一、漏洞原理 SSRF 服务端请求伪造 原理&#xff1a;在某些网站中提供了从其他服务器获取数据的功能&#xff0c;攻击者能通过构造恶意的URL参数&#xff0c;恶意利用后可作为代理攻击远程或本地的服务器。 二、SSRF的利用 1.对目标外网、内网进行端口扫描。 2.攻击内网或本地的…

复试PAT乙级day34

1111~1115 1113 很难&#xff0c;看了题解 人类习惯用 10 进制&#xff0c;可能因为大多数人类有 10 根手指头&#xff0c;可以用于计数。这个世界上有一种叫“钱串子”&#xff08;学名“蚰蜒”&#xff09;的生物&#xff0c;有 30 只细长的手/脚&#xff0c;在它们的世界里…

实践航拍小目标检测,基于YOLOv8全系列【n/s/m/l/x】参数模型开发构建无人机航拍场景下的小目标检测识别分析系统

关于无人机相关的场景在我们之前的博文也有一些比较早期的实践&#xff0c;感兴趣的话可以自行移步阅读即可&#xff1a; 《deepLabV3Plus实现无人机航拍目标分割识别系统》 《基于目标检测的无人机航拍场景下小目标检测实践》 《助力环保河道水质监测&#xff0c;基于yolov…

在网页上踢球:打造我自己的python(Django)足球网站

足球不仅仅是球场上的90分钟。它是一个不断发展的故事&#xff0c;一个全球球迷社群的粘合剂&#xff0c;一个数据和热情交织的世界。作为一名开发者和球迷&#xff0c;我决定将这两大爱好结合起来&#xff0c;用 Django 打造一个足球网站&#xff0c;让球迷们能够追踪他们最爱…

电脑数据丢失是什么原因 易我数据恢复软件下载 easyrecovery数据恢复软件下载 电脑数据删除了怎么恢复 电脑数据库损坏了怎么找回

目录 一、电脑数据丢失是什么原因 二、电脑数据丢失如何恢复 三、EasyRecovery恢复电脑数据的方法介绍 电脑是我们大家熟悉并且常用的数据存储设备&#xff0c;也是综合性非常强的数据处理设备。对于电脑设备来讲&#xff0c;最主要的数据存储介质是硬盘&#xff0c;电脑硬…

学习:吴恩达:什么是神经元?神经网络如何工作?

学习-吴恩达《AI for everyone》2019 深度学习非技术解释 第2部分 可选.zh_哔哩哔哩_bilibili 深度学习Deep learning 人工神经网络Artificial Neural network 什么是神经网络&#xff1f; 只有一个神经元 4个神经元的神经网络 神经网路的绝妙之处 神经网路的绝妙之处就在…

vscode如何远程到linux python venv虚拟环境开发?(python虚拟环境、vscode远程开发、vscode远程连接)

文章目录 1. 安装VSCode2. 安装扩展插件3. 配置SSH连接4. 输入用户名和密码5. 打开远程文件夹6. 创建/选择Python虚拟环境7. 安装Python插件 Visual Studio Code (VSCode) 提供了一种称为 Remote Development 的功能&#xff0c;允许用户在远程系统、容器或甚至 Windows 子系统…

【k8s管理--集群日志管理elk】

1、ELKF日志部署框架 使用docker部署的k8s集群所有的容器日志统一都在目录&#xff1a;/var/log/containers/1、filebeat是一个轻量级的日志手机工具&#xff0c;主要功能是收集日志2、logstash通可以收集日志&#xff0c;也可以进行数据清洗&#xff0c;但是一般不用logstash来…

YOLOv5论文作图教程(3)— 关于论文作图教程系列采用线上培训的通知(终结篇)

前言:Hello大家好,我是小哥谈。YOLOv5论文作图教程系列其实是我特别擅长的一个模块(本人产品经理出身),自从本系列发表了两篇文章之后,一直没有再继续更新,主要原因是通过文字无法比较好的表达软件的功能及使用,并且也无法达到比较好的培训效果。为了确保大家可以彻底掌…

StarRocks实战——首汽约车实时数仓实践

目录 前言 一、引入背景 二、OLAP引擎选型 三、架构演进 四、实时数仓构建 五、业务实践价值未来规划 原文大佬的这篇首汽约车实时数仓实践有借鉴意义&#xff0c;这里摘抄下来用作学习和知识沉淀。 前言 首汽约车&#xff08;以下简称“首约”&#xff09;是首汽集团打造…

javaWebssh在线授课辅导系统myeclipse开发mysql数据库MVC模式java编程计算机网页设计

一、源码特点 java ssh在线授课辅导系统是一套完善的web设计系统&#xff08;系统采用ssh框架进行设计开发&#xff09;&#xff0c;对理解JSP java编程开发语言有帮助&#xff0c;系统具有完整的源代码和数据库&#xff0c;系统主要采用 B/S模式开发。开发环境为TOMCAT7.…

Hololens 2应用开发系列(1)——使用MRTK在Unity中设置混合现实场景并进行程序模拟

Hololens 2应用开发系列&#xff08;1&#xff09;——使用MRTK在Unity中进行程序模拟 一、前言二、创建和设置MR场景三、MRTK输入模拟的开启 一、前言 在前面的文章中&#xff0c;我介绍了Hololens 2开发环境搭建和项目生成部署等相关内容&#xff0c;使我们能生成一个简单Ho…