eCharts как получить данные xAxis

Question

У меня есть код с событием при клике в эхарте. js вот так

mytempChart2.on('click', function (params) 
        //params.seriesName return aktif/non aktif
        {window.open('' + encodeURIComponent(params.dataType) + '.html', '_self');
    });

Я читаю эхарт документации по https://www.echartsjs.com/en/tutorial.html#Events% 20 и% 20Actions% 20in% 20ECharts

но я не могу найти параметр для получения данных xAxis, данные xAxis на моем графике - это дата.

Посмотрите мое изображение, я хочу получить это значение (красный круг)

мой полный код

// ============================================================== 
    // Line chart
    // ============================================================== 
    var dom2 = document.getElementById("grafik2");
    var mytempChart2 = echarts.init(dom2);
    var app = {};
    option2 = null;
    option2 = {
        tooltip : {
            trigger: 'axis'
        },
        legend: {
            data:['Non-Aktif', 'Aktif Kembali']
        },
        toolbox: {
            show : true,
            feature : {
                magicType : {show: true, type: ['line', 'bar']},
                restore : {show: true},
                saveAsImage : {show: true}
            }
        },
        color: ["#EF5350", "#2FBF2F"],
        calculable : true,
        xAxis : [
            {
                type : 'category',
                boundaryGap : false,
                data : [01,02,03,04,05,06,07,08,09,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,],
            }
        ],
        yAxis : [
            {
                type : 'value',
                axisLabel : {
                    formatter: '{value}'
                }
            }
        ],
        series : [
            {
                name:'Non-Aktif',
                type:'line',
                data:[0,0,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,],
                markPoint : {
                    data : [
                        {name: 'tanggal', value: 100}, 
                        {type : 'max', name: 'Tertinggi'},
                        {type : 'min', name: 'Terendah'}
                    ]
                },
                itemStyle: {
                    normal: {
                        lineStyle: {
                            shadowColor : 'rgba(0,0,0,0.3)',
                            shadowBlur: 10,
                            shadowOffsetX: 8,
                            shadowOffsetY: 8 
                        }
                    }
                }, 
                markLine : {
                    data : [
                        {type : 'average', name : 'Rata-rata'}
                    ]
                }
            },
            {
                name:'Aktif Kembali',
                type:'line',
                data:[0,0,3,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,],
                markPoint : {
                    data : [
                        {type : 'max', name: 'Tertinggi'},
                        {type : 'min', name: 'Terendah'}
                    ]
                },
                itemStyle: {
                    normal: {
                        lineStyle: {
                            shadowColor : 'rgba(0,0,0,0.3)',
                            shadowBlur: 10,
                            shadowOffsetX: 8,
                            shadowOffsetY: 8 
                        }
                    }
                }, 
                markLine : {
                    data : [
                        {type : 'average', name : 'Rata-rata'}
                    ]
                }
            }
        ]
    };

    if (option2 && typeof option2 === "object") {
        mytempChart2.setOption(option2, true), $(function() {
            function resize() {
                setTimeout(function() {
                    mytempChart2.resize()
                }, 100)
            }
            $(window).on("resize", resize), $(".sidebartoggler").on("click", resize)
        });
    }

    mytempChart2.setOption(option2);
    mytempChart2.on('click', function (params) 
        //params.seriesName return aktif/non aktif
        {window.open('' + encodeURIComponent(params.name) + '.html', '_self');
    });

Answer 1

Вы можете использовать параметры object, как указано вами. вам нужно получить доступ к свойству name, которое содержит значение по оси x.

Рабочий код приведен ниже:

// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));

option = {
  xAxis: [{
    type: 'category',
    boundaryGap: false,
    data: [01, 02, 03, 04, 05, 06, 07, 08, 09, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, ],
  }],
  yAxis: [{
    type: 'value',
    axisLabel: {
      formatter: '{value}'
    }
  }],
  series: [{
      name: 'Non-Aktif',
      type: 'line',
      data: [0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, ],
      markPoint: {
        data: [{
            name: 'tanggal',
            value: 100
          },
          {
            type: 'max',
            name: 'Tertinggi'
          },
          {
            type: 'min',
            name: 'Terendah'
          }
        ]
      },
      itemStyle: {
        normal: {
          lineStyle: {
            shadowColor: 'rgba(0,0,0,0.3)',
            shadowBlur: 10,
            shadowOffsetX: 8,
            shadowOffsetY: 8
          }
        }
      },
      markLine: {
        data: [{
          type: 'average',
          name: 'Rata-rata'
        }]
      }
    },
    {
      name: 'Aktif Kembali',
      type: 'line',
      data: [0, 0, 3, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, ],
      markPoint: {
        data: [{
            type: 'max',
            name: 'Tertinggi'
          },
          {
            type: 'min',
            name: 'Terendah'
          }
        ]
      },
      itemStyle: {
        normal: {
          lineStyle: {
            shadowColor: 'rgba(0,0,0,0.3)',
            shadowBlur: 10,
            shadowOffsetX: 8,
            shadowOffsetY: 8
          }
        }
      },
      markLine: {
        data: [{
          type: 'average',
          name: 'Rata-rata'
        }]
      }
    }
  ]
}
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

myChart.on('click', function(params) {
  console.log(params.name);
});

<div id="main" style="width: 600px;height:400px;"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.6.0/echarts.min.js"></script>