先上效果图:



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. Python3.5学习之旅——day5

    模块初识 一.定义 在python中,模块是用来实现某一特定功能的代码集合.其本质上就是以‘.py’结尾的python文件.例如某文件名为test.py,则模块名为test. 二.导入方法 我们在这一 ...

  2. 教育片- Economics by Crash Course(共35集)(未完结)

    第一集Intro to Economics: Crash Course Econ #1 传送门:https://www.youtube.com/watch?v=3ez10ADR_gM&list ...

  3. Lesson 14 The Butterfly Effect

    Why do small errors make it impossible to predict the weather system with a high degree of accuracy? ...

  4. Eclipse上将maven项目部署到tomcat,本地tomcat下,webapps下,web-inf下lib下没有jar包决绝方案

    右键项目选择properties  ,选择Deployment Assembly  , 右边点击Add 然后选择  Java Build Path Entries ,,,next  ,  选择Mave ...

  5. linux中cp指令前面加反斜杠

    在cp指令前面加反斜杠可以不弹出是否覆盖的询问而直接覆盖! 如:cp /app/WEB-INF/com/cfg.properties /app_bak/WEB-INF/com/cfg.properti ...

  6. 2020牛客寒假算法基础集训营4 J 二维跑步

    https://ac.nowcoder.com/acm/contest/view-submission?submissionId=43035417 假设有i步选择不动,就有n-i步移动 假设其中又有a ...

  7. SpringBoot图文教程3—「‘初恋’情结」集成Jsp

    有天上飞的概念,就要有落地的实现 概念+代码实现是本文的特点,教程将涵盖完整的图文教程,代码案例 文章结尾配套自测面试题,学完技术自我测试更扎实 概念十遍不如代码一遍,朋友,希望你把文中所有的代码案例 ...

  8. js加密(十)csti.cn md5

    1. http://www.csti.cn/index.htm 2. 登录密码加密 3. 加密js: var hexcase = 0; var b64pad = ""; var c ...

  9. .NET List<T>Conat vs AddRange

    最大的不同在于AddRange改变了它所调用的列表,而Concat创建了一个新的List.因此它们有不同的用途. Concat也是一种适用于任何IEnumerable的扩展方法,并返回一个IEnume ...

  10. iOS收起键盘

    在UIViewController中收起键盘,有四种代码方式: 1.让相应的控件放弃第一响应者 /** 放弃第一响应者 */ [self.nameTextField resignFirstRespon ...