An article to solve the echarts map carousel highlight

Preface

I have been busy working on the company's super data screen these days and I really can't find time to update the article continuously.

But I haven’t stopped updating the article for so long, so I will share the echarts map carousel highlights that I often use in my work.

The technology stack used is vue2.x. I believe everyone is clear about the effect, so let's get started.

toDoList

• Simply prepare a map
• Save the instance for backup
• Set the timer
• Set mouse in and out events

just do it

Prepare a map

First, prepare a simple map. Since I am in Guangzhou, I will use the map of Guangdong Province.

I won’t explain how to use maps in echarts. Just read the documentation and import the corresponding map json. I believe everyone can do it. By the way, someone asked me where to find the map json file. We can search for the city we want in DataV.GeoAtlas and then select the json file to download.

Save the instance for backup

First of all, we need to know that if we want to highlight the map carousel, we need to use the dispatchActionAPI that comes with eharts, and this API is to be used with the eharts instance, so in vue we need to save the instance of the map initialization at the beginning.

<template>
    <div ref="myChart" id="myChart" class="gzMap"></div>
</template>
...
    data () {
        return {
                charts: '',
                option:{
                    ...
                }
        };
    },
...
    mounted () {
        this.$echarts.registerMap('Guangdong', gzData);//Get map data this.setMyEchart(); // Execute after the page is mounted},
    methods:{
        setMyEchart() {
            const myChart = this.$refs.myChart; // Get the DOM node through refif (myChart) {
                const thisChart = this.$echarts.init(myChart); // Initialize using the prototype Echarts this.charts = thisChart; // Save the instance thisChart.setOption(this.option); // Mount the written configuration items on Echarts }
        },
    }
...

When we initialize echarts at the beginning, we save the instance for later use. You can configure the rest of the configuration by yourself. The source code will be placed at the bottom of the article. You can take it if you are interested.

Set timer carousel

Because you need to set the carousel highlight, to put it simply, it means to give it a fixed amount of time to light up and then a prompt box to appear. Now by default, everyone has set up the normal mouse-in highlight and prompt box.

First, set up a timer method, then call the official highlight method and prompt box method in it, and flash it within the specified time.

...
    data () {
        return {
                mTime: '',
                charts: '',
                index: -1,
                option:{
                    ...
                }
        };
    },
...
    methods:{
        setMyEchart() {
            ...
            this.mapActive();
            ...
        },
        mapActive() {
            const dataLength = gzData.features.length;
            // Use timer to control highlight this.mTime = setInterval(() => {
                // Clear the previous highlight this.charts.dispatchAction({
                    type: 'downplay',
                    seriesIndex: 0,
                    dataIndex: this.index
                });
                this.index++;
                // The current subscript is highlighted this.charts.dispatchAction({
                    type: 'highlight',
                    seriesIndex: 0,
                    dataIndex: this.index
                });
                this.charts.dispatchAction({
                    type: 'showTip',
                    seriesIndex: 0,
                    dataIndex: this.index
                });
                if (this.index > dataLength) {
                    this.index = 0;
                }
            }, 2000);
        },
    }

We first set up a container to receive the timer and an index subscript in the data to represent which city is highlighted.

In mapActive(), first get the dataLength of all the cities on this map, because dispatchAction switches the highlight according to the subscript. If our index number is greater than the number of cities, it will not be displayed, so we have to control inedx to be below the number of all cities.

Set the timer to clear the previously highlighted cities first. If you don’t clear them, multiple cities will be highlighted at once, which is not the effect we want.

Then use our example to call the eharts method to achieve highlighting and prompt box pop-up, where dispatchAction receives several parameters, and type indicates the type you want to present, such as highlighting or prompt box. You can see the details on the official website.

Finally, we check whether the index exceeds the number of city dataLength. If so, we reset it to zero and start over. At this point, our carousel highlight is complete.

Adding mouse events

Of course, we can't just end it like this, we need to add some event effects, for example, when we move the mouse into the map, the carousel will stop and only highlight the city we selected.

    methods:{
        setMyEchart() {
            ...
            this.mapActive();
            ...
        },
        mouseEvents() {
            // Mouse enters this.charts.on('mouseover', () => {
                // Stop the timer and clear the previous highlight clearInterval(this.mTime);
                this.mTime = '';
                console.log(this.mTime);
                this.charts.dispatchAction({
                        type: 'downplay',
                        seriesIndex: 0,
                        dataIndex: this.index
                });
            });
            // Mouse out re-timer starts this.charts.on('mouseout', () => {
                this.mapActive();
            });
        },
      }

You can see that we have added an event for mouse entry. When we move the mouse to the map, the city with the previous corresponding index will be cleared. Of course, just adding mouse entry is not enough. In this way, when we slide the mouse once, it will not continue to rotate and highlight. We also need to add another mouse exit event to restart the timer.

At this point, a simple highlight carousel is completed. I put the specific source code here.

Summarize

This is the end of this article about echarts map carousel highlights. For more relevant echarts map carousel highlights, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!