ECharts, a javascript interactive chart Library, is used as an example ., Echartsjavascript
Download echarts-plain.js2, the new index.html, And the downloaded echarts-plain.js to the same directory.
<HTML> <HEAD> <title> System Environment Information </title> <meta http-equiv = "Content-Type" content = "text/html; charset = GBK "> <meta name =" Author "CONTENT =" mahh "> <meta name =" Description "CONTENT =" System Environment Information "> <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 "cellpadd Ing = "0" cellspacing = "0"> <tr> <td height = ""> <! -- <Div class = "unit_content_list"> --> <div id = "main" style = "height: 400px; border: 1px solid # ccc; width: 100%"> <! -- Canvas --> </div> <! -- </Div> --> </td> </tr> </table> </div> <script type = "text/javascript" src = "echarts-plain.js"> </ script> <script type = "text/javascript"> var usedimethyl = 200; var freeMe = 300; var maxUseabledMe = 512; var domCode = document. getElementById ('main'); var myChart = echarts. init (domCode); myChart. setOption ({title: {text: 'memory usage statistics', x: 'center'}, tooltip: {trigger: 'item', formatter: "{a} <br/> {B} ({d} %)"}, legend: {orient: 'vertical ', x: 'left', data: ['total memory occupied currently '+ usedimethyl + 'mb', 'remaining memory occupied temporarily' + freeMe + 'mb ', 'maximum available memory '+ maxUseabledMe + 'mb']}, toolbox: {show: true, feature: {saveAsImage: true }, series: [{name: 'memory usage statistics', type: 'pie', radius: '145px ', center: ['000000', 50%], selectedMode: 'Single', data: [{value: usedimethyl, name: 'total memory occupied currently '+ usedimethyl + 'mb'}, {value: freeMe, name: 'remaining memory occupied currently' + freeMe + 'mb '}, {value: maxUseabledMe, name: 'maximum memory available '+ maxUseabledMe + 'mb'}]}); </script> </BODY> </HTML>