echarts-的一些常规图形显示一

最新推荐文章于 2024-07-20 10:10:38 发布
最新推荐文章于 2024-07-20 10:10:38 发布
阅读量1k 收藏
点赞数
分类专栏： 第三方-echarts
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dongsdh/article/details/81736911
版权

前言：echarts的一些常规图形显示

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8" />
	<title>Document</title>
	<style type="text/css">
		html{
			background: #182047;
		}
		.echart{
			display: inline-block;
			margin-left: 10px;
			background: url(15.png)no-repeat;
			background-size: 100% 100%;
			position: relative;
			vertical-align: top;
		}
		.echart span{position: absolute;
		    width: 100%;
		    text-align: center;
		    top: 6px;
		    letter-spacing: 2px;
		    font-size: 20px;
		    color: #fff;
		}
		.echart .borderss{
			position: absolute;
		    height: 20px;
		    width: 20px;
		}
		.echart .borderss1,.echart .borderss2{
			top: 16px;
		}
		.echart .borderss1{
		    left: 0;
		    border-left: 2px solid #00C1DE;
		    border-top: 2px solid #00C1DE;
		}
		.echart .borderss2{
			right: 0;
			border-right: 2px solid #00C1DE;
		    border-top: 2px solid #00C1DE;
		}
		.echart .borderss3{
			left:0;
			bottom: 0;
			border-left: 2px solid #00C1DE;
		    border-bottom: 2px solid #00C1DE;
		}
		.echart .borderss4{
			right:0;
			bottom: 0;
			border-right: 2px solid #00C1DE;
		    border-bottom: 2px solid #00C1DE;
		}
		.chartsbox{
			height: 314px;
    		width: 650px;
		}
		.chartsboxcon{
			height: 80%;
    		margin-top: 54px;
		}
	</style>
</head>
<body>
	<header>
		<div class="echart">
			<span>平台访问历史</span>
		    <div class="chartsbox">
		    	<div id="histry" class="chartsboxcon"></div>
		    </div>
		    <b class="borderss borderss1"></b><b class="borderss borderss2"></b><b class="borderss borderss3"></b><b class="borderss borderss4"></b>
		</div>
		<div class="echart">
			<span>数据更新统计</span>
		    <div class="chartsbox">
		    	<div id="dataagion" class="chartsboxcon"></div>
		    </div>
		    <b class="borderss borderss1"></b><b class="borderss borderss2"></b><b class="borderss borderss3"></b><b class="borderss borderss4"></b>
		</div>
		<div class="echart">
			<span>资源格式比例</span>
		    <div class="chartsbox">
		    	<div id="zygsbl" class="chartsboxcon"></div>
		    </div>
		    <b class="borderss borderss1"></b><b class="borderss borderss2"></b><b class="borderss borderss3"></b><b class="borderss borderss4"></b>
		</div>
		<div class="echart" style="width: 1200px;">
			<span>数据开放统计</span>
			<div class="chartsbox">
		    	<div id="sjkftj" class="chartsboxcon"></div>
		    </div>
		    <b class="borderss borderss1"></b><b class="borderss borderss2"></b><b class="borderss borderss3"></b><b class="borderss borderss4"></b>
		</div>
		<div class="echart">
			<span>数据下载TOP10</span>
			<div class="chartsbox">
		    	<div id="datadownload" class="chartsboxcon"></div>
		    </div>
		    <b class="borderss borderss1"></b><b class="borderss borderss2"></b><b class="borderss borderss3"></b><b class="borderss borderss4"></b>
		</div>
		<div class="echart">
			<span>API下载TOP10</span>
			<div class="chartsbox">
		    	<div id="apidownload" class="chartsboxcon"></div>
		    </div>
		    <b class="borderss borderss1"></b><b class="borderss borderss2"></b><b class="borderss borderss3"></b><b class="borderss borderss4"></b>
		</div>
	</header>
	<script src="jquery.min.js"></script>
	<script src="echarts.js"></script>
	<script>
//		平台访问历史
		var myChart_histry = echarts.init($("#histry")[0]);
		option = {
			xAxis: {
		        type: 'category',
		        boundaryGap: false,
		        data: ['2018-07-27', '2018-07-28', '2018-07-29', '2018-07-30', '2018-07-31', '2018-08-01', '2018-08-02'],
				axisLine:{
		    		lineStyle:{
		    			color:'#fff'
		    		}
		    	}
		    },
		    yAxis: {
		        type: 'value',
		        axisLine:{
		    		lineStyle:{
		    			color:'#fff'
		    		}
		    	}
		    },
		    series: [{
		        data: [10, 20, 22, 23, 40, 25, 15],
		        type: 'line',
		        smooth: true,
		        areaStyle: {
		            normal:{}
		        }
		    }]
		};
		if(option && typeof option === "object") {myChart_histry.setOption(option, true);}

//		数据更新统计
		var myChart_dataagion = echarts.init($("#dataagion")[0]);
		option = {
			tooltip: {
		        trigger: 'axis',
		        axisPointer: {
		            type: 'cross',
		            crossStyle: {
		                color: 'red'
		            }
		        }
		   },
		    legend: {
		        data:[ 
		        	{name: '直接访问',textStyle:{color:"#fff"}},
		            {name:'邮件营销',textStyle:{color:"#fff"}}
		          ],
		    },
		    xAxis: [
		        {
		            type: 'category',
		            data: ['1月','2月','3月'],
		            axisPointer: {
		                type: 'shadow'
		            },
		            axisLine:{
			    		lineStyle:{
			    			color:'#00C1DE'
			    		}
			    	}
		        }
		    ],
		    yAxis: [
		        {
		            type: 'value',
		            name: '更新频率',
		            interval: 100,
		            axisLine:{
			    		lineStyle:{
			    			color:'#00C1DE'
			    		}
			    	}
		        }
		    ],
		    series: [
		    	
		        {
		            name:'直接访问',
		            type:'line',
		            data:[300, 320, 300]
		        },
		        {
		            name:'邮件营销',
		            type:'bar',
		            data:[110, 120, 110],
		            itemStyle:{
                        normal:{
                            color:'#7D96BA'
                        }
                    }
		        }
		    ]
		};
		if(option && typeof option === "object") {myChart_dataagion.setOption(option, true);}

//		资源格式比例
		var myChart_zygsbl = echarts.init($("#zygsbl")[0]);
		var myChart14one=3;
		var myChart14two=9;
		var myChart14add=myChart14one/myChart14two*100+'%';
		
		var myChart14addshow=myChart14two-myChart14one;
		option = {
				title: {
			        text: 'Execl',
			        left:'45%',
			        top:'88%',
			        textStyle: {
                        fontWeight: 'normal',              //标题颜色
                        color: '#fff'
                	},
			    },
			    tooltip: {
			        trigger: 'item',
			        formatter: "{a} <br/>{b}: {c} ({d}%)"
			    },
			    legend: {
			        orient: 'vertical',
			        x: 'left',
			        show: false,
			        data:['直接访问','搜索引擎擎']
			    },
			    series: [
			        {
			            name:'访问来源',
			            type:'pie',
			            radius: ['50%', '70%'],
			            avoidLabelOverlap: false,
			            label: {
			                normal: {
			                    show: true,
		                        position: 'center',
		                        formatter:function (argument) {
		                            var html;
		                            html="百分比\n"+myChart14add;
		                            return html;
		                        },
		                        textStyle:{
		                           fontSize: 15,
		                            color:'#39CCCC'
		                        }
			                }
			            },
			            itemStyle:{
			            	normal:{
			            		color: function(params) {
			                        var colorList = [
			                          '#BA856B','#6270B4'
			                        ];
			                        return colorList[params.dataIndex]
			                    }
			            	}
			            },
			            labelLine: {
			                normal: {
			                    show: false
			                }
			            },
			            data:[
			                {value:myChart14one, name:'直接访问'},
			                {value:myChart14addshow, name:'搜索引擎'}
			            ]
			        }
			    ]
		};
		if(option && typeof option === "object") {myChart_zygsbl.setOption(option, true);}	
		
//		数据开放统计
		var myChart_sjkftj= echarts.init($("#sjkftj")[0]);
		option = {
			tooltip: {
		        trigger: 'axis',
		        axisPointer: {
		            type: 'cross',
		            crossStyle: {
		                color: '#999'
		            }
		        }
		    },
		    legend: {
		        data:[ 
		        	{name: '数据集',textStyle:{color:"#fff"}},
		            {name:'API',textStyle:{color:"#fff"}}
		          ],
		    },
		    xAxis: [
		        {
		            type: 'category',
		            data: ['社会发展','经济建设','劳动人事'],
		            axisPointer: {
		                type: 'shadow'
		            },
		            axisLine:{
			    		lineStyle:{
			    			color:'#00C1DE'
			    		}
			    	}
		        }
		    ],
		    yAxis: [
		        {
		            type: 'value',
		            name: '数据：个',
		            interval: 100,
		            axisLine:{
			    		lineStyle:{
			    			color:'#00C1DE'
			    		}
			    	}
		        }
		    ],
		    series: [
		        {
		            name:'数据集',
		            type:'bar',
		            data:[300, 320, 300],
		            itemStyle:{
                        normal:{
                            color:'#D69166'
                        }
                    }
		        },
		        {
		            name:'API',
		            type:'bar',
		            data:[110, 120, 110],
		            itemStyle:{
                        normal:{
                            color:'#3C9B92'
                        }
                    }
		        }
		    ]
		};
		if(option && typeof option === "object") {myChart_sjkftj.setOption(option, true);}
	
//		数据下载TOP10
		var myChart_datadownload = echarts.init($("#datadownload")[0]);
		option = {
			    tooltip: {
			        trigger: 'axis',
			        axisPointer: {
			            type: 'shadow'
			        }
			    },
			    legend: {
			        data: [{name: '2011年',textStyle:{color:"#fff"}}]
			        
			    },
			    grid: {
			        left: '3%',
			        right: '4%',
			        bottom: '3%',
			        containLabel: true
			    },
			    xAxis: {
			        type: 'value',
			        boundaryGap: [0, 0.01],
			        axisLine:{
			    		lineStyle:{
			    			color:'#fff'
			    		}
			    	}
			    },
			    yAxis: {
			        type: 'category',
			        data: ['企业负责人信息','企业主题表','工资主导线','正常户信息'],
			        axisLine:{
			    		lineStyle:{
			    			color:'#fff'
			    		}
			    	}
			    },
			    series: [
			        {
			            name: '2011年',
			            type: 'bar',
			            barWidth:'30',
			            data: [20, 40,60, 50],
			            itemStyle:{
			                normal:{
			                    color:'#7D96BA'
			                }
			            }
			        }
			    ]
		};
		if(option && typeof option === "object") {
			myChart_datadownload.setOption(option, true);
		}
//		API下载TOP10
		var myChart_apidownload = echarts.init($("#apidownload")[0]);
		option = {
			    tooltip: {
			        trigger: 'axis',
			        axisPointer: {
			            type: 'shadow'
			        }
			    },
			    legend: {
			        data: [{name: '2011年',textStyle:{color:"#fff"}}]
			    },
			    grid: {
			        left: '3%',
			        right: '4%',
			        bottom: '3%',
			        containLabel: true
			    },
			    xAxis: {
			        type: 'value',
			        boundaryGap: [0, 0.01],
			        axisLine:{
			    		lineStyle:{
			    			color:'#fff'
			    		}
			    	}
			    },
			    yAxis: {
			        type: 'category',
			        data: ['企业负责人信息','企业主题表','工资主导线','正常户信息'],
			    	axisLine:{
			    		lineStyle:{
			    			color:'#fff'
			    		}
			    	}
			    },
			    series: [
			        {
			            name: '2011年',
			            type: 'bar',
			            barWidth:'30',
			            data: [20, 40,60, 50],
			            itemStyle:{
			                normal:{
			                    color:'#7D96BA'
			                }
			            }
			        }
			    ]
		};
		if(option && typeof option === "object") {
			myChart_apidownload.setOption(option, true);
		}
	</script>

 

dongsdh
关注
专栏目录
echarts图形
m0_61169066的博客
02-22 441
1.实现效果 目录 父界面 <template> <div> <div class="leftBoxs"> <div class="throw flex"> <div class="throw-r sixth flex"> <div class="throw-r-item querter"> <i class="iconfont .
echarts图表显示相关
忆浅曦
09-25 825
最近做了一个跟图表显示相关得项目，在图表插件得选用上，我使用了百度得插件echarts。一些基本的功能文档里都写的很清楚。 在这里主要说明一下，如何自定义toolbox里得工具，以实现自己想要得功能。 以画辅助线为例，如何在图表工具箱中增加辅助线这个工具项，在echarts3之前辅助线工具是本来就有的，到了echarts3之后，辅助线工具就被移除。如果想要使用，必须自己自定义编写功能代码才能实现。...
echarts各种图表
05-10
各种图表、折线图、柱形图等等，一些常用的图表 不管是你见过的没见过的都有
echarts 基础图形使用
xin_yun_Jian的博客
10-27 409
1. 安装 npm install echarts --save2. 定义标签容器 <div id="main" style="width: 600px; height: 400px"></div> 3. 引入 import * as echarts from "echarts"; 4. 柱状图 initBar() { var myCha...
C#+layui+echarts实现动态生成折线图
最新发布
路飞船长的博客
07-20 1283
C#+layui+echarts实现动态生成折线图。
echarts图形展示
weixin_30788239的博客
04-25 103
　　前段时间客户要求用中国地图来展示各个省份对应的数据，由于之间并没有使用过中国地图进行图形展示，询问了一下同事，同事推荐使用了echarts,折腾了一些时间做demo,把使用中的一个demo跟大家分享一下 1.echarts的下载 　　要使用echarts,当然就需要echarts所对应的js文件，echarts的下载地址为：http://echarts.baidu.com/echarts2...
eCharts给图标添加边框
m0_61265297的博客
11-08 2409
【代码】eCharts给图标添加边框。
Echarts环形饼状图设置内外边框
前端小菜鸟也有人起的博客
07-18 3454
Echarts环形饼状图设置内外边框
ECharts - dataset组件的用法详解
般若
11-25 1万+
从ECharts 4开始，支持使用dataset组件用于单独的数据集声明，从而使数据与配置进一步分离，数据可以被单独管理，被多个系列复用，并且可以基于数据指定数据到视觉的映射。 本文对dataset组件的使用进行了详细的讲解和介绍，包括其基本用法、按行或列进行映射、维度dimensions、encode映射规则等内容。
ECharts---一个非常炫酷好用的图表库。发现自己写的好详细。怪不得当时弄那么久。
FOR 的博客
11-24 3289
ECharts_study 对于渲染可视化图标的库有许多，因为项目需要，我学习了 Echarts 。完整叫 Apache ECharts 很多图在基本的准备部分不会详细说明，因此初学一定要看基本准备的部分 另外 ，图表真的很多 ， 官网 什么是 Echarts ECharts，一个使用 JavaScript 实现的开源可视化图表库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观
Echarts--Js可视化实现[视觉盛宴]--动态三维条形图、柱状图、饼图、比例图、折线图
L1542334210的博客
10-24 3470
Echarts--Js可视化实现[视觉盛宴]--动态三维条形图、柱状图、饼图、比例图、折线图1、前言2、案列（基于电影推荐系统）2.1 观众年龄分配占比`在这里插入代码片`2.2 不同职位观影情况2.3 电影类型分配占比2.4 观影性别占比3、文末彩蛋 1、前言        ECharts 提供了常规的折线图、柱状图、散点图、...
使用echarts实现立体-柱状图
07-21
ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于 BI 的...
ECharts-Javascript的图表库推荐
热门推荐
Wave的专栏
05-02 2万+
ECharts，缩写来自Enterprise Charts，商业级数据图表，一个纯Javascript的图表库，可以流畅的运行在PC和移动设备上，兼容当前绝大部分浏览器（IE6/7/8/9/10/11，chrome，firefox，Safari等），底层依赖轻量级的Canvas类库ZRender，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验，赋予了用户对数据进行挖掘、整合的能力。
echarts 设置地图外边框、地图背景渐变色和地图阴影,增加立体感以及在地图上打点
weixin_45665171的博客
06-08 8891
echarts 设置地图外边框、地图背景渐变色和地图阴影,增加立体感以及在地图上打点
echarts基本属性大全
IT_arookie的博客
04-12 4012
// 全图默认背景  //backgroundColor:"#fff000",        //设置背景颜色,注意是逗号 backgroundColor:“rgba(0,0,0,0.1)”,  // 第四个参数是设置透明度 // 图表标题 title: {  text:“图表标题”,  // 标题内容     x: ‘left’,        // 水平安放位置，默认为左对齐，可选为：    ...
数据可视化----ECharts通用配置（二）
m0_56026872的博客
07-27 1880
文不如表，表不如图。上一次，介绍了ECharts的相关概念以及使用步骤，请见 数据可视化----ECharts初体验（一） 还有一句，就是最好的文档在官网，看谁的博客，都不如去熟读官网，访问官网的方式 点击这里点点点 官网地址：https://echarts.apache.org/zh/index.html，复制到浏览器打开 直接百度，echarts 这一次，让我们一起来学习一下，ECharts通用配置 ECharts通用配置一 title(标题)text (标题文本)textStyle(文本样式)co
echarts图表增加外边框 或者外阴影 内边框或者内阴影
Taurus_666
03-14 1万+
如果能给echarts图表增加阴影或者边框呢？效果如下图所示的浅蓝色区域具体的代码如下图所示。
ECharts 数据可视化 下 基础篇
m0_55170432的博客
04-01 338
1.0 项目需求 设计稿是1920px PC端适配： 宽度在 1024~1920之间页面元素宽高自适应 1.1 适配方案 选择： rem布局 淘宝的 flexible.js flex布局 pc端 去flexible.js插件 把屏幕改为 24 等份 PC端的效果图是 1920px cssrem 插件的基准值改成 80px （1920 / 24） 1.2 适配方案 要把屏幕宽度约束在1024~1920之间有适配 @media screen and (max-width: 1024px)
工作中遇到的echarts
qq_40386177的博客
10-19 3040
echarts
echarts-gl.min.j echarts-gl.js echarts
06-19
然而，`echarts-gl.min.js`和`echarts-gl.js`是ECharts的一个扩展模块，专为3D图形和地理空间数据（如地球、地图）提供支持。它利用WebGL技术，使得ECharts能够绘制复杂的3D立体图，如地球上的3D地图、柱状图的3D...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值