GridChart：魔术图（Card）组件的简单替代
本帖最后由 lucas.Yan 于 2024-11-21 16:50 编辑当我们需要展示今年12个月的指标时，可以使用魔术图（Magic Chart）。通过在魔术图中绑定简单的富文本和条件格式化，可以轻松实现所需的效果。然而，当大量使用魔术图时，浏览器会发送许多HTTP请求。由于HTTP协议的限制，这些请求无法迅速完成，从而拖慢了大屏的展示速度。
虽然魔术图可以根据用户自定义的模板和绑定的数据，循环生成最终的图表结果，但在这种场景下显得有些大材小用，且首屏加载性能不佳。因此，建议使用新的GridChart组件来替代魔术图，以提高加载性能。
GridChart组件不仅轻量级，还能有效减少HTTP请求次数，加快页面加载速度。同时，它支持数据绑定和条件格式化，能够满足展示多维度指标的需求，确保大屏展示既美观又高效。
魔术图
GridChart
使用方法：
本插件使用handlebarsjs实现条目的复用，所以在使用中要参考handlebarsjs的语法。
1 首先我们使用GridChart组件并绑定数据
2 输入自定义helpers
Handlebars.registerHelper({
compare: function (v1, v2, options) {
const number1= parseFloat(v1, 10); // 提取整数部分
const number2 = parseFloat(v2, 10); // 提取整数部分
if (number1 > number2) {
//满足添加继续执行
return options.fn(this);
} else {
//不满足条件执行{{else}}部分
return options.inverse(this);
}
},
text: function () {
return "<p>tefsdafasxt</p>";
},
});
3 输入条目模板
<p class="head">{{"订购日期(月)"}} 月</p>
{{#compare "17万" 订单利润 }}
<p class="item" style="color: red">{{订单利润}}</p>
{{else}}
<p class="item">{{订单利润}}</p>
{{/compare}}
<style>
.head ,.item {
margin: 5px 0 0 0;
background: #18b48a;
text-align: center;
font-size: 1.2em;
color: white;
}
</style>
4 调整插件的条目布局等
语法参考文档：https://handlebarsjs.com/
感谢用户Run2024提供的插件GridChart！
插件下载：
页:
[1]