Definir borda no Apache eChart ao redor do gráfico

Question

Alice

Asked: 2025-03-22 11:30:25 +0800 CST2025-03-22 11:30:25 +0800 CST 2025-03-22 11:30:25 +0800 CST

Como saber o alvo real do evento de clique em echarts?

772

Gostaria de adicionar um recurso de anotações ao meu diagrama echarts. Ele será marcado como uma linha pontilhada verde com um marcador quadrado verde se houver alguma anotação. Quando o usuário clicar no marcador quadrado verde, um pop-up será aberto para mostrar a anotação real.

Quando executo o comando abaixo, ele é acionado sempre que clico em qualquer lugar na linha do marcador de anotação. Como posso saber se o usuário clica especificamente no marcador quadrado verde?

myChart.on('click', "series.line", function(params) {
  console.log('normal click series.markLine', params)
})

Aqui está a demonstração: https://codepen.io/lora999/pen/azbGPKY

1 respostas

Voted

kikon · Answer 1 · 2025-03-24T06:19:11+08:00

Se você explorar paramsem seu myChart.on('click', "series.line", function(params){... você pode encontrar maneiras de identificar que o retângulo foi clicado. O mais direto parece ser params.event.target.type === 'rect'(testado com renderer svg também):

myChart.on('click', "series.line", function(params) {
    if(params.event.target.type === 'rect'){
        console.log('Rectangle clicked');
        // use params.data.name or params.data._id to further
        // identify the target, if multiple annotations are added
    }
});

Trecho executável:

const myChart = echarts.init(document.getElementById("chart-container"), null, {
   renderer: "canvas",
   useDirtyRect: false,
});

const option = {
    "useUTC": false,
    "grid": {
        "containLabel": true,
        "left": 35,
        "right": 40,
        "top": 40,
        "bottom": 40
    },
    "xAxis": {
        "type": "time",
    },
    "yAxis": {
        "type": "value",
    },
    "tooltip": {
        appendTo: 'body',
        "borderColor": "transparent",
        "show": true,
        "trigger": "axis",
        enterable: true,
    },
    "legend": {
        "orient": "horizontal",
        "show": true,
        "type": "scroll",
        "bottom": 0,
    },
    "series": [
        {
            "name": "series1",
            "data": [
                [
                    1041811200000,
                    30429.64
                ],

                [
                    1043625600000,
                    99323.95999999999
                ],

                [
                    1050883200000,
                    4219.2
                ],
            ],
            "connectNulls": true,
            "type": "line",
            "smooth": false,

            "showSymbol": false,

        },
        {
            id: 'Annotation',
            name: 'annotation',
            type: "line",
            markLine: {
                symbol: 'none',
                label: {
                    show: true,
                    formatter: '{icon|}',
                    rich: {
                        icon: {
                            height: 20,
                            width: 20,
                            backgroundColor: 'green',
                            _id:'__test__'
                        },
                        _id:'__test__'
                    }
                },
                data: [
                    {
                        name: 'annotationLine',
                        xAxis: 1043625600000,
                        lineStyle: {
                            width: 2,
                            color:'green'
                        },
                        _id: 'annotationLine'
                    },
                ]
            }

        },
    ],
};


myChart.on('click', "series.line", function(params) {
    if(params.event.target.type === 'rect'){
        console.log('Rectangle clicked');
        // use params.data.name or params.data._id to further
        // identify the target, if multiple annotations are added
    }
});


myChart.setOption(option);

window.addEventListener('resize', myChart.resize);

<div id="chart-container" style="height:400px; min-width: 800px"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.6.0/echarts.min.js"></script>

Entretanto, a solução mais segura é separar o retângulo da linha, torná-los duas anotações diferentes, o retângulo implementado como markPoint:

const myChart = echarts.init(document.getElementById("chart-container"), null, {
   renderer: "canvas",
   useDirtyRect: false,
});

const option = {
    "useUTC": false,
    "grid": {
        "containLabel": true,
        "left": 35,
        "right": 40,
        "top": 40,
        "bottom": 40
    },
    "xAxis": {
        "type": "time",
    },
    "yAxis": {
        "type": "value",
    },
    "tooltip": {
        appendTo: 'body',
        "borderColor": "transparent",
        "show": true,
        "trigger": "axis",
        enterable: true,
    },
    "legend": {
        "orient": "horizontal",
        "show": true,
        "type": "scroll",
        "bottom": 0,
    },
    "series": [
        {
            "name": "series1",
            "data": [
                [
                    1041811200000,
                    30429.64
                ],

                [
                    1043625600000,
                    99323.95999999999
                ],

                [
                    1050883200000,
                    4219.2
                ],
            ],
            "connectNulls": true,
            "type": "line",
            "smooth": false,

            "showSymbol": false,

        },
        {
            id: 'Annotation',
            name: 'annotation',
            type: "line",
            markLine: {
                symbol: 'none',
                silent: true, // doesn't respond to click
                label: {
                    show: false
                },
                data: [
                    {
                        name: 'annotationLine',
                        xAxis: 1043625600000,
                        lineStyle: {
                            width: 2,
                            color:'green'
                        },
                        _id: 'annotationLine'
                    },
                ]
            },
            markPoint: {
                symbol: 'rect',
                symbolSize: 20,
                symbolOffset: [0, -10],
                itemStyle: {
                    color: 'green'
                },
                label: {
                    show: false,
                },
                data: [
                    {
                        name: 'annotationPoint',
                        coord: [1043625600000, 100000],
                        _id: 'annotationPoint'
                    },
                ]
            }

        },
    ],
};


myChart.on('click', "series.line", function(params) {
    // in this scenario, only the markPoint is responding to clicks; but if other items are
    // added, params.componentType and/or params.data.name (or _id) may be used to identify the target
    if(params.componentType === 'markPoint'){
        console.log('Rectangle clicked', params.data.name);
    }
})


myChart.setOption(option);

window.addEventListener('resize', myChart.resize);

<div id="chart-container" style="height:400px; min-width: 800px"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.6.0/echarts.min.js"></script>

ou usando o rótulo do ícone, como no código original (renderizador svg usado):

const myChart = echarts.init(document.getElementById("chart-container"), null, {
   renderer: "svg",
   useDirtyRect: false,
});

const option = {
    "useUTC": false,
    "grid": {
        "containLabel": true,
        "left": 35,
        "right": 40,
        "top": 40,
        "bottom": 40
    },
    "xAxis": {
        "type": "time",
    },
    "yAxis": {
        "type": "value",
    },
    "tooltip": {
        appendTo: 'body',
        "borderColor": "transparent",
        "show": true,
        "trigger": "axis",
        enterable: true,
    },
    "legend": {
        "orient": "horizontal",
        "show": true,
        "type": "scroll",
        "bottom": 0,
    },
    "series": [
        {
            "name": "series1",
            "data": [
                [
                    1041811200000,
                    30429.64
                ],

                [
                    1043625600000,
                    99323.95999999999
                ],

                [
                    1050883200000,
                    4219.2
                ],
            ],
            "connectNulls": true,
            "type": "line",
            "smooth": false,

            "showSymbol": false,

        },
        {
            id: 'Annotation',
            name: 'annotation',
            type: "line",
            markLine: {
                symbol: 'none',
                silent: true, // doesn't respond to click
                label: {
                    show: false
                },
                data: [
                    {
                        name: 'annotationLine',
                        xAxis: 1043625600000,
                        lineStyle: {
                            width: 2,
                            color:'green'
                        },
                        _id: 'annotationLine'
                    },
                ]
            },
            markPoint: {
                symbol: 'rect',
                symbolSize: 20,
                symbolOffset: [0, -10],
                itemStyle: {
                    color: 'green'
                },
                label: {
                    show: false,
                },
                data: [
                    {
                        name: 'annotationPoint',
                        coord: [1043625600000, 100000],
                        _id: 'annotationPoint'
                    },
                ]
            }

        },
    ],
};


myChart.on('click', "series.line", function(params) {
    // in this scenario, only the markPoint is responding to clicks; but if other items are
    // added, params.componentType and/or params.data.name (or _id) may be used to identify the target
    if(params.componentType === 'markPoint'){
        console.log('Rectangle clicked', params.data.name);
    }
});


myChart.setOption(option);

window.addEventListener('resize', myChart.resize);

<div id="chart-container" style="height:400px; min-width: 800px"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.6.0/echarts.min.js"></script>

Como saber o alvo real do evento de clique em echarts?

Reformatar números, inserindo separadores em posições fixas

Por que os conceitos do C++20 causam erros de restrição cíclica, enquanto o SFINAE antigo não?

Problema com extensão desinstalada automaticamente do VScode (tema Material)

Vue 3: Erro na criação "Identificador esperado, mas encontrado 'import'" [duplicado]

Qual é o propósito de `enum class` com um tipo subjacente especificado, mas sem enumeradores?

Como faço para corrigir um erro MODULE_NOT_FOUND para um módulo que não importei manualmente?

`(expression, lvalue) = rvalue` é uma atribuição válida em C ou C++? Por que alguns compiladores aceitam/rejeitam isso?

Um programa vazio que não faz nada em C++ precisa de um heap de 204 KB, mas não em C

PowerBI atualmente quebrado com BigQuery: problema de driver Simba com atualização do Windows

AdMob: MobileAds.initialize() - "java.lang.Integer não pode ser convertido em java.lang.String" para alguns dispositivos

Como saber o alvo real do evento de clique em echarts?

1 respostas

relate perguntas