前言
我们平时工作中使用 Apache ECharts都是以代码的方式驱动的，但是有时我们做PPT,宣传海报等需要将echarts渲染的结果导出成图片作为素材使用,该应用场景虽然小众,但在工作中仍然不可或缺.
echarts的颜值已经足够出众，那么能否让本就精美的图片更加令人惊叹呢？ 话不多说，下面来欣赏下将echarts导出的SVG自动生成3d模型的部分效果图：
是不是很惊艳?你一定很好奇这个效果是怎么制作的呢？
制作工具和步骤
主要工具:
- 打开- Apache ECharts示例中心，在里面编辑echarts的代码
- 设置渲染器为SVG,并下载渲染的结果为SVG文件
- 打开 glicon3d图标设计工具 网站的glicon design页面，并上传你刚才下载的SVG文件
- 在glicon里调整背景，边框，文字等配置信息
操作视频链接
当然不是一定要用echarts官方的示例中心,如果你想把自己业务里图表导出SVG也是可以的,参考代码:
const chart = echarts.init(document.querySelector('#chart'), null, {
renderer: 'svg'
});
const 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'
}
]
};
chart.setOption(option);
function downloadSVG() {
const svg = chart.renderToSVGString();
//download codes
}
注意事项
因为glicon是个纯的SVG解析工具，在echarts图表里的非SVG的资源不能被解析，包括：
- 图片资源
- HTML DOM资源
如果想图片被解析可以使用svg图片资源，参考 Examples - Apache ECharts
目前还不能保证echarts输出的SVG能被百分百的还原，如果你使用的过程遇到问题可以艾特我
性能方面：
- 因为3d文字的解析比较耗时，如果图表里包含大量的文字会比较耗时
- 如果图表数据量比较大的也会很耗时，比如大规模的散点，折线图，柱状图等
强强联合
Apache ECharts的强大无需多言，glicon是我开发的一个将SVG文件自动生成3d模型的网站，主要方便设计和开发人员快速的拥有一个自己的3d的模型图标,主打简单快捷.
所以：echarts(惊艳)+glicon(简单)=惊艳3d的图表模型
在glicon里你可以对echart的图表进行:
- 设置图表的背景，背景的形状,方形还是圆形，背景颜色.
- 设置图表的边框，设置边框圆角,边框颜色等.
- 将图表里的文字拔高，缩放，抬高等
当然生成的3d模型图标应用场景绝不仅仅于此，模型数据还可以应用到 3d建模，游戏，GIS地图，数字孪生等行业.
适用人群
- 设计人员
- 市场宣传与销售人员
- 海报制作与文案策划工作者
- 研发人员
- ............
glicon简介
glicon网址
glicon教程地址
主要特点:
- 简单快捷:一分钟给你个3D图标.
- 海量图标库:支持从iconfont图标库里查找资源.
- SVG集合批量处理:支持解析用户上传的文件夹集合.
- 丰富的应用场景:广告海报,室内地图,数字孪生等.
创作的历程
最近一个月我一直聚焦于glicon网站，不断完善里面SVG的解析器.
五一假期里晚上突然来了灵感：echarts已经支持SVG渲染，那么echarts导出的SVG能否也能用我的解析器解析出来，并自动化的生成一个3d图标模型？
经过三天对echarts输出的svg的研究和探索,基本上验证和实现了我的想法，整个过程中主要的难点在文字的解析渲染和文字排版，在这里记录下.
svg里3d文字的解析和生成
webgl里做文字本来就是头疼的事情，且还是3d的文字，好在社区有强大的工具的支持
- 文字解析成svg path用的 shrhdk/text-to-svg: Convert text to SVG path without native dependence. (github.com)
- 考虑到文字的3D矢量化依赖字体库，且字体的文件一般都是比较大(以微软雅黑为例字体库20M+了)，在前台直接加载字体文件体验比较差故把文字的矢量化过程放到了服务端
- 前端读取svg文件里的文字内容和字体大小传到服务端，服务端直接返回字体的svg path
3d文字的排版
主要是文字的文字的水平对齐，垂直对齐，矩阵变换.
- text-anchor - SVG：可缩放矢量图形 | MDN (mozilla.org)
- dominant-baseline - SVG：可缩放矢量图形 | MDN (mozilla.org)
- transform - SVG：可缩放矢量图形 | MDN (mozilla.org)
将生成好的文字Geometry进行平移和矩阵变换
function matrixGeometry(geometry, matrix) {
if (typeof matrix === 'string') {
matrix = matrix.split(',').map(v => {
return parseFloat(v);
});
}
const [a, b, c, d, e, f] = matrix;
const position = geometry.attributes.position.array;
for (let i = 0, len = position.length; i < len; i += 3) {
const x = position[i], y = position[i + 1];
const x1 = a * x + c * y + e;
const y1 = b * x + d * y + f;
position[i] = x1;
position[i + 1] = y1;
}
}
最后
- 虽然整个探索的过程是比较痛苦的，不过最后结果却是甜蜜的
- 欢迎大家体验，发挥你的创造力
- 更多的效果图
