Grafana Apache echarts 中的非标准 X 和 Y 轴刻度

Question

我正在尝试使用 Grafana 中的 Apache Echarts 复制这个具有非标准 x 和 y 轴的（散点）图表：

但是，查看文档和示例我找不到在轴上自定义比例的方法。有什么简单的方法吗？或者唯一的选择是作为 SVG 映射并根据区域转换坐标？是否有任何其他 Grafana 工具可以使它变得更容易？

我也试过使用对数刻度，但我做不到，我不能让它看起来像源材料。

Answer 1

echarts中最简单的得到你想要的东西的方案就是改造 数字轴到类别，这基本上意味着将所有数据转换为字符串。

const dataSets = [
     [
          [0, 25],
          [1, 10],
          [1, 0]
     ],
     [
          [0, 50],
          [1, 50],
          [2, 25],
          [2, 0]
     ],
     [
          [0, 50],
          [2, 50],
          [10, 25],
          [10, 0]
     ],
     [
          [0, 50],
          [100, 50]
     ]
].map(dataSet=>dataSet.map(([x, y])=>[''+x, y+'%']));

const option = {
     legend: {
          show: false,
     },
     tooltip:{
          show: false
     },
     xAxis: {
          //type: 'category',
          data: [0, 1, 2, 10, 100].map(x=>''+x), // or extract from data
          boundaryGap: false,
          z: 50,
          splitLine:{
               show: true, z:100,
               lineStyle:{color:'#888', width:2}
          }
     },
     yAxis: {
          //type: 'category',
          data:[0, 10, 25, 50].map(y=>y+'%'), // or extract from data
          boundaryGap: false,
          z: 50,
          splitLine:{
               show: true,
               lineStyle:{color:'#888', width:2}
          }
     },
     series: [
          {
               type: 'line',
               data: dataSets[0],
               lineStyle: {
                    opacity: 0,
               },
               symbolSize: 0,
               areaStyle: {
                    color: '#284',
                    opacity: 1,
               },
               z: 40
          },
          {
               type: 'line',
               data: dataSets[1],
               lineStyle: {
                    opacity: 0,
               },
               symbolSize: 0,
               areaStyle: {
                    color: '#4d8',
                    opacity: 1,
               },
               z: 30
          },
          {
               type: 'line',
               data: dataSets[2],
               lineStyle: {
                    opacity: 0,
               },
               symbolSize: 0,
               areaStyle: {
                    color: '#ed4',
                    opacity: 1,
               },
               z: 20
          },
          {
               type: 'line',
               data: dataSets[3],
               lineStyle: {
                    opacity: 0,
               },
               symbolSize: 0,
               areaStyle: {
                    color: '#d23',
                    opacity: 1,
               },
               z: 10
          },
     ],
};
const myChart = echarts.init(document.getElementById('chart-container'));
myChart.setOption(option);
window.addEventListener('resize', myChart.resize);

<div id="chart-container" style="height:100vh"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.4.1/echarts.min.js"></script>