很早之前，我面临过这样的问题，对现有的一个计算公式进行调整优化。起初，我是拍脑袋的方式进行参数系数调整然后对比结果，然后发现这样的方式太笨了，于是想到通过ECharts来进行动态调参对比。本篇文章记录一下当时的实践
ECharts
通过该方式引入js即可
<script src="https://cdn.jsdelivr.net/npm/echarts@5.5.1/dist/echarts.min.js"></script>下面是简单示例
<html><head><meta charset="utf-8"><title>ECharts公式对比</title><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/echarts.min.js"></script><style>.tubiao {width: 800px;height: 600px;float: left;margin-top: 50px;margin-left: 20px;}</style></head><body><div id="main" class="tubiao"></div><script type="text/javascript">var chartDom = document.getElementById('main');var myChart = echarts.init(chartDom);var option;option = {xAxis: {type: 'category',data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']},yAxis: {type: 'value'},series: [{data: [150, 230, 224, 218, 135, 147, 260],type: 'line'}]};option && myChart.setOption(option);update();</script></body></html>
标题二
既然Echarts能画一条线，就可以画两条线。既然用到了JS，那么我就可以动态地去调整参数来做对比。上代码，示例如下：
这里我设定了两个公式：
// 公式A y = ax + 1000var old_value = Xdata[i]*old_a + 1000;// 公式B y = ax^2 + bvar new_value = new_a * Xdata[i] * Xdata[i] + new_b
通过调整参数很容易就进行直观的比较，详细代码如下：
<html><head><meta charset="utf-8"><title></title><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/echarts.min.js"></script><style>.silder {margin-top: 60px;}.range {-webkit-appearance: none;background: #ffaa00;height: 3px;outline: "text";margin: 0;width: 150px;}.textP {float: left;color: orange;margin-left: 10px;}.tubiao {width: 800px;height: 600px;float: left;margin-top: 50px;margin-left: 20px;}</style></head><body><div style="float: left;margin-left: 200px;margin-top: 40px;"><div class="silder"><p style="float: left;">参数1</p><p id="old_a_text" class="textP"> </p><div><input class="range" id="old_a" name="yingxiang" type="range" max="100" min="50" step="1"onchange="update()" /></div></div></div><div id="main" class="tubiao"></div><div style="float: left;margin-top: 40px;"><div class="silder"><p style="float: left;">参数1</p><p id="new_a_text" class="textP"> </p><div><input class="range" id="new_a" type="range" max="10" min="1" step="1" onchange="update()" /></div></div><div class="silder"><p style="float: left;">参数2</p><p id="new_b_text" class="textP"> </p><div><input class="range" id="new_b" type="range" max="10" min="1" step="1" onchange="update()" /></div></div></div><script type="text/javascript">var chartDom = document.getElementById('main');var myChart = echarts.init(chartDom);var option;function update() {var old_a = document.getElementById("old_a").value;document.getElementById("old_a_text").innerText = old_a;var new_a = document.getElementById("new_a").value;document.getElementById("new_a_text").innerText = new_a;var new_b = document.getElementById("new_b").value;document.getElementById("new_b_text").innerText = new_b;var Xdata = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]var Ydata = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20]var Zdata = []var Ydata = [];var yYdata = [];for (let i = 0; i < Xdata.length; i++) {// old公式计算var old_value = Xdata[i] * old_a + 1000;yYdata.push(old_value)// new公式计算var new_value = new_a * Xdata[i] * Xdata[i] + new_bYdata.push(new_value);}option = {title: {text: '公式对比'},legend: {data: ['new', 'old']},tooltip: {trigger: 'axis'},grid: {left: '3%',right: '4%',bottom: '3%',containLabel: true},toolbox: {feature: {saveAsImage: {}}},xAxis: {type: 'category',boundaryGap: false,data: Xdata},yAxis: {boundaryGap: [0, '10%'],type: 'value'},series: [{name: 'new',type: 'line',label: {show: true,textStyle: {fontSize: 10}},data: Ydata},{name: 'old',type: 'line',label: {show: true,textStyle: {fontSize: 10}},data: yYdata},]};option && myChart.setOption(option);}update();</script></body></html>
这只是我之前的一种解决思路，当然我不太清楚这种场景是否大众，对我来说也是偶尔的一次需求罢了。
原文始发于微信公众号（飞羽技术工坊）：自己曾摸索的基于ECharts的可视化公式调优方式
免责声明:文章中涉及的程序(方法)可能带有攻击性，仅供安全研究与教学之用，读者将其信息做其他用途，由读者承担全部法律及连带责任，本站不承担任何法律及连带责任；如有问题可邮件联系(建议使用企业邮箱或有效邮箱,避免邮件被拦截，联系方式见首页)，望知悉。
- 左青龙
- 微信扫一扫
-
- 右白虎
- 微信扫一扫
-
评论