extjs开发———用extJS简单写一个饼状图
先上效果图:

js编写部分简单如下,先插入一个模块,然后给模块中添加内容。
var myChart1 = echarts.init(document.getElementById('myChart1'));
option = {
title: {
text: '会员通过率',
x: 'center',
},
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
series: [
{
name: '',
type: 'pie',
radius: '55%',
center: ['50%', '60%'], //饼状图的分块比例
data: [
{
value: 525, //饼状图的右边所占比例
name: '已通过',
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(230,235,235,0.5)'
},
normal: { color: '#32d925' }
}
},
{
value: 475, //左边所占比例数
name: '已通过',
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(230,235,235,0.5)'
},
normal: { color: '#c5ac22' }
}
},
],
}
]
};
myChart1.setOption(option);
备注:需要固定样式可以放在你自己的某个DIV之中,样式引用参照上一篇的柱状图的JS和CSS
extjs开发———用extJS简单写一个饼状图的更多相关文章
- JavaScript+svg绘制的一个饼状图
结果: svg参考:https://www.w3.org/TR/SVG/<body onload='document.body.appendChild( pieChart([12,23,34,4 ...
- canvas制作柱形图/折线图/饼状图,Konva写动态饼状图
制作饼状图 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...
- BIP_开发案例08_BI Publisher图表示例 饼状图/直方图/折线图(案例)
2014-12-25 Created By BaoXinjian
- echarts入门基础,画一个饼状图
注意:一定要自己引入echarts库 <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...
- D3.js系列——布局:饼状图和力导向图
一.饼状图 在布局的应用中,最简单的就是饼状图. 1.数据 有如下数据,需要可视化: , , , , ]; 这样的值是不能直接绘图的.例如绘制饼状图的一个部分,需要知道一段弧的起始角度和终止角度,这些 ...
- canvas学习之饼状图
接着上一节说,这次我使用canvas绘制了饼状图,主要是SectorGraph.js, 引入 import {canvasPoint} from '../../assets/js/canvas';im ...
- Android 自定义饼状图
github 地址:https://github.com/dkest/PieView 简单分析 其实根据我们上面的知识已经能自己制作一个饼状图了.不过制作东西最重要的不是制作结果,而是制作思路. 相信 ...
- D3.js的v5版本入门教程(第十三章)—— 饼状图
D3.js的v5版本入门教程(第十三章) 这一章我们来绘制一个简单的饼状图,我们只绘制构成饼状图基本的元素——扇形.文字,从这一章开始,内容可能有点难理解,因为每一章都会引入比较多的难理解知识点,在这 ...
- DevExpress使用之ChartControl控件绘制图表(多坐标折线图、柱状图、饼状图)
最近因为公司项目需要用到WinForm的DecExpress控件,在这里把一些使用方法总结一下. DevExpress中有一个专门用来绘制图表的插件ChartControl,可以绘制折线图.饼状图.柱 ...
随机推荐
- Java基础知识笔记第八章:常用的实体类
String类 String类位于lang包下 java会默认导入lang包下的类,所以可以直接使用,注意String是final类所以不能有子类 构造String对象: 常量对象:String常量也 ...
- C# 读取和写入txt文件
读取: 1.使用StreamReader读取文件,然后一行一行的输出 StreamReader sr = new StreamReader(path,Encoding.Default); String ...
- Eclipse创建一个普通的java web项目
1.右键new ,选web project ,下一步 2.为项目命名,然后finish 3.然后将jar包复制到lib目录下, 4.就会自动将jar包编译到web app Libraries,项目创建 ...
- linux 部署java 项目命令
1:服务器部署路径:/home/tomcat/tomcat/webapps (用FTP工具链接服务器把包上传到此目录) 2:进入项目文件夹 cd /home/tomcat/tomcat/webapp ...
- mysql 命令行个性化设置
通过配置显示主机和用户名 mysql -u root -p --prompt="(\u@\h) [\d]>" 或在配置文件中修改,可在命令行中的目标位置查看 --tee na ...
- Codeforces1303E. Erase Subsequences
转换一下题意,就相当于问t能不能和s中2个不相同的子串相同,我们可以将t串拆成2个子串t1,t2,得到状态dp[i][j][k]=0/1,表示s判断到i位,t1判断到j位,t2判断到k位,0/1表示是 ...
- Hive的存储和MapReduce处理——数据清洗
日期:2019.11.13 博客期:115 星期三 Result文件数据说明: Ip:106.39.41.166,(城市) Date:10/Nov/2016:00:01:02 +0800,(日期) D ...
- 十 用栈解决LeetCode20题括号的匹配
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAiIAAACWCAYAAADjcONgAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjw
- classmethode,staticmethode
目录 classmethod: staticmethod: 一般来说,要使用某个类的方法,需要先实例化一个对象再调用方法 而使用@staticmethod或@classmethod,就可以不需要实例化 ...
- WebGL绘制正方体
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...