SoFunction
Updated on 2025-02-28

echarts tooltip adaptive width and height to make the prompt box adapt to different screen size demo

echarts tooltip adaptive width and height to make the prompt box adapt to different screen size demo

Updated: October 10, 2023 10:39:38 Author: huyouoo
This article mainly introduces the echarts tooltip adaptive width and height to make the prompt box adapt to different screen sizes. Friends in need can refer to it for reference. I hope it can be helpful. I wish you more progress and get a promotion as soon as possible.

Introduction

  • "Customized prompt box styles to make your data more eye-catching"
  • "Optimize the location of the prompt box to make the information clear at a glance"
  • "Scrollbar function, easy to view large amounts of data"
  • "Personalized text colors to make your data more prominent"
  • "Adaptive width and height, so that the prompt box can adapt to different screen sizes"

demo 

tooltip: {
                trigger: "axis",
                backgroundColor: "#54AEEC", //Set background image rgba format                color: "#fff",
                height: "50px",
                padding: [15, 15],
                enterable: true,//Scrollbar                extraCssText: "max-width:60%;max-height:83%; overflow: auto; ",//Scrollbar                textStyle: {
                    color: "white", //Set text color                    padding: 10,
                    fontSize: 14
                },
                //Change the position of the prompt box and do not exceed the screen display                position: function(point, params, dom, rect, size) {
                // where point is the current mouse position,                //There are two properties in size: viewSize and contentSize, which are the sizes of the outer div and tooltip prompt boxes respectively                // The reference coordinate system for mouse coordinates and prompt box position is: the upper left corner of the outer div is the origin, the x-axis is right, and the y-axis is down                    // Prompt box location                    var x = 0; // x coordinate position                    var y = 0; // y coordinate position                    // Current mouse position                    var pointX = point[0];
                    var pointY = point[1];
                    // Prompt box size                    var boxWidth = [0];
                    var boxHeight = [1];
                    // boxWidth > pointX means that the prompt box cannot be placed on the left side of the mouse                    if (boxWidth > pointX) {
                        x = 5;
                    } else {
                        // Put it down on the left                        x = pointX - boxWidth;
                    }
                    // boxHeight > pointY means that the prompt box cannot be placed on the mouse                    if (boxHeight > pointY) {
                        y = 5;
                    } else {
                        // Put it on top                        y = pointY - boxHeight;
                    }
                    return [x, y];
                }
            },

The above is the detailed content of echarts tooltip adaptive width and height to make the prompt box adapt to different screen size demos. For more information about echarts tooltip adaptive width and height, please pay attention to my other related articles!

  • echarts
  • tooltip
  • Adaptive width and height

Related Articles

  • Javascript implements simple navigation bar

    This article mainly introduces the simple navigation bar for Javascript implementation in detail. The sample code in the article is introduced in detail and has certain reference value. Interested friends can refer to it.
    2021-06-06

  • In-depth understanding of webpack development environment and production environment

    This article mainly introduces an in-depth understanding of the webpack development environment and production environment, and introduces in detail what is the development environment and production environment and configuration. It is very practical. Friends who need it can refer to it.
    2018-11-11

  • Regarding the causes and solutions for JS precision loss

    When dealing with complex numerical calculations in some extreme cases, we may encounter such a situation, which means that the calculation result loses accuracy. The following article mainly introduces the reasons and solutions for the loss of JS accuracy. Friends who need it can refer to it.
    2024-01-01

  • js general sliding category

    Can implement sliding door effect code class
    2008-04-04

  • Detailed explanation of the execution context and call stack in JavaScript

    This article mainly introduces the execution context and call stack in JavaScript. Those who are interested in this can refer to the following
    2021-04-04

  • JS code that can convert word into html

    This very short code can be used to transfer word into HTML format. Of course, word itself also brings it, save it as it has it. Friends who like it can try it.
    2010-04-04

  • javascript script to call js functions or variables of other pages

    When developing the web, sometimes you need to use javasript functions and variables written on other pages. If the pop-up window needs to use the functions in the parent window, Framework 1 needs to use the functions in Framework 2.
    2008-05-05

  • Three ways to remove duplication in arrays in JavaScript

    This article introduces the method of removing duplications from js arrays through three methods. It is very practical. Interested friends will learn together.
    2016-04-04

  • Analysis of the usage of key names as variables in javascript json object tips

    This article mainly introduces the key name as variable usage of javascript json object tips, and analyzes the relevant usage techniques of json object variable operation in combination with examples. Friends who need it can refer to it
    2019-11-11

  • js functional programming learning notes

    I read the functional programming section these two days ago. I feel like I have learned a lot. I saw that other people’s codes were pretty. Now the code I wrote is a bit messy, so I still have to learn other people’s programming modes
    2017-03-03

Latest Comments