gnuecharts.html

<meta charset='utf-8'>

<style>
body { font: 1em/1.5 Consolas}
code {
	font: bold .5em/1. Consolas, Monaco, monospace, SimHei;
	overflow: auto;
	background: #F5F2F0;
	max-width: 100%;
	color: #DD1144;
	padding: 0;
	border: 1.2px solid #E0DFCC;
	margin: 0 .3em 0 0.3em;
}

table {
	font: bold 1em/1.2 Consolas, "Courier New",  Monaco;
	text-align:left;
	vertical-align: baseline;
	border: 2px solid #888;
	border-spacing: 1;
	border-collapse:collapse;
	color:#000;
	background-color:#ECE8CD;
	max-width:100%;
/*	word-break:break-all;
	word-wrap:break-word;
	display: block;
*/
	margin:auto;
	overflow: auto;
}
th, .th {
	color:#fff;
	background-color: #A82918;
	border: 2px solid #000;
	padding: 3px;
}

td, tr {
	border: 2px solid #AAA;
	padding:2px;
}
table tr:nth-child(2n) { background-color: #FFFBDE; }
tfoot {font: 1em/1.2 Consolas, "Courier New", Monaco;}

.btn{
	font: bold 1em/1.2 Consolas, Monaco;
	width: 20%;
	height: 2em;
	color:#fff;background-color:#EF8C0E
}

.modal{
	display:none;
	position: fixed;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	background-color: rgba(0, 0, 0, 0.5);
	overflow: auto;
}

.modal .container{
	max-width: 100%;
	height: 100%;
	background-color: #fff;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
	box-sizing: border-box;
	border-radius: 6px;
	padding: 1em;
}

</style>

<div id='box' style='height:100%;width:100%;'>
	<div id='container' style='height:100%;width:calc(80% - 5px);float:left;overflow:scroll'></div>
	<div id='resize' style='width:5px; height:100%; background:skyblue; cursor: w-resize; float:left;'></div>
	<div id='right' style='height:100%;width:20%;float:right;overflow:scroll;'>
		<span class='th'>数据</span> 示例
		<span class='btn' onclick='demo(1)'>1</span>
		<span class='btn' onclick='demo(2)'>2</span>
		<span class='btn' onclick='demo(3)'>3</span><br>
		<textarea id='data' style='width: 95%; height:50%; margin: 0px;'></textarea><br>

		<span class='th'>绘图命令</span><br>
		<textarea id='cmd' style='width: 95%; height:10%; margin:0px; font: bold 1em Consolas'></textarea><br>
		对数坐标轴<input type="checkbox" id="logx">x<input type="checkbox" id="logy">y
		底数<input id="logbase" value='10' style='width:3em; height:1em; margin:0px; font: 1em Consolas'><br>

		<input type='button' class='btn' value='更新绘图' onclick='runCMD()' style='width:100px; height:30px'>
		<input type='button' class='btn' value='优化结果' onclick='showLM()' style='width:100px; height:30px'><br><br>

		<span class='th'>命令说明</span><br>
		<li>数据:<code>x范围 y范围 x数据:y数据 @点线型</code></li>
		<li>函数:<code>fun x范围步长 f(x) @点线型</code></li>
		<li>拟合:<code>fit $x范围 $y=f($x,P) 参数优化设置 @点线型</code></li>
		<li>优化:<code>min f(X) 或 {r1(X); r2(X)} 参数优化设置 @点线型</code></li>
		<hr>
		<li>范围: <code>[最小值:最大值]</code></li>
		<li>范围步长: <code>[最小值:最大值:步长]</code></li>
		<li>参数设置: <code>X=初值 X==定值</code></li>
		<li>优化设置: <code>maxit=优化步数 tau=初始步长 tolg=梯度容差 tolx=参数增比</code></li>
		<li>线型:<code>-</code>折线 <code>~</code>平滑线 <code>--</code>虚线 <code>-.</code>点线</li>
		<li>点型:<code>O</code>圆点 <code>M</code>方块 <code>D</code>圆角方块 <code>A</code>三角 <code>V</code>菱形 <code>Q</code>大头针 <code>^</code>箭头</li>
		<li>点型后数字指定点大小, 默认<code>10</code></li>
		<li>线型后数字指定线宽度, 默认<code>2</code></li>
	</div>
</div>

<div class="modal" id='LM'><div class="container">
<table id="LMret" style="border-collapse: collapse;"></table>
</div></div>

<script src="https://jerkwin.github.io/gmxtools/calc/math.js"></script>
<script src="https://unpkg.com/svd-js" type="application/javascript"></script>

<script src='https://cdn.jsdelivr.net/npm/echarts@5.2.2/dist/echarts.min.js'></script>

<!-- Uncomment this line if you want to dataTool extension
<script src='https://cdn.jsdelivr.net/npm/echarts@5.2.2/dist/extension/dataTool.min.js'></script>
-->
<!-- Uncomment this line if you want to use gl extension
<script src='https://cdn.jsdelivr.net/npm/echarts-gl@2/dist/echarts-gl.min.js'></script>
-->
<!-- Uncomment this line if you want to echarts-stat extension
<script src='https://cdn.jsdelivr.net/npm/echarts-stat@latest/dist/ecStat.min.js'></script>
-->
<!-- Uncomment this line if you want to use map
<script src='https://cdn.jsdelivr.net/npm/echarts@5.2.2/map/js/china.js'></script>
<script src='https://cdn.jsdelivr.net/npm/echarts@5.2.2/map/js/world.js'></script>
-->
<!-- Uncomment these two lines if you want to use bmap extension
<script src='https://api.map.baidu.com/api?v=2.0&ak=<Your Key Here>'></script>
<script src='https://cdn.jsdelivr.net/npm/echarts@{{version}}/dist/extension/bmap.min.js'></script>
-->

<script src="https://jerkwin.github.io/gmxtools/calc/gnuecharts.min.js"></script>