Echarts realizes large visual screen

Take you step by step to make a large visual screen, and easily complete the final homework.
Pay attention to the official account " Python crawler and data analysis " and reply to " visual big screen " to obtain code and data

Technologies involved: Echarts, HTML, css, JavaScript

Echarts official website:
https://echarts.apache.org/handbook/zh/concepts/axis/

Contents
1. echarts displays multiple pictures at the same time
2. Use css to optimize the interface
3. Add title
4. Use Ajax to read data
5. Add watermark

1. echarts displays multiple images at the same time

Figure 1-1
When I first started learning echarts, I learned it one by one. Enter Figure 1-1 below, declare a div, specify the height and width, and then put the graph into the div. The easiest way to display multiple images at the same time is to declare multiple divs, as shown in Figure 1-2 below.

Figure 1-2

2. Use css to optimize the interface

After dealing with the problem of displaying multiple images, you should consider adjusting the image to a specific position. At this time, you can adjust the position of the html tag through css. As shown in Figure 1-2, move the picture below to the same row as the first picture

Figure 2-1
I will not talk about the meaning of these css parameters.
Note: The default for HTML elements, i.e. no positioning, follows normal document flow objects. Statically positioned elements are not affected by top, bottom, left, right.

3. Add title

In Figure 3-1
, the two subtitles are buttons, and the title in the middle is actually a gray bottom (div) with text added. It is simple to implement by declaring 4 button tags, then 4 h3 tags, and finally pass css to The h3 tag is moved to the corresponding button.

Figure 3-2
briefly explains the parameters:

• Convert bounding box from rectangle to parallelogram

Just add the parameter —transform: skew(30deg) to the css, as follows:

.button1 {
    
    
    background-color: white;
    border: 2px solid #EEEEEE;
    color: black;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 9px 2px;
    cursor: pointer;
    width: 140px;
    transform: skew(30deg);
    position: relative;
    left: 470px;
}

• Priority: z-index :999, this is to prevent this tag from being covered by other tags, the larger the number, the higher the priority.

4. Use Ajax to read data

I have always avoided using values ​​directly when writing code, but using variables, which can avoid a lot of modification when data changes.
The Json file is as follows:

{
    
    
"消费地点":["教学楼","食堂","体育馆","田径场","操场"],
"用户人数":[35, 25, 9, 21, 18]
}

Figure 4-1
Declare two empty lists -> loop to read data in the method -> call the method
Here the parameter async: false in Ajax is the key point, this parameter cancels the asynchronous feature of Ajax, so that Ajax can be ordered from top to bottom implement.

5. Add watermark

Adding a watermark is very simple, just add a piece of code to the body tag.

function WaterMarker(str) {
    
    
    var can = document.createElement('canvas');
    var body = document.body;
    body.appendChild(can);
    can.width = 300; // 画布的宽
    can.height = 200; // 画布的高度
    can.style.display = 'none';
    var cans = can.getContext('2d');
    cans.rotate(-10 * Math.PI / 180); // 画布里面文字的旋转角度
    cans.font = "25px Microsoft JhengHei"; // 画布里面文字的字体
    cans.fillStyle = "rgba(17, 17, 17, 0.50)"; // 画布里面文字的颜色,第四个参数为透明度
    cans.textAlign = 'left'; //画布里面文字的水平位置
    cans.textBaseline = 'Middle'; // 画布里面文字的垂直位置
    cans.fillText(str, can.width / 3, can.height / 2); // 画布里面文字的间距比例
    body.style.backgroundImage = "url(" + can.toDataURL("image/png") + ")"; // 把画布插入到body中
}

WaterMarker("coder 谢公子");

Pay attention to the official account " Python crawler and data analysis " and reply to " visual big screen " to obtain code and data