echartsInstance.dispatchAction 在具有多个系列的同一实例中

问题描述 投票：0回答：1

我已将 

echartsInstance.dispatchAction
应用于单独的实例，并且效果非常好（即使使用 
echarts.connect()
，工作也完成得很好。

但是，当在同一个实例中我需要同时操作多个系列时，就会出现问题。他们之间似乎有一些干扰。

就我而言，当我尝试应用

action
showTip
时，它不适用于第二个系列。

当我将鼠标悬停在 

tooltip
上时，我希望将 
option.series[1].data[0]
应用于 
option.series[0].data[0]
。

看代码：

<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.5.0/echarts.min.js"></script>
</head>

<div class="chart"></div>

<style>
    .chart {
        width: 100%;
        height: 100vh;
    }
</style>

<script>
    document.addEventListener("DOMContentLoaded", function() {

        const chartUse = echarts.init(document.getElementsByClassName("chart")[0]);

        const option = {

            tooltip: [{show: true}],

            series: [
                {
                    type: "gauge",
                    center: ["30%", "50%"],
                    data: [{value: 40}]
                },
                {
                    type: "gauge",
                    center: ["70%", "50%"],
                    data: [{value: 80, itemStyle: {color: "#f00"}}]
                }
            ]

        }

        chartUse.setOption(option);

        // events and actions
        chartUse.on("mouseover", {seriesIndex: 0, dataIndex: 0}, function() {
            chartUse.dispatchAction({
                type: "showTip",
                seriesIndex: 1,
                dataIndex: 0
            })
        })

        chartUse.on("mouseout", {seriesIndex: 0, dataIndex: 0}, function() {
            chartUse.dispatchAction({
                type: "hideTip",
                seriesIndex: 1,
                dataIndex: 0
            })
        })

    })
</script>

我尝试了另一种方法（等效），但它也不起作用：

        // events and actions
        chartUse.on("mouseover", (params) => {
            if (params.seriesIndex === 0 && params.dataIndex === 0) {
                chartUse.dispatchAction({
                    type: "showTip",
                    seriesIndex: 1,
                    dataIndex: 0
                })
            }
        })

        chartUse.on("mouseout", (params) => {
            if (params.seriesIndex === 0 && params.dataIndex === 0) {
                chartUse.dispatchAction({
                    type: "hideTip",
                    seriesIndex: 1,
                    dataIndex: 0
                })
            }
        })

有解决方案吗？还是可能存在错误？

javascript echarts
1个回答
0
投票

阻止代码工作的主要干扰/原因是 每个图表只有一个工具提示。也许你已经知道这一点， 并旨在当 

seriesIndex: 1
工具提示时仅显示正确的工具提示 当鼠标位于 
seriesIndex: 0
仪表指示器上时。

第二个原因是“自然”工具提示默认由 

mousemove
，不是 
mouseover
，参见 
tooltip.triggerOn
； 由于 
mousemove
将在 
mouseover
之后触发，系列 0 工具提示将 覆盖以编程方式打开的系列 1 工具提示。

此代码片段为 

dispatchAction
添加了超时，以显示正在发生的情况。然而，即使没有超时，工具提示也会振荡，这不适合生产：

document.addEventListener("DOMContentLoaded", function() {

    const chartUse = echarts.init(document.getElementsByClassName("chart")[0]);

    const option = {

        tooltip: {
            show: true
        },

        series: [
            {
                type: "gauge",
                center: ["30%", "50%"],
                data: [{value: 40}]
            },
            {
                type: "gauge",
                center: ["70%", "50%"],
                data: [{value: 80, itemStyle: {color: "#f00"}}]
            }
        ]

    }

    chartUse.setOption(option);

    chartUse.on("mousemove", {seriesIndex: 0, dataIndex: 0}, function() {
        setTimeout(()=>chartUse.dispatchAction({
            type: "showTip",
            seriesIndex: 1,
            dataIndex: 0
        }), 500);
    })

    chartUse.on("mouseout", {seriesIndex: 0, dataIndex: 0}, function() {
        chartUse.dispatchAction({
            type: "hideTip"
        });
    })

});
.chart {
    width: 100%;
    height: 100vh;
}
<div class="chart"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.5.0/echarts.min.js"></script>

要获得所需的效果，可以通过设置 

triggerOn: 'click'
或 
triggerOn: 'none'
来使用原始代码。 对于 
tooltip
选项，缺点是工具提示现在只能以编程方式显示：

document.addEventListener("DOMContentLoaded", function() {

    const chartUse = echarts.init(document.getElementsByClassName("chart")[0]);

    const option = {

        tooltip: {
            show: true,
            triggerOn: 'none'
        },

        series: [
            {
                type: "gauge",
                center: ["30%", "50%"],
                data: [{value: 40}]
            },
            {
                type: "gauge",
                center: ["70%", "50%"],
                data: [{value: 80, itemStyle: {color: "#f00"}}]
            }
        ]
    }

    chartUse.setOption(option);

    chartUse.on("mouseover", {seriesIndex: 0, dataIndex: 0}, function() {
        chartUse.dispatchAction({
            type: "showTip",
            seriesIndex: 1,
            dataIndex: 0
        });
    });

    chartUse.on("mouseout", {seriesIndex: 0, dataIndex: 0}, function() {
        chartUse.dispatchAction({
            type: "hideTip"
        });
    });

});
.chart {
    width: 100%;
    height: 100vh;
}
<div class="chart"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.5.0/echarts.min.js"></script>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.