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

来源：互联网发布：java条形码生成代码编辑：程序博客网时间：2024/06/05 15:33

一，下载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>

0 0