echarts：如何在 3D 轴标签中使用下标/上标（或 Latex/mathjax）？

Question

How do I render superscript or subscript in a 3D chart?

Right now I'm doing like this:

xAxis3D: { scale: true, gridIndex: 0, name: "f0" },
yAxis3D: { scale: true, gridIndex: 1, name: "f1" },
zAxis3D: { scale: true, girdIndex: 2, name: "f2" },

and the y-axis label in the plot looks like this:

Instead of f2 , is there any way I can label it like f₂ (similar to f<sub>2</sub> in html)?

Also, is there any way to use latex or mathjax within echarts?

Answer 1

As I know Echarts doesn't have this or similar features. But even if it did, it's not enough. Need improve the zRender (visualization engine) to support this feature.

I would to recommend for you to capture the values and replace to Unicode symbol in formatter , see example:

 var myChart = echarts.init(document.getElementById('main')); var chars = ['\¼', '\½', '\¾', '\⅐', '\⅑', '\⅒']; var option = { xAxis: [{ data: [0, 1, 2, 3, 4, 5], axisLabel: { formatter: (val, idx) => chars[parseInt(val)], } }], yAxis: [{}], series: [{ name: 'Series', type: 'bar', data: [5, 20, 36, 10, 10, 20] }] }; myChart.setOption(option);

 <script src="https://cdn.jsdelivr.net/npm/echarts@4.8.0/dist/echarts.min.js"></script> <div id="main" style="width: 600px;height:400px;"></div>

Addition:

• Online Converter LaTeX expression to Unicode
• Ready to use library on npm

PS Just for my: have you ever seen JS-charts with embedded Latex?