echarts：如何在3D轴标签中使用下标/上标或乳胶/ mathjax？

编程问答 2022-08-11

问题描述

如何在3D图表中呈现上标或下标？

现在我正在这样做：

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

，图中的y轴标签如下：

enter image description here

除了f2之外，还有什么方法可以像f₂那样标记它（类似于html中的f<sub>2</sub>）？

还可以在echarts中使用乳胶或mathjax吗？

解决方法

据我所知，Echarts没有此功能或类似功能。但是，即使做到了，这还不够。需要改进zRender（可视化引擎）以支持此功能。

我建议您捕获值并将其替换为formatter中的Unicode符号，请参见示例：

var myChart = echarts.init(document.getElementById('main'));
var chars = ['\u00BC','\u00BD','\u00BE','\u2150','\u2151','\u2152'];
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,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>

添加：

P.S。只为我：您见过带有嵌入式Latex的JS图吗？

echartsechartsjavascript