小程序圖形: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.pswp.cn/news/717742.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/717742.shtml
英文地址,請注明出處:http://en.pswp.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; 粉塵的含義為小額資…