ECharts，一个javascript 互动图表库，使用例子。

最新推荐文章于 2022-09-18 22:59:10 发布

马欢欢

最新推荐文章于 2022-09-18 22:59:10 发布

阅读量1.4k

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/asiaasia666/article/details/43853005

版权

JavaScript 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

一，下载echarts-plain.js

二，新建index.html，并与下载的echarts-plain.js放到同一目录。

<HTML>
 <HEAD>
  <title>系统环境信息</title>
  <meta http-equiv="Content-Type" content="text/html; charset=GBK">
  <META NAME="Author" CONTENT="mahh">
  <META NAME="Description" CONTENT="系统环境信息">
   <style type="text/css"> 
	.version{
		border-collapse:collapse
		} 
	.version td{ 
		border:1px solid #999999
	} 
  </style>

 </HEAD>
 <BODY style="background:transparent;">
<div>
	<table class="" width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">

	  <tr>
		<td height="">
		<!-- <div class="unit_content_list"> -->
		<div id="main" style="height:400px;border:1px solid #ccc;width:100%">
			<!-- 画布 -->
		</div>
		<!-- </div> -->
		</td>
	  </tr>
 </table>
</div>

<script type="text/javascript" src="echarts-plain.js"></script>
<script type="text/javascript" >
	var usedMe=200;
	var freeMe=300;
	var maxUseabledMe=512;
	var domCode = document.getElementById('main');
	var myChart = echarts.init(domCode);
	myChart.setOption({
		    title : {
		        text: '内存占用统计',
		        x:'center'
		    },
		    tooltip : {
		        trigger: 'item',
		        formatter: "{a} <br/>{b}  ({d}%)"
		    },
		    legend: {
		        orient : 'vertical',
		        x : 'left',
		        data:['当前占用内存总数'+usedMe+'MB','当前占用内存剩余'+freeMe+'MB','最大可用内存'+maxUseabledMe+'MB']
		    },
		    toolbox: {
		        show : true,
		        feature : {
		            saveAsImage : true
		        }
		    },
		    series : [
				{
					name:'内存占用统计',
					type:'pie',
					radius : '145px',
					center: ['50%', 200],
					selectedMode:'single',
					data:[
						{value:usedMe, name:'当前占用内存总数'+usedMe+'MB'},
						{value:freeMe, name:'当前占用内存剩余'+freeMe+'MB'},
						{value:maxUseabledMe, name:'最大可用内存'+maxUseabledMe+'MB'}
					]
				}
			]
		});
</script>
 </BODY>
</HTML>