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,可以绘制折线图.饼状图.柱 ...
随机推荐
- 「快学springboot」SpringBoot多环境配置文件
前言 我们都知道springboot的配置卸载application.properties配置文件上(或者application.yml).但是,如果想要把不同的环境(如开发环境,测试环境,生产环境) ...
- idea没有import project解决办法
参考:https://blog.csdn.net/zengxiaosen/article/details/52807540
- bat批处理下如何像shell一样将命令执行的效果赋值给变量
在bat下如何实现像shell一样,把执行命令行后的结果赋值给变量呐? 刚开始,可真难为到我了.随着对bat批处理知识熟悉的加深. 学习到了!!! 举个 栗子: svnlook uuid C:\R ...
- NIKKEI Programming Contest 2019-2 D 部分分题解
请注意本文章所描写的算法只可以获得前 14 个测试点(含三个样例)的部分分,但是没有出现 WA 的情况. 题面 给出 \(m\) 个线段,每次可以从线段上任意一点以代价 \(c_i\) 走到线段上另一 ...
- 全球定位IP位置 2018(离线版)
球定位IP位置 2018(离线版) 这次写的软件使用Python写的,所以体积可能有点大 我特地写了GUI打包成了Exe可执行文件,方便小白使用== 只要输入目标ip就能显示目标所在的国家城市和经纬度 ...
- 【剑指Offer面试编程题】题目1371:最小的K个数--九度OJ
题目描述: 输入n个整数,找出其中最小的K个数.例如输入4,5,1,6,2,7,3,8这8个数字,则最小的4个数字是1,2,3,4,. 输入: 每个测试案例包括2行: 第一行为2个整数n,k(1< ...
- ROS学习笔记5-理解节点(Node)
本文内容来源于:http://wiki.ros.org/ROS/Tutorials/UnderstandingNodes 图(Graph)概念概览 节点(Nodes):一个节点是ROS下面一个可执行程 ...
- Linux centos7 日常运维——使用w查看系统负载、vmstat命令、top命令、sar命令、nload命令
一.使用w查看系统负载 w .uptime查看系统负载,0.00表示1分钟之内负载为0 cat /proc/cpuinfo查看cpu核数 二.vmstat命令,查看进程.cpu.memory.交换. ...
- Linux centosVMware yum更换国内仓库源、yum下载rpm包、源码包安装
一.yum更换国内仓库源 cd /etc/yum.repos.d/ rm -f dvd.repo wget http://mirrors.163.com/.help/CentOS7-Base-163. ...
- 使用Linux命令修改数据库密码
通过登录mysql系统,# mysql -uroot -pEnter password: [输入原来的密码]mysql>use mysql;mysql> update user set p ...