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,可以绘制折线图.饼状图.柱 ...
随机推荐
- 计算机基础 - 时间戳(timestamp)位数
分为10位数字(ten digit)和13位(thirteen digit)数字 1. Unix, Python为10 time +%s import time time.time() 2. Java ...
- 操作系统OS,Python - 生产者消费者模型
1. 缓冲区(此处用阻塞队列充当),解决消费者和生产者强耦合问题.(生产者和消费者不直接通信) 2. 通过平衡生产者线程和消费者线程,来提高程序整体处理数据速度. 3. 在并发编程中该模式能解决大多数 ...
- 不高兴的津津(0)<P2004_1>
不高兴的津津(unhappy.pas/c/cpp) [问题描述] 津津上初中了.妈妈认为津津应该更加用功学习,所以津津除了上学之外,还要参加妈妈为她报名的各科复习班.另外每周妈妈还会送她去学习朗诵. ...
- javascript中slipt()分割
slipt()分割取长度 例子1: n变量其实只有两个1,结果分割成数组有3个,所以结果页取1长度的话要减去1 l 异步请求data数据输出是html,当要获取数据长度的时候, 用解析html获取长度 ...
- iOS项目开发日常之创建文件(协议、类、分类、扩展)
iOS项目开发过程中,是以不断创建文件的形式进行着的. 创建得比较频繁的文件类型是: 这两个类型中创建的文件有:子类.分类.扩展.协议四种文件,如下: 这四类文件是频繁创建的,我们来看一下各自分 ...
- UIAutomation 测试winForm
static void Main(string[] args) { Console.WriteLine("\n开始窗口程序自动化测试\n"); //启动被测试程序 string p ...
- [Qt5] 使用Qt设计器绘制主窗口
实践代码: git clone https://github.com/dilexliu/learn_qt5.git Step1: Qt设计器绘制窗口 保存会得到一个文件: mainwindow.ui ...
- Java连载80-数字类格式、随机数、BigDecimal
一.数字类 1.关于数字格式化:java.text.DecimalFormat; 2.数字格式元素: # 任意数字 , 千分位 . 小数点 0 不够补零 package com.bjpowernode ...
- idea2019 3.3最新版本破解安装教程
直接给上神秘地址得了:(应该都可以破解) https://www.jianshu.com/p/c7bdc5819d31
- 洛谷 P6046 [CTSC2000]快乐的蜜月
先讲解一下如何处理这道题的毒瘤输入.\(m\) 和 \(d\) 之间的"/"和" TO "都可以用 getchar() 强行吃掉,日期的转换可以用公式 \(s_ ...