echarts使用（一）

最新推荐文章于 2023-01-09 18:01:41 发布

Todd0517

最新推荐文章于 2023-01-09 18:01:41 发布

阅读量1.6k

点赞数 1

分类专栏： echarts

本文链接：https://blog.csdn.net/oSunXu/article/details/77962813

版权

echarts 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

项目中不少地方用到了图表来进行数据展示，所以系统的学习一下。

官网链接：

http://echarts.baidu.com/index.html

导入一个简单的饼图：

项目需要jquery.js 和 echarts的类库。我是直接从我们项目中拷贝出来的类库，然后去官网找了一个饼图的样例。

项目结构：

static---echarts---chart----各种图形的Js文件

---echarts.min.js

--js--- jquery.min.js

test01.html

文件内容：

<body>
	<div id="pie" style="height:500px;">  	
	</div>	
</body>
<!-- 需要引用的JS -->
<script type="text/javascript" src="static/js/jquery.min.js"></script>
<script type="text/javascript" src="static/echarts/echarts.min.js"></script>
<script type="text/javascript">
	$(function(){
		showPie();		
	
	});
	function showPie(){
		option = {
			title : {
				text: '某站点用户访问来源',
				subtext: '纯属虚构',
				x:'center'
			},
			tooltip : {  			//气泡提示框，常用于展现更详细的数据
				trigger: 'item',	//可选  axis:轴线触发， 折线图常用
				formatter: "{a} <br/>{b} : {c} ({d}%)"
			},
			legend: { 				//图例
				orient : 'vertical',//布局方式 'horizontal' | 'vertical'
				x : 'left' , 		 //水平安放位置
				data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
			},  		
			toolbox: {  			 //工具箱，右上角那个
				show : true,
				feature : {			//启用功能
					mark : {show: true},
					dataView : { 		 //工具栏上的数据视图,可以直接往里面添加数据
						show: true,
					    title : '数据视图',
					   lang: ['数据视图', '关闭1', '刷新1']
					 
					},
					magicType : {		//动态类型切换  又一种形状 切换为另一种形状
						show: true, 
						type: ['pie', 'funnel'],
						title: { funnel: '漏斗图切换'},
						option: {
							funnel: {
								x: '15%',
								width: '50%',
								funnelAlign: 'left',
								max: 1548
							}
						}
					},
					restore : {show: true, title : '还原'},
					saveAsImage : {show: true,  title : '保存为图片', lang : ['点击保存']}
				}
			},
			calculable : true,		//是否启用拖拽重计算的功能
			series : [  	 		//不用类型 通用信息
				{
					name:'访问来源',
					type:'pie',
					radius :[ '70%','20%'],		//半径，支持绝对值（px）和百分比，百分比计算比，min(width, height) / 2 * 75%，
							 				   // 传数组实现环形图，[内半径，外半径]
					center: ['50%', '60%'],		//圆心位置
					//roseType:'radius',		//显示样式;默认为null,南丁格尔玫瑰图模式，'radius'（半径）|'area'（面积）
					selectedMode:'multiple',	//选中模式，点击的时候可以和整体分开 ，默认关闭可选single，multiple
					data:[						//表类型不一样，格式也不一样
						{value:335, name:'直接访问'},
						{value:310, name:'邮件营销'},
						{value:234, name:'联盟广告'},
						{value:135, name:'视频广告'},
						{value:1548, name:'搜索引擎'}
					]
				}
			]
		};
		var chart = echarts.init($("#pie")[0]);
		chart.setOption(option);
		
	}
</script>

效果展示：

Todd0517

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
echarts使用（一）

项目中不少地方用到了图表来进行数据展示，所以系统的学习一下。官网样例链接：http://echarts.baidu.com/echarts2/doc/example.html导入一个简单的饼图：项目需要jquery.js 和 echarts的类库。我是直接从我们项目中拷贝出来的类库，然后去官网找了一个饼图的样例。项目结构：static---echarts
复制链接

扫一扫