echarts的简单使用(上课笔记)

最新推荐文章于 2024-05-09 14:18:28 发布
最新推荐文章于 2024-05-09 14:18:28 发布
阅读量741 收藏 3
点赞数
文章标签： echarts
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_54061736/article/details/124288853
版权

目录

一. 

1.首先下载个echarts.js

2.引入echarts

3.准备一个dom容器

4.创建一个简单的饼图

 5.更多的详细的配置在官方文档里都有介绍 地址:Documentation - Apache EChartshttps://echarts.apache.org/zh/option.html#title

 二.

异步加载数据的时候需要导入一个jquery-2.2.4.js文件

 下载地址:        

 1.异步加载数据画折线图

2.异步加载数据画柱状图

 ​

 3.异步加载数据画饼图

4. 异步加载数据画漏斗图

5.异步加载数据画组合图

 

一. 

1.首先下载个echarts.js

地址:https://github.com/apache/incubator-echarts/tree/4.6.0/disticon-default.png?t=M3C8https://github.com/apache/incubator-echarts/tree/4.6.0/dist

2.引入echarts

<!--在head标签中添加对echarts的引用-->
		<script src="echarts.js"></script> //src="echarts.js文件的地址"

3.准备一个dom容器

<!--添加一个div,用来做图标渲染的容器-->
<div id="main" style="width: 600px;height: 400px;"</div>

4.创建一个简单的饼图

完整代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<!--在head标签中添加对echarts的引用-->
		<script src="echarts.js"></script>
	</head>
	<body>
		<!--添加一个div,用来做图标渲染的容器-->
		<div id="main" style="width: 600px;height: 400px;"</div>
			<!--js初始化和配置参数-->
			<script type="text/javascript">
//				初始化echarts实列 echarts.init()/
				var myChar = echarts.init(document.getElementById('main'));
		/*		var option = {
					  legend: {
						    top: 'bottom'
						  },
						 
					series:[
						{
							name:'miegui',
							type:'pie',
							radius:[40,180],
							center:['50%','50%'],
							roseType:'area',
							itemStyle:{
								borderRadius:8
							},
							data:[
								{value:4,name:'节日活动'},
								{value:3,name:'团购促销'},
								{value:2,name:'微信推广'},
								{value:5,name:'自愿'}
							]
						}
					]
					
				};*/ //这里是玫瑰图的代码
//				配置参数
				var option={
					title:{
						text:'会员入会渠道分布',
						left:'center'
					},
					legend:{
						orient:'vertical',
						left:'left'
					},
					series:[
						{
							name:'Acces',
							type:'pie',
							radius:'50%',
							data:[
								{value:4,name:'节日活动'},
								{value:3,name:'团购促销'},
								{value:2,name:'微信推广'},
								{value:5,name:'自愿'}
							],
							emphasis:{
								itemStyle:{
									shadowBlur:10,
									shadowOffsetX:0,
									shadowColor:'rgba(0,0,0,0.5)'
								}
							}
						}
					]
				};
				
//				渲染视图,使用刚刚指定的配置项和数据显示图表
				myChar.setOption(option);
			</script>
			
	</body>
</html>

 

 5.更多的详细的配置在官方文档里都有介绍 地址:Documentation - Apache EChartsicon-default.png?t=M3C8https://echarts.apache.org/zh/option.html#title

 二.

异步加载数据的时候需要导入一个jquery-2.2.4.js文件

 下载地址:        

jQueryicon-default.png?t=M3C8https://jquery.com/

js文件的数据在:链接：https://pan.baidu.com/s/1gETTtOmeSdNHKIsFPuBk_A 
提取码：vnoh

 1.异步加载数据画折线图

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="echarts.js"></script>
		<script src="jquery-2.2.4.js"></script>
	</head>
	<body>
		<div id="main" style="width: 600px;height: 400px;"></div>
		<script type="text/javascript">
			var myChart = echarts.init(document.getElementById('main'));
			//显示标题,图列和空的坐标轴
			myChart.setOption({
				title:{},
				tooltip:{trigger:'axis'},
				legend:{},
				calculable: true,
				xAxis:{
					type:'category',
					boundaryGap:false,
					data:[]
				},
				yAxis:{
					type:'value'
					
				},
				series:[{
					type:'line',
					symbol:'emptydiamond', //设置折现图中每个坐标点的符号 emptycircle：空心圆 emptycircle：空心圆
					data:[]
				}]
			});
			myChart.showLoading(); //数据加载完之前显示一段简单的loading动画
			var AREA=[]; //类别数组(用来存放取出的json数据)
			var LANDNUM=[];
			$.ajax({
				type:"get",
				url:"js/data1.json", //请求数据的地址
				dataType:"json", //返回的数据形式为json
				success:function (result){
					//请求内容成功时执行该函数内容result即为服务器返回的json对象
					$.each(result.jinJian, function(index,item) {
						AREA.push(item.AREA); //挨个取出类别并填入类别数组
						LANDNUM.push(item.LANDNUM);
					});
					myChart.hideLoading(); //隐藏加载动画
					myChart.setOption({ //加载数据图表
						xAxis:{
							data:AREA
						},
						series:[{
							data:LANDNUM
						}]
					});
				}
			});
			
		</script>
	</body>
</html>

2.异步加载数据画柱状图

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="echarts.js"></script>
		<script src="jquery-2.2.4.js"></script>
	</head>
	<body>
		<div id="main" style="width: 600px; height: 400px;"></div>
		<script type="text/javascript">
			var myChart = echarts.init(document.getElementById('main'));
			$.get('js/bar.json',function(data){
				myChart.setOption(Option={
					title:{
						text:'异步加载数据'
					},
					legend:{
						data:data.categories
					},
					xAxis:{
						data:data.categories
					},
					yAxis:{},
					series:[{
						type:'bar',
						data:data.data
					}]
				});
			
			});
		</script>
	</body>
</html>

 

 3.异步加载数据画饼图

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="echarts.js"></script>
		<script src="jquery-2.2.4.js"></script>
	</head>
	<body>
		<div id="main" style="width: 600px;height: 400px;"></div>
		<script type="text/javascript">
			$.ajax({
				type:'get',
				async:false,
				url:'js/pie.json',
				data:{},
				dataType:'json',
				success:function(result){
					if (result){
						bind(result);
					}
				},
				error:function(errorMsg){
					alert("加载数据失败");
				}
			});
			function bind(result){
				var myChart = echarts.init(document.getElementById('main'));
				var option = {
					tooltip:{
						trigger:'item',
						formatter: "{a} <br/>{b} : {c} ({d}%)"
					},
					legend:{
						orient : 'vertical',
			            x : 'left',
			            data:(function(){
			                    var res = [];
			                    var len = result.data_pie.length;
			                        for(var i=0,size=len;i<size;i++) {
			                         res.push({
			                             name: result.data_pie[i].name,
			                         });
			                        }
			                        return res;
			                })()
					},
					series:[{
						type:'pie',
						data:(function( ){
							var res=[];
							var len = result.data_pie.length;
								for(var i=0,size=len;i<size;i++) {
									res.push({
										name:result.data_pie[i].name,
										value:result.data_pie[i].value
									});
								}
								return res;
						})()
					}]
				};
				myChart.setOption(option);
			}
				
		</script>
	</body>
</html>

 

 

4. 异步加载数据画漏斗图

(这里俺画的有问题)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="echarts.js"></script>
		<script src="jquery-2.2.4.js"></script>
	</head>
	<body>
		<div id="main" style="width: 600px;height: 400px;"></div>
		<script type="text/javascript">
			$.ajax({
				type:'get',
				async:false,
				url:'js/funnel.json',
				data:{},
				dataType:'json',
				success:function(result){
					if (result){
						bind(result);
					}
				},
				error:function(errorMsg){
					alert("加载数据失败");
				}
			});
			function bind(result){
				var myChart = echarts.init(document.getElementById('main'));
				var option = {
					series:[{
						type:'funnel',
						left: '10%',
	      				width: '80%',
	      				label:{
	      					formatter: '{b}Expected'
	      				},
	      				labelLine: {
					        show: false
					    },
					    itemStyle: {
					        opacity: 0.7
					    },
					    emphasis: {
					        label: {
					          position: 'inside',
					          formatter: '{b}Expected: {c}%'
					        }
			        	},
			        	data: [
				        { value: 60, name: '生成订单30%' },
				        { value: 40, name: '支付订单20%' },
				        { value: 20, name: '完成交易15%' },
				        { value: 80, name: '放入购物车50%' },
				        { value: 100, name: '浏览商品100%' }
				      ]
					},
					{
						name: 'Actual',
					      type: 'funnel',
					      left: '10%',
					      width: '80%',
					      maxSize: '80%',
					      label: {
					        position: 'inside',
					        formatter: '{c}%',
					        color: '#fff'
					      },
					      itemStyle: {
					        opacity: 0.5,
					        borderColor: '#fff',
					        borderWidth: 2
					      },
					      emphasis: {
					        label: {
					          position: 'inside',
					          formatter: '{b}Actual: {c}%'
					        }
					      },
					      data:(function( ){
							var res=[];
							var len = result.list.length;
								for(var i=0,size=len;i<size;i++) {
									res.push({
										name:result.list[i].department,
										value:result.list[i].num
									});
								}
								return res;
						})()
					      
    				}]
			};
					myChart.setOption(option);
				}
		</script>
	</body>
</html>

 

5.异步加载数据画组合图

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="echarts.js"></script>
		<script src="jquery-2.2.4.js"></script>
	</head>
	<body>
		<div id="main" style="width: 800px; height: 600px;"></div>
		<script type="text/javascript">
			$.ajax({
				type:'get',
				async:false,
				url:'js/test.json',
				data:{},
				datatype:'json',
				success:function(result){
					if (result){
						bind(result);
					}
				},
				error:function(errorMsg){
					alert("加载数据失败");
				}
			});
			
			
					//请求内容成功时执行该函数内容result即为服务器返回的json对象
					
				
			function bind(result){
				var myChart = echarts.init(document.getElementById('main'));
				var option = {
					grid:{
						left:'10%',
						right:'35%',
						top:'16%',
						bottom:'6%',
						containLabel:true
					},
					xAxis:{
						type:'category',
						data:(function(){
			                    var res = [];
			                    var len = result.data_pie_bar.length;
			                        for(var i=0,size=len;i<size;i++) {
			                         res.push({
			                            
			                             value:result.data_pie_bar[i].name
			                             
			                         });
			                        }
			                        return res;
			                })()

					},
					yAxis:{
						type:'value'
					},
					radar:{
						indicator:[{
							name:'语文',
							max:'100'
						},{
							name:'数学',
							max:100
						},{
							name:'英语',
							max:100
						},{
							name:'化学',
							max:100
						},{
							name:'物理',
							max:100
						}],
						center:['83%','85%'],
						radius:80
					},
					
					
					
					tooltip:{
						trigger:'item',
						formatter: "{a} <br/>{b} : {c} ({d}%)"
					},
					/*legend:{
						orient : 'vertical',
			            x : 'left',
			            data:(function(){
			                    var res = [];
			                    var len = result.data_pie_bar.length;
			                        for(var i=0,size=len;i<size;i++) {
			                         res.push({
			                             name: result.data_pie_bar[i].name,
			                         });
			                        }
			                        return res;
			                })()
					},*/
					series:[{
						center:['83%','50%'],
						radius:'28%',
						type:'gauge',
						axisTick: {
					        splitNumber: 2,
					        lineStyle: {
					          width: 2,
					          color: '#999'
					        }
					      },
					      axisLine: { //简单来说就是外圈的宽度
					        roundCap: true,
					        lineStyle: {
					          width: 18
					        }
					      },
					       pointer: {
						        icon: 'path://M2090.36389,615.30999 L2090.36389,615.30999 C2091.48372,615.30999 2092.40383,616.194028 2092.44859,617.312956 L2096.90698,728.755929 C2097.05155,732.369577 2094.2393,735.416212 2090.62566,735.56078 C2090.53845,735.564269 2090.45117,735.566014 2090.36389,735.566014 L2090.36389,735.566014 C2086.74736,735.566014 2083.81557,732.63423 2083.81557,729.017692 C2083.81557,728.930412 2083.81732,728.84314 2083.82081,728.755929 L2088.2792,617.312956 C2088.32396,616.194028 2089.24407,615.30999 2090.36389,615.30999 Z',
						        length: '75%',
						        width: 7,
						        offsetCenter: [0, '5%']
						      },
					      
						detail:{
							formatter:'{value}'
						},
						title:{
							offsetCenter:[0,'10%'] //设置km/h的位置
						},
						data:(function(){
			                    var res = [];
			                    var len = result.data_gauge.length;
			                        for(var i=0,size=len;i<size;i++) {
			                         res.push({
			                             name: result.data_gauge[i].name,
			                             value:result.data_gauge[i].value
			                         });
			                        }
			                        return res;
			                })()
					},{
						type:'bar',
						data:(function(){
			                    var res = [];
			                    var len = result.data_pie_bar.length;
			                        for(var i=0,size=len;i<size;i++) {
			                         res.push({
			                         	
			                             value: result.data_pie_bar[i].value
			                         });
			                        }
			                        return res;
			                })()
					},{
						type:'pie',
						center:['83%','20%'],
						radius:['15%','20%'],
						data:(function( ){
							var res=[];
							var len = result.data_pie_bar.length;
								for(var i=0,size=len;i<size;i++) {
									res.push({
										name:result.data_pie_bar[i].name,
										value:result.data_pie_bar[i].value
									});
								}
								return res;
						})()
					},
					{
						type:'radar',
						center:['83%','85%'],
						data:(function( ){
							var res=[];
							var len = result.data_radar.length;
								for(var i=0,size=len;i<size;i++) {
									res.push({
										value:result.data_radar[i].value
									});
								}
								return res;
						})()
					}
					
					
					
					
					]
				};
				myChart.setOption(option);
			}
			
			
		</script>
	</body>
</html>

 

 

 

 

 

每日踩坑
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
一个简单的echarts实例
weixin_40741411的博客
11-03 419
1.先有一个网页 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>一个简单的echarts实例</title> </head> <body> </body> </html> 2.为图形准备一个有宽和高的块级元素 <!DOCTYPE html> <html> <h
Echarts简单使用实例
wu_gua_ge的博客
10-17 4917
正在学习，做的第一个echarts小样，供以后参考用： 1、因为是使用struts2写的，先导入struts2必备包: 2.action部分代码很简单，就是将信息拼装成json字符串：/** * 获取echart数据方法，拼装成json字符串 * @throws IOException */ public void getData() throws IOEx
简单使用ECharts
Bruce_Json的博客
08-10 191
从ECharts下载js源码:http://echarts.baidu.com/dist/echarts.js 新建项目，把源码放到echart.js中 在index.html中引入echarts.js &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;title&gt;&lt;/title&gt; &lt;script src="j...
eCharts基础详解
最新发布
2301_77404895的博客
05-09 640
echarts图类型设置 1.title:标题组件 2.tooltip:提示框组件 3.legend：图例组件，展现了不同系列的标记(symbol)，颜色和名字 4.xAxis：直角坐标系grid中的 x 轴，单个 grid 组件最多只能放上下两个 x 轴。 5.yAxis:直角坐标系 grid 中的 y 轴，单个 grid 组件最多只能放左右两个 y 轴。 6.series:系列列表。每个系列通过 type 决定自己的图表类型。 seriestype=line ——-折线图
ECharts简单使用
weixin_43777731的博客
07-30 129
Apache ECharts ECharts使用方法简单满足五个条件 Dom容器通俗地说就是一个div盒子，然后在官网挑选模板 <div class="box"></div> 然后编写index.js文件，使用立即执行函数，jQuery开篇用的就是立即执行函数。立即执行函数常用于第三方库，好处在于隔离作用域，任何一个第三方库都会存在大量的变量和函数，为了避免变量污染（命名冲突），开发者们想到的解决办法就是使用立即执行函数。引用jQuery文件。 (function() {
ECharts 入门学习
汉堡请不要欺负面条
10-27 3487
一.简单使用 1、echarts柱状图x轴数据隔一个显示 xAxis: { axisLabel: { interval:0 } }, 2、显示数值 柱状图上方显示数值 series: [ { type: 'bar', itemStyle: { normal: { label: { show: true, //开启显示 posit...
Apache ECharts简单使用
01-29
Apache ECharts简单使用
Echarts基础教程学习笔记
11-14
Echarts基础教程学习笔记，Echarts简介、课程介绍、技能、设备、网络环境的要求和建议
echarts练习笔记
03-11
在“echarts练习笔记”这个项目中，我们可以看到两个主要的文件夹：`templates`和`static`。这表明项目是围绕着构建一个Web应用进行的，其中`templates`通常用于存放HTML模板文件，而`static`则用于存放不随应用程序...
echarts 学习笔记 文档
02-26
echarts 学习笔记 文档
echarts入门视频、笔记和源码
11-04
ECharts是一款由百度开源的，基于JavaScript的数据...通过观看视频、阅读笔记和研究源码，你将能够熟练掌握ECharts的使用，实现各种复杂的数据可视化需求。在实践中不断探索，ECharts将成为你展示数据魅力的强大工具。
echarts折线图使用
十七的博客
07-21 519
echarts折线图的使用
vue 引入 echarts，init初始化报错
weixin_43484014的博客
05-06 8656
vue 引入 echarts，init初始化报错 1.下载echarts npm install echarts --save 2.页面中引入，我只有一个页面需要引用到echarts，所以就直接在页面中引入 import echarts from 'echarts' 3.在methods中写对应的例子 myEcharts() { this.chart = echarts.init(document.getElementById('main')) this.chart.setOp
Echarts的基本使用
Kepler_II的博客
03-17 2071
1、基本使用 先引入echarts 然后创建一个元素用来装载echarts图表 echarts.init() 方法初始化 echarts 实例 最后设置配置项和数据 option，使用 setOption() 方法根据数据和配置项来显示图表即可 1. <!DOCTYPE html> 2. <html> 4. <head> 5. <meta charset="utf-8"> 6. <title>ECharts</title&g
ECharts的讲解
热门推荐
weixin_62268437的博客
08-11 1万+
把数据以更直观的形式展现----图表可以清晰有效地传达与沟通信息可以帮助我们快速的获取隐藏在数据中的信息ECharts是一个使用JavaScript实现的开源可视化库，兼容性强，底层依赖矢量图形库ZRender，提供直观，交换丰富，可高度个性化定制的数据可视化图表。官网地址：https://echarts.apache.org/zh/index.html。...
echarts 初使用
sinat_35539553的博客
07-02 124
<template> <div class="Echarts"> <div id="main" style="width: 600px;height:400px;"></div> </div> </template> <script> import _ from 'lodash'; export default { name: 'Echarts', data(){ return{
echarts学习笔记
a432qbc的博客
06-03 593
var myChart = echarts.init(document.getElementById('main')); // 显示标题，图例和空的坐标轴 myChart.setOption({ title: { text: '异步数据加载示例' }, tooltip: {}, legend: { data:['销量'] }, xAxis: { data: [] }, yAxis: {},
echarts简单使用
weixin_57011137的博客
04-08 146
echarts使用 首先在需要用到echarts的页面中下载echarts npm install echarts --save 下载好echarts之后再需要的页面引入echarts import * as echarts from 'echarts' 引入echarts创建一个有宽和高的容器给这个元素社设置一个id var myChart = echarts.init(document.getElementById(id名字)) 这个指将echarts插入到指定id的元素中 myChart.setOpt
《数据分析-Echarts》Python + Django + echarts图表展示
https://blog.datasource.space
03-29 5509
Python + Django + echarts图表展示 项目打包文件 一、准备工作 ## 1.python环境安装 ## 2.python开发工具PyCharm安装 二、创建Django项目 三、Terminal 四、安装Django模块 在terminal下输入命令安装： 可以先使用pip list查看已安装的模块 PS D:\date\PyCharm\djangoProject> pip list 继续使用pip install django命令安装django模块 PS D:\dat
(COGNOS)系统使用笔记资料.docx
10-25
根据提供的资料"(COGNOS)系统使用笔记资料.docx"，从系统架构和系统安装两个方面进行总结并生成一段描述。 总结： 本文档主要内容是关于(COGNOS)系统的使用笔记资料。文档首先介绍了系统的架构，其中包括IMPROMPTU ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值