先上效果图:



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简单写一个饼状图的更多相关文章

  1. JavaScript+svg绘制的一个饼状图

    结果: svg参考:https://www.w3.org/TR/SVG/<body onload='document.body.appendChild( pieChart([12,23,34,4 ...

  2. canvas制作柱形图/折线图/饼状图,Konva写动态饼状图

    制作饼状图 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

  3. BIP_开发案例08_BI Publisher图表示例 饼状图/直方图/折线图(案例)

    2014-12-25 Created By BaoXinjian

  4. echarts入门基础,画一个饼状图

    注意:一定要自己引入echarts库 <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...

  5. D3.js系列——布局:饼状图和力导向图

    一.饼状图 在布局的应用中,最简单的就是饼状图. 1.数据 有如下数据,需要可视化: , , , , ]; 这样的值是不能直接绘图的.例如绘制饼状图的一个部分,需要知道一段弧的起始角度和终止角度,这些 ...

  6. canvas学习之饼状图

    接着上一节说,这次我使用canvas绘制了饼状图,主要是SectorGraph.js, 引入 import {canvasPoint} from '../../assets/js/canvas';im ...

  7. Android 自定义饼状图

    github 地址:https://github.com/dkest/PieView 简单分析 其实根据我们上面的知识已经能自己制作一个饼状图了.不过制作东西最重要的不是制作结果,而是制作思路. 相信 ...

  8. D3.js的v5版本入门教程(第十三章)—— 饼状图

    D3.js的v5版本入门教程(第十三章) 这一章我们来绘制一个简单的饼状图,我们只绘制构成饼状图基本的元素——扇形.文字,从这一章开始,内容可能有点难理解,因为每一章都会引入比较多的难理解知识点,在这 ...

  9. DevExpress使用之ChartControl控件绘制图表(多坐标折线图、柱状图、饼状图)

    最近因为公司项目需要用到WinForm的DecExpress控件,在这里把一些使用方法总结一下. DevExpress中有一个专门用来绘制图表的插件ChartControl,可以绘制折线图.饼状图.柱 ...

随机推荐

  1. 多项式输出 (0)<P2009_1>

    多项式输出 (poly.pas/c/cpp) [问题描述] 一元n次多项式可用如下的表达式表示: 其中,称为i次项,ai称为i次项的系数.给出一个一元多项式各项的次数和系数,请按照如下规定的格式要求输 ...

  2. 时间选择器UIDatePicker的使用

    UIDatePicker的介绍 UIDatePicker这个类的对象让用户可以在多个车轮上选择日期和时间.iPhone手机上的‘时钟’应用程序中的时间与闹铃中便使用了该控件.使用这个控件时,如果你能配 ...

  3. 笔记-redis-订阅系统

    笔记-redis-订阅系统 1.      发布/订阅pub/sub 1.1.  基本命令 PUBLISH channel message #将信息发送到指定的频道. SUBSCRIBE channe ...

  4. Ngnix调整

    1.隐藏版本号,防止针对版本攻击   http {    server_tokens off;2.增加并发连接   2.1 worker_processes :改为CPU核数一致,因为异步IO进程是单 ...

  5. asp.net core配置下载文件

    asp.net core的wwwroot文件夹下默认时保存静态文件的地方,外面可以直接访问,但是如果是一些无法识别的后缀文件,如(.apk),会报错404 如果想要实现下载这些文件,在配置静态文件中间 ...

  6. HDU 5565:Clarke and baton

    Clarke and baton  Accepts: 14  Submissions: 79  Time Limit: 12000/6000 MS (Java/Others)  Memory Limi ...

  7. XModem与YModem

    XModem用在串口异步传文件: #define SOH 0x01 #define STX 0x02 #define EOT 0x04 #define ACK 0x06 #define NAK 0x1 ...

  8. Linux CentOS7 VMware 安装PHP5 、安装PHP7

    一.安装PHP5 PHP官网www.php.net 当前主流版本为5.6/7.1 cd /usr/local/src/ wget http://cn2.php.net/distributions/ph ...

  9. Webshell免杀研究

    前言 不想当将军的士兵不是好士兵,不想getshell的Hacker不是好Hacker~有时候我们在做攻防对抗时经常会碰到可以上传webshell的地方,但是经常会被安全狗.D盾.护卫神.云锁等安全软 ...

  10. mysql如何查看表的索引以及如何删除表的索引

    mysql中如何查看和删除唯一索引. 查看唯一索引: show index from mytable;//mytable 是表名 查询结果如下: 查询到唯一索引后,如何删除唯一索引呢,使用如下命令: ...