GridChart：魔术图（Card）组件的简单替代

收藏

本帖最后由 lucas.Yan 于 2024-11-13 09:07 编辑

   当我们需要展示今年12个月的指标时，可以使用魔术图（Magic Chart）。通过在魔术图中绑定简单的富文本和条件格式化，可以轻松实现所需的效果。然而，当大量使用魔术图时，浏览器会发送许多HTTP请求。由于HTTP协议的限制，这些请求无法迅速完成，从而拖慢了大屏的展示速度。

   虽然魔术图可以根据用户自定义的模板和绑定的数据，循环生成最终的图表结果，但在这种场景下显得有些大材小用，且首屏加载性能不佳。因此，建议使用新的GridChart组件来替代魔术图，以提高加载性能。

   GridChart组件不仅轻量级，还能有效减少HTTP请求次数，加快页面加载速度。同时，它支持数据绑定和条件格式化，能够满足展示多维度指标的需求，确保大屏展示既美观又高效。
魔术图
image.png26979369.png

GridChart

使用方法：
本插件使用handlebarsjs实现条目的复用，所以在使用中要参考handlebarsjs的语法。
1 首先我们使用GridChart组件并绑定数据
image.png43324278.png

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>";
},
});

复制代码

4 调整插件的条目布局等
image.png81029356.png

语法参考文档：https://handlebarsjs.com/

感谢用户Run2024提供的插件GridChart！
插件下载：

gridvisual.viz (95.46 KB, 下载次数: 0)

		自动登录	找回密码
密码			立即注册

GridChart：魔术图（Card）组件的简单替代

0 个回复