饼状图&柱状图

最新推荐文章于 2022-03-07 00:02:43 发布
最新推荐文章于 2022-03-07 00:02:43 发布
阅读量425 收藏
点赞数
文章标签： 移动开发 javascript ViewUI
原文链接：http://www.cnblogs.com/77yaer/p/10078535.html
版权

queryReportGraphics.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script type="text/javascript" src="jquery-2.1.4.js"></script>
    <script type="text/javascript" src="reportGraphics.js"></script>
    <script type="text/javascript" src="echarts.common.min.js"></script>
    <script type="text/javascript" src="echarts.js"></script>
    <script type="text/javascript" src="echarts.min.js"></script>
    <script type="text/javascript" src="queryReportGraphicsl.js"></script>
    <title>queryReportGraphics</title>
</head>
<body>
    <div class="row">
	<div class="box col-md-12">
		<div class="box-inner">
			<div class="box-content">
			  	<div class="charts-content">
                      <!-- 1.饼图 -->
			        <div class="map-area">
		         		<div class="charts-item-task"> 
		         			<div id="regularClass-piechart"></div>
                        </div>
                       
			            <div class="error-content">
			            	<div id="regularSubClass-piechart"></div>
			            </div> 
			        </div>
			        <div class="charts-btm">
                      
			            <div class="charts-item-large">
			                <div id="productName-piechart"></div>
                        </div>
                      
			            <div class="charts-item1">
			                <div id="error-chart"></div> 
			            </div>
                    </div>
                    <!-- 2.柱形图 -->
                    <div class="map-area">
		         		<div class="charts-item-task"> 
		         			<div id="regularProblem-barchart"></div>
                        </div>
                       
			            <div class="error-content">
			            	<div id="regularDistort-barchart"></div>
			            </div> 
			        </div>
			        <div class="charts-btm">
                    
			            <div class="charts-item-large">
			                <div id="productProblem-barchart"></div>
                        </div>
                      
			            <div class="charts-item">
			                <div id="productDistort-barchart"></div> 
			            </div>
                    </div>
			    </div>
			</div>
		</div>
	</div>
</body>
<style>
	.row,.box-inner{
		/* min-width:1140px; */
		overflow:auto;
	}
    .charts-content {
       width: 100%;
       min-width:1100px;
       overflow: hidden; 
    }

    #world-map {
        width: 1100px;
        min-width:800px;
        height: 400px;
        margin-left: -50px; 
        cursor: default; 
    }

    #productDistort-barchart {
        width: 500px;
        /* min-width:180px; */ 
        height: 250px;
        z-index:100;
    }
    
    .invisible-bolck{
    	width:10%;
    	height:100%;
    	min-width:100px;
    	opacity:0;
    }

    .error-content{
    	display: flex;
        display: -webkit-flex;
    	/* width: 25%; */
    	width:48%;
    	height: 270px;
    	border: 1px solid #2fa4e7;
    	/* position:absolute; */
    	background-color: #fff;
    	align-items:center;
    	justify-content: center;
    	right:1%;
    	border-radius: 6px;
    	overflow-x: hidden; 
    	/* box-shadow: -2px -2px 5px #2fa4e7; */
    }
    
    .task-content{
    	display: flex;
        display: -webkit-flex;
    	position:absolute;
    	left:10px;
    	/* width: 25%; */
    	width:270px;
    	background-color: #fff;
    	height: 80%;
    	border: 1px solid #2fa4e7;
    	border-radius: 6px;
    	overflow-x: hidden; 
    	align-items:center;
    	justify-content: center;
    	/* box-shadow: -2px -2px 5px #2fa4e7; */
    }
    
    #regularClass-piechart{
    	width: 500px;
        height: 250px; 
        z-index:100;
    }
    #regularProblem-barchart{
    	width: 500px;
        height: 250px; 
        z-index:100;
    }
    .charts-btm {
        width: 100%;
        display: flex;
        display: -webkit-flex;
        justify-content: space-around; 
        margin-bottom: 10px;
    }

    .map-area {
        position: relative;
        display: flex;
        align-items: center;
        /* height: 350px; */
        margin-bottom: 20px;
        margin-top: 10px; 
        width: 100%;
        /* min-width:1000px; */
        justify-content: space-around;
    }

    #agent-chart,
    #productName-piechart {
        width: 500px; 
        /* max-width:100%; */
        height: 250px;
    }
    #productProblem-barchart {
    width: 500px; 
    /* max-width:100%; */
    height: 250px;
    }

    #regularSubClass-piechart{
    width: 500px;
    /* max-width:100%; */
    height: 250px;
    }
    
    #regularDistort-barchart{
    	width: 500px;
        /* max-width:100%; */
        height: 250px;
    }
    .charts-item1 {
    	display:flex;
    	display:-webkit-flex;
        justify-content: center;
        align-items: center;
        width: 48%;
        min-width:320px;
        height: 270px;
        border: 1px solid hsl(210, 100%, 99%);
        border-radius: 6px;
        overflow-x: hidden;
        /* box-shadow: -2px -2px 5px #2fa4e7; */
    }
    .charts-item {
    	display:flex;
    	display:-webkit-flex;
        justify-content: center;
        align-items: center;
        width: 48%;
        min-width:320px;
        height: 270px;
        border: 1px solid #2fa4e7;
        border-radius: 6px;
        overflow-x: hidden;
        /* box-shadow: -2px -2px 5px #2fa4e7; */
    }
    
      .charts-item-large {
    	display:flex;
    	display:-webkit-flex;
        justify-content: center;
        align-items: center;
        width: 48%;
        min-width:450px;
        height: 270px;
        border: 1px solid #2fa4e7;
        border-radius: 6px;
        overflow: hidden; 
        /* box-shadow: -2px -2px 5px #2fa4e7; */ 
    }
    
   .charts-item-task{
   		display:flex;
    	display:-webkit-flex;
        justify-content: center;
        align-items: center;
        width: 48%;
        min-width:450px;
        height: 270px; 
        border: 1px solid #2fa4e7;
        border-radius: 6px;
        overflow: hidden; 
        /* box-shadow: -2px -2px 5px #2fa4e7; */
   }
    
</style>
</html>

　　queryReportGraphicsl.js

$(function () {
    //饼图-声明变量
    var pieRegularClass = {
      "ruleType": {
        "types": {
          "WEB_LDAP": 0,
          "文件操作": 0,
          "WEB_XSS": 0,
          "Cherry.zip": 0,
          "WEB_SQL": 0,
          "Orange.zip": 2,
          "存储和传输": 0,
          "Android": 0,
          "密码算法": 0,
          "WEB_XXE": 0,
          "认证鉴权": 0,
          "WEB_CRLF": 0,
          "信息泄露": 6,
          "WEB_代码注入": 0,
          "密码算法:Android": 0,
          "WEB_代码注入:Android": 0,
          "Mango.zip": 239
        },
        "ruleTypeTotal": 27530,
        "ruleTypeDistortTotal": 135,
        "ruleTypeTagTotal": 247
      },
      "ruleName": {
        "ruleNameTypeDistortTotal": 135,
        "types": {
          "FIND_XXE": 0,
          "FIND_MD5": 0,
          "FIND_HTML_PASSWORD": 0,
          "Cherry.zip": 0,
          "Orange.zip": 2,
          "FIND_MODE_WORLD": 0,
          "FIND_GEOLOCATIONENABLED": 0,
          "FIND_JSP_EVAL": 0,
          "FIND_WebView_Html": 0,
          "FIND_SHA1": 0,
          "FIND_UNLINK": 0,
          "FIND_LDAP": 0,
          "FIND_CANONICALPATH": 0,
          "FIND_SSL": 0,
          "FIND_SHELL_system": 0,
          "Mango.zip": 22,
          "FIND_HTML_AUTOCOMPLETE": 0,
          "FIND_PASSWORD": 6,
          "FIND_INTENT_ACTIVITY": 0,
          "FIND_SHELL": 0,
          "FIND_RSA_KeyFactory": 0,
          "FIND_NEXTENTRY": 0,
          "FIND_HmacSHA_KeyFactory": 0,
          "FIND_XXE_SAXParser": 0,
          "FIND_CLIPBOAR": 0,
          "FIND_RSA": 0,
          "FIND_HTTP_HEADER": 0,
          "FIND_SETRESULT": 0,
          "其他": 217,
          "FIND_MYBATIS": 0,
          "FIND_AESECB": 0,
          "FIND_RANDOM": 0,
          "FIND_HmacSHA": 0,
          "FIND_OS_INJECT": 0,
          "FIND_CIPHERSUITES": 0,
          "FIND_PROTOCOLS": 0,
          "FIND_AES_128": 0,
          "FIND_OPENFILEOUTPUT": 0,
          "FIND_CLASSLOADER": 0,
          "FIND_PREFERENCES": 0
        },
        "ruleNameTypeTagTotal": 247,
        "ruleNameTypeTotal": 27530
      },
      "productName": {
		"productNameTotal": 27530,
		"distortTypes":{
            "社交":9,
            "游戏中心":37,
            "Hicloud云服务":0,
            "华为帐号":0,
            "应用市场":0,
            "HMS":99
        },
        "types": {
          "社交": 8,
          "游戏中心": 39,
          "华为帐号": 0,
          "应用市场": 2,
          "HMS": 198
        },
        "productNameTagTotal": 247,
        "productNameDistortTotal": 135
      }
    }
	// console.log(pieRegularClass)
	// console.log(pieRegularClass.ruleType)
	// console.log(pieRegularClass.ruleName)
	// console.log(pieRegularClass.productName)
    
    // 大类声明
    textpie1 = '大类';
    var data1 = [];
    // 小类声明	
    textpie2 = '小类';
    var data2 = [];
    //产品声明
    textpie3 = '产品'
	var data3 = [];
	
	var ruleTypeObj = pieRegularClass.ruleType.types;
    for (var key in ruleTypeObj) {
		if(ruleTypeObj[key]!==0){
			data1.push({value:ruleTypeObj[key],name:key})
		}	
	}
	var ruleNameObj=pieRegularClass.ruleName.types;
	for(var key in ruleNameObj){
		if(ruleNameObj[key]!==0){
			data2.push({value:ruleNameObj[key],name:key})
		}
	}  
	var productNameObj=pieRegularClass.productName.types;
	for(var key in productNameObj){
		if(productNameObj[key]!==0){
			data3.push({value:productNameObj[key],name:key})
		}
	}
    //饼状图-模板		
    function fun_echarts_PIE(echartsPieCnt, pieName, datas) {
      echartsPieCnt.setOption({
        title: {
          text: pieName, //名字
          subtext: '',
           left: 10
        },
        tooltip: {
          trigger: 'item',
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
          orient: 'vertical',
          left: 'left',
        },
        series: [{
          type: 'pie',
          radius: '55%',
          center: ['50%', '60%'],
          data: datas, //数据
          itemStyle: {
            emphasis: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            },
            normal: {
              color: function (params) {
                var colorList = ['#4F6D9F', '#0cA98C', '#F8B131', '#EB5345', '#635CA0', '#4275AA',
                  '#4F6D9F', '#0cA98C', '#F8B131', '#EB5345', '#635CA0', '#4275AA'
                ];
                return colorList[params.dataIndex];
              }
            }
          }
        }]
      });
    };

    // 饼图-初始化图表标签
    var myChart1 = echarts.init(document.getElementById('regularClass-piechart'));
    fun_echarts_PIE(myChart1, textpie1, data1);

    var myChart2 = echarts.init(document.getElementById('regularSubClass-piechart'));
    fun_echarts_PIE(myChart2, textpie2, data2);

    var myChart3 = echarts.init(document.getElementById('productName-piechart'));
    fun_echarts_PIE(myChart3, textpie3, data3);

	//柱状图-声明变量
    textbar1 = '大类'
    var data_Type1 = [],
      	data_Qty1 = [],
     	textbar2 = '小类'
    var data_Type2 = [],
     	data_Qty2 = []
    textbar3 = '产品（有效问题数图）'
    var data_Type3 = [],
      	data_Qty3 = []
    textbar4 = '产品（误报率图）'
    var data_Type4 = [],
	  	data_Qty4 = []
	var ruleTypeObjBar = pieRegularClass.ruleType.types;
	for( var key in ruleTypeObjBar){
		if(ruleTypeObjBar[key]!==0){
			data_Type1.push(key);
			data_Qty1.push(ruleTypeObjBar[key]);
		}
	};
	var ruleNameObjBar=pieRegularClass.ruleName.types;
	for(var key in ruleNameObjBar){
		if(ruleNameObjBar[key]!==0){
			data_Type2.push(key);
			data_Qty2.push(ruleNameObjBar[key]);
		}
	}
	var productNameObjBar=pieRegularClass.productName.types;
	for(var key in productNameObjBar){
		if(productNameObjBar[key]!==0){
			data_Type3.push(key);
			data_Qty3.push(productNameObjBar[key]);
		}
	}
	var productNameObjBar=pieRegularClass.productName.distortTypes;
	for(var key in productNameObjBar){
		if(productNameObjBar[key]!==0){
			data_Type4.push(key);
			data_Qty4.push(productNameObjBar[key]);
		}
	}

// 	console.log(data_Qty1);
// console.log(data_Type1);
  //console.log(pieRegularClass.ruleType.types)
    //柱状图-模板
    function fun_echarts_BAR(echartsBarCnt, barName, data_Types, data_Qtys) {
      echartsBarCnt.setOption({
        title: {
          text: barName,
          x: 'center'
        },
        color: ['#3398DB'],
        tooltip: {
          trigger: 'axis',
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [{
          type: 'category',
          data: data_Types, // ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
          axisTick: {
            alignWithLabel: true
          }
        }],
        yAxis: [{
          type: 'value'
        }],
        series: [{
          name: '直接访问',
		  type: 'bar',
		  center: ['45%', '45%'],
          barWidth: '18%',
          data: data_Qtys, //[10, 52, 200, 334, 390, 330, 220],
          itemStyle: {
            normal: {
              color: function (params) {
                var colorList = ['#4F6D9F', '#0cA98C', '#F8B131', '#EB5345', '#635CA0', '#4275AA',
                  '#4F6D9F', '#0cA98C', '#F8B131', '#EB5345', '#635CA0', '#4275AA'
                ];
                return colorList[params.dataIndex];
              }
            }
          }
        }]
      });
    }
    //柱状图-初始化图表标签
    var myBarChart1 = echarts.init(document.getElementById('regularProblem-barchart'));
    fun_echarts_BAR(myBarChart1,  textbar1, data_Type1, data_Qty1);

    var myBarChart2 = echarts.init(document.getElementById('regularDistort-barchart'));
    fun_echarts_BAR(myBarChart2,  textbar2, data_Type2, data_Qty2)

    var myBarChart3 = echarts.init(document.getElementById('productProblem-barchart'));
    fun_echarts_BAR(myBarChart3,  textbar3, data_Type3, data_Qty3);

    var myBarChart4 = echarts.init(document.getElementById('productDistort-barchart'));
    fun_echarts_BAR(myBarChart4,  textbar4, data_Type4, data_Qty4)
  });

　　

转载于:https://www.cnblogs.com/77yaer/p/10078535.html

weixin_30883271
关注
matplotlib 饼图+ 柱状图的绘制(官方案例)
酱橙的博客
06-03 1008
import matplotlib.pyplot as plt from matplotlib.patches import ConnectionPatch import numpy as np # 创建 figure 图片, 然后分配子视图 # make figure and assign axis objects fig = plt.figure(figsize=(9, 5)) ax1 = fig.add_subplot(121) ax2 = fig.add_subplot(122) fig.subp
饼状图
lu_pan_feng的博客
06-01 475
项目中有一个统计信息的饼状图: 看到这种图首先想到了MPAndroidChart开源图库. 具体参考 http://blog.csdn.net/shineflowers/article/details/44701645 http://www.tuicool.com/articles/NviA3iU 但是导入的jar包是几百KB,具体记不大清楚了. 又
饼状图与柱状图的使用
gggg5643的专栏
08-23 587
1.添加一个最简单的柱状图 ? http://ns.adobe.com/mxml/2009"                 xmlns:s="library://ns.adobe.com/flex/spark"                 xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHe
Echarts 饼状图与柱状图数据关联
文龙刚的博客
03-07 1127
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>柱状.
qcustomplot 绘制 饼状图和 柱状图
01-08
在本文中，我们将深入探讨如何使用QCustomPlot库在Qt环境中绘制饼状图和柱状图。QCustomPlot是一个强大的2D绘图库，它提供了丰富的功能，允许开发者自定义图表，以满足各种数据可视化需求。 首先，让我们了解饼状图...
C# 漂亮图表源码(饼状图、柱状图、曲线。。。)
03-29
"C# 漂亮图表源码(饼状图、柱状图、曲线...)" 是一个专为VS2017设计的Windows窗体应用程序，它提供了一系列预设的图形模板，包括饼状图、柱状图和曲线图，帮助开发者轻松实现数据的可视化。 **饼状图**是一种常见的...
基于Swift版的Charts框架，实现OC版的饼状图和柱状图
最新发布
07-11
【作品名称】：基于Swift版的Charts框架，实现OC版的饼状图和柱状图 【适用人群】：适用于希望学习不同技术领域的小白或进阶学习者。可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。 【项目介绍】： ...
DrawGraph_MFC绘制曲线图、饼状图、柱状图_源码
10-02
在本文中，我们将深入探讨如何使用Microsoft Foundation Class (MFC) 库来绘制曲线图、饼状图和柱状图。MFC 是一个C++类库，它为Windows应用程序开发提供了一种方便的方式，尤其在图形用户界面(GUI)的创建上。 首先...
Android应用源码之饼状图和柱状图.zip
12-17
"Android应用源码之饼状图和柱状图.zip"这个压缩包提供了关于如何在Android平台上实现饼状图和柱状图的示例源码，这对于开发者来说是一个宝贵的资源。下面将详细解释这两种图表的实现原理以及在Android中的应用。 ...
js饼状图+柱状图+曲线图
08-31
js饼状图+柱状图+曲线图
饼图柱状图结合的特色PPT素材.pptx
09-25
饼图柱状图结合的特色PPT素材.pptx,我们见惯了柱状图PPT素材，也见惯了饼图PPT素材，今天pptfans分享给大家的如此个性特别的模板，赶快收藏吧！下次你的 PPT就是最有特色，最吸引眼球的了！
jquery柱状图饼状图曲线图统计图表插件.rar
11-07
之前用过好多统计图表的插件，这个最好用，轻量级，功能强大jquery柱状图饼状图曲线图统计图表插件.rar
柱状图及饼状图demo
11-24
不知道为什么默认需要积分，只想分享一下的，需要的留个言就好
HTML中的3D饼状图
06-20
虽说echarts已经提供了比较全面的图表，但是涉及到的类库很多，资源很多。一不小心就容易弄错。这款饼状图插件很轻量，适合做个性化裁剪。
matplotlib画图（一）---柱状图和饼状图
suwuzs的博客
06-10 976
python数据处理 前言 pyplot 简介 matplotlib.pyplot是使 matplotlib 像 MATLAB 一样工作的函数集合。每个pyplot函数都会对图形进行一些更改：例如，创建图形、在图形中创建绘图区域、在绘图区域中绘制一些线条、用标签装饰绘图等。 在matplotlib.pyplot函数调用中保留各种状态，以便跟踪当前图形和绘图区域等内容，并且绘图函数指向当前轴（请注意此处和文档中的大多数地方的“轴”是指到图形的轴 部分， 而不是用于多个轴的严格数学术语）。 利用python，把
绘制饼状图
qq_42678086的博客
06-20 375
目录饼图组件titletooltipvisualmapseries南丁格尔图文本标签itemstylepopup动画 饼图 直观反映给用户各股票板块在市场中所占比例，帮助用户了解市场。 组件 title 定义饼图标题，位置，距离容器顶部的高度，以及颜色 tooltip 本次trigger采用item属性区别于K线图，并采用字符串模板反应提示框内容 visualmap 视觉映射组件，就是将数据映射到视觉元素，将不同的数据板块采用不同的颜色区分，如果不增加该组件各个数据板块之间只有线条隔离，使用户分析图表更
iReport 3.7.3入门教程：饼状图与柱状图实战
iReport是一款用于创建JasperReport报表的开源设计工具，主要支持饼状图和柱状图等可视化元素。本文档将引导读者逐步了解和掌握iReport的使用，包括其基本概念、安装过程、报表设计以及在Web工程中的配置和导出。 #...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值