饼状图制作_html div显示饼图-程序员宅基地

技术标签: echarts  javascript  

文献种类:专题技术文献;
开发工具与关键技术: VS、C#
作者:方建恒 ;年级:20级 ;撰写时间: 2021 年 10 月 18日
下面我们来学习一下如何快速的制作一个饼状图,
首先我们需要一个插件,
运用插件可以让我们快速的完成我们想要的功能
在这里我们用到的是一个名为echarts的插件,
这个插件是一个基于JavaScript的开源可视化图表库。
首先我们要去到echarts的官网里将echarts的脚本文件下载下来,
然后进行引入,
在HTML部分你要创建一个div用来放置图表,如图:
在这里插入图片描述
注:上图中的宽高都可以根据自身要求自行定义。
接下来是script部分,
创建一个名为drawChart的方法,
然后基于准备好的dom,初始化一下echarts实例,如图:
在这里插入图片描述
然后我们重新回到echarts的官网,
点击导航栏里的示例,跳转到示例页面,
然后你就可以看到大多数图标的示例,
我们先在左侧选到饼状图,然后在右侧选择自己想要制作的饼状图样式,
然后点击你就会进入到编辑页面,
若是你选择的饼状图样式

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_54668937/article/details/120819926

智能推荐

Linux下几种文件传输命令 sz rz sftp scp介绍_szrzsz-程序员宅基地

文章浏览阅读684次。Linux下几种文件传输命令 sz rz sftp scp介绍 1.sftpSecure Ftp 是一个基于SSH安全协议的文件传输管理工具。由于它是基于SSH的,会在传输过程中对用户的密码、数据等敏感信息进行加密,因此可以有效的防止用户信息在传输的过程中被窃取,比FTP有更高的安全性。在功能方面与FTP很类似,不仅可以传输文件数据,而且可以进行远程的文件管理(如建立,删除,查看文件..._szrzsz

小记VUE下setTimeOut和setInterval遇到的问题_vue settimeout只执行了一次-程序员宅基地

文章浏览阅读1.2w次,点赞3次,收藏2次。相信大家对着两个函数都陌生,就是一个定时器,setTimeOut只执行一次,而setInterval会重复执行 需要注意的是:在setInterval不用的时候一定要用clearSetInterval关闭定时器。说一下最近开发中遇到的问题,我是用vue开发的,顺便记录这个错误。 我需要轮询接口,所以使用setInterval。// 我是想没2秒执行一次myFunc这个函数。setInterva_vue settimeout只执行了一次

GridLayout 表格布局_gridlayout 布局方向-程序员宅基地

文章浏览阅读2.4k次。使用此种布局方式是以表格的形式进行布局管理的,在使用此布局管理器时必须设置显示的行数和列数;package chap09.sec04;import java.awt.BorderLayout;import java.awt.GridLayout;import javax.swing.JButton;import javax.swing.JFrame;_gridlayout 布局方向

HarmonyOS什么时候上微内核,华为鸿蒙OS什么时候发售_华为鸿蒙harmonyOS上市时间_3DM手游...-程序员宅基地

文章浏览阅读89次。华为鸿蒙OS什么时候发售呢?华为正式发布鸿蒙,今天,华为开发者大会在广东东莞举行。会议期间,华为将发布荣耀智慧屏、升级版麒麟芯片等新产品技术!不知道的小伙伴就一起来看看吧。华为正式发布鸿蒙是怎么回事8月9日,华为消费者业务CEO余承东正式发布自有操作系统鸿蒙OS。余承东介绍称,鸿蒙是全世界第一个面向全场景微内核的分布式OS,但是考虑生态原因,华为优先支持谷歌安卓生态,如果安卓系统无法使用,华为随时..._鸿蒙什么时候微内核

CentOS 7 安装 gcc && gcc-c++_centos 安装gcc-c++-程序员宅基地

文章浏览阅读1.7k次。Centos 7默认安装的gcc版本为4.8,这里安装更高版本(7.3)#1. 安装centos-release-sclsudo yum install -y centos-release-scl#2. 安装devtoolset,sudo yum install -y devtoolset-7 #sudo yum install -y devtoolset-7-gcc*#3. 激活对应的devtoolset#scl enable devtoolset-7 bash #这条激活命令只对本次会_centos 安装gcc-c++

CTF-Web-JS-俄罗斯方块_ctf cube是啥 方块吗题目-程序员宅基地

文章浏览阅读1.8k次。Web-JS-俄罗斯方块标题JS,进去是俄罗斯方块查看源代码,发现js代码。在线优化格式,发现如下关键代码1000000分时,在cookie写入(“urlkey”,“webqwer”[1]+“100.js”,864E5),e100.js是提示文件浏览器加上xxxx/xxxx/xxxx/e.100.jsjsfuck解密即可得Flag..._ctf cube是啥 方块吗题目

随便推点

dom节点操作_console.log(parent.getelementbytagname("span"));-程序员宅基地

文章浏览阅读134次。获取节点元素的几种方法document.getElementById(""); // 通过元素选出Id选出document.getElementsByClassName(""); // 通过元素选出class选出document.getElementsByTagName(""); // 通过元素的标签名选出document.getElementsByName(""); // 通过元素的na..._console.log(parent.getelementbytagname("span"));

DFT小记_synchronous occ-程序员宅基地

文章浏览阅读2k次,点赞4次,收藏14次。记录DFT见闻_synchronous occ

win8计算机禁止休眠,win8系统设置禁止电脑休眠的教程方法-程序员宅基地

文章浏览阅读1.4k次。win8系统的休眠其实算的上是一种类似手机息屏待机模式吧,你关机的时候是什么样开机的时候就是什么样。完完全全还原最初的模样。但是对于绝大数人而言,休眠是没有毕业奥德,毕竟一般要么一直开着,要么关机。那么我们该如何关闭win8系统的休眠模式呢?这次小编为大家带来win8系统设置禁止电脑休眠的教程方法,希望对你们有所帮助一起来看看吧。禁止电脑休眠的方法:1、进入桌面后,右键点击“开始”按钮打开菜单,或..._禁止电脑睡眠

蓝桥杯第十届真题B组(2019年)-程序员宅基地

文章浏览阅读1.4k次。2019年第十届蓝桥杯大赛软件类省赛C/C++大学B组#试题 A:组队#本题总分:5分【问题描述】作为篮球队教练,你需要从以下名单中选出 1号位至 5号位各一名球员,组成球队的首发阵容。每位球员担任 1号位至 5号位时的评分如下表所示。请你计算首发阵容 1号位至5号位的评分之和最大可能是多少?此题需要注意的是:一个人可能在很多个位分数都是最高的,但..._蓝桥杯第十届b字串数字到lanqlao答案是多少 site:blog.csdn.net

DotProject中文乱码解决总结-程序员宅基地

文章浏览阅读2.5k次。DotProject中文乱码解决总结Andrew(zhuyi) DotProject是一个基于AMP(apache+mysql+php)的开源项目管理工具,DotProject可以支持多语言并采用模块化设计以便于扩展。最近需要一个项目管理软件,于是就下载DotProject进行了试用,感觉不错,但有中文有乱码问题,如:日历和gantt图。现就对解决DotProject乱码进行一下总结,由于本人以前没接触过PHP,初次修改有错的地方请大家指正。 机器

iphone抓包调试神器—Stream安装和使用_stream抓包软件-程序员宅基地

文章浏览阅读2.6w次,点赞3次,收藏20次。stream是一款免费轻量级移动端ios抓包调试工具,配置方便无需设置代理,集成了HTTP抓包、构建请求、Hosts 设置、常用工具、数据导出等功能。1、苹果手机appstore搜stream并下载2、进入抓包工具,允许配置VPN,下载CA证书3、设置-通用-描述文件,找到下载好的证书,安装成功4、设置-通用-关于手机-证书信任设置,开启信任5、点开始抓包,进入要抓包的app美团外卖,抓好包后 停止抓包6..._stream抓包软件