Summary of some problems encountered when integrating echarts with vue.js

Summary of some problems encountered when integrating echarts with vue.js

Preface

I'm currently working on the data analysis platform of Beetlex. During the development of this product, a large number of data chart display functions are involved. Since the front end of the product is developed using vuejs, there will be more or less problems when integrating echarts. Here I will mainly explain the problems encountered and their solutions.

Before explaining, let me share the actual usage effect. For details, please visit http://data.beetlex.io

Control ID

In vuejs, commonly used functions are often encapsulated into components. Similarly, in order to reuse different charts, they are also encapsulated into components for use. There is a problem in this encapsulation process, which is the ID problem of the chart element DIV, so the ID of the chart DIV constructed by the component must also ensure uniqueness. You can generate an ID by encapsulating a simple function

Vue.prototype.$getID = function () {
    page.controlid = page.controlid + 1;
    return page.controlid;
};

Use this method to get the dynamic element ID

mounted(){
     this.ChatID = "chat_" + this.$getID();
}
<div :id="ChatID">
​
</div>

Initialization Problem

When using Vuejs, some initialization is often performed in the mounted() method, but if you initialize echarts here, you need to be careful. After all, mounted does not mean that all elements are constructed. This will cause the failure to obtain elements and fail to initialize echarts. Therefore, you need to put echarts into a method and call it manually according to the situation, or delay the call for initialization; for convenience, setTimeout is used for initialization.

setTimeout(() => {
    var dom = document.getElementById(this.ChatID);
    this.Chat = echarts.init(dom, 'macarons');
    this.Chat.setOption(this.ChatOption, true);
}, 300);

Display switching problem

If you need to switch the display of a chart, it is best not to use syntax such as v-if, because such syntax will not build related elements in the DOM, causing echarts to create Canvas elements and fail to work properly. The best way is to switch the display by switching CSS to ensure that the content of the constructed DOM elements is not changed.

Adaptive layout

Oftentimes, large changes in the form or component switching will cause echarts to be unable to adapt to the current layout. In this case, you need to manually call the resize method of echarts to reset the display layout. In fact, the situation in SPA applications is much more complicated. It has full-screen display, the form needs to be changed, and it is multi-level nested after componentization, so it is difficult to determine where echarts is used. In order to meet the needs of different situations, a common behavior is needed to trigger these changes.

var __resizeHandlers = [];
function __addResizeHandler(handler) {
    __resizeHandlers.push(handler);
};
function __resize() {
    setTimeout(() => {
        __resizeHandlers.forEach(v => {
            v();
        });
    }, 100);
}
window.onresize = function () {
    __resizeHandlers.forEach(v => {
        v();
    });
};
Vue.prototype.$addResize = function (handler) {
    __addResizeHandler(handler);
};
Vue.prototype.$resize = function () {
    __resize();
};

Just implement a simple resize registration and calling mechanism, and define the following code in the echarts component to solve it perfectly

this.$addResize(r => {
     if (this.Chat)
            this.Chat.resize();
});

Appendix: Download and use Echarts

You can get ECharts in the following ways.

1. Get the official source code package from the Apache ECharts (incubating) official website download interface and build it.

2. Get it from ECharts' GitHub.

3. Get echarts through npm, npm install echarts --save,

4. Import through CDN such as jsDelivr

If the following figure appears, it is successful.


Introduction

(Prerequisite for downloading)

1. Directly import the built echarts file through tags:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <!-- Import ECharts file-->
    <script src="echarts.min.js"></script>
</head>
</html>

2. Global reference

In vue's main.js

// Import echarts
import echarts from 'echarts'
Vue.prototype.$echarts = echarts

3. Introduce echarts directly into the component,

(If you want to use echarts in other components, you must reintroduce it)

import echarts from "echarts";

Summarize

This is the end of this article about the problems encountered when integrating echarts with vue.js. For more information about the problems of integrating echarts with vue.js, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope you will support 123WORDPRESS.COM in the future!

You may also be interested in:
  • JS uses canvas technology to imitate echarts bar chart
  • vue print.js print supports Echarts chart operation
  • Echarts.js cannot introduce problem solution
  • About vue combined with native js to solve echarts resize problem
  • echarts.js dynamically generates multiple charts using vue encapsulation component operations
  • Detailed explanation of two ways to introduce Echarts to the web in IDEA (using js files and maven dependency import)
  • Example of using the Baidu ECharts plugin to draw a pie chart using JavaScript
  • JavaScript ECharts Usage Explanation

<<:  Detailed installation and configuration of hadoop2.7.2 under ubuntu15.10

>>:  How to generate Hive table creation statement comment script in MySQL metadata

Recommend

Comprehensive understanding of html.css overflow

Comprehensive understanding of html.css overflow ...

MySQL 5.7.18 installation and configuration tutorial under Windows

This article shares the installation and configur...

CenOS6.7 mysql 8.0.22 installation and configuration method graphic tutorial

CenOS6.7 installs MySQL8.0.22 (recommended collec...

Specific use of Linux which command

We often want to find a file in Linux, but we don...

jQuery realizes image highlighting

It is very common to highlight images on a page. ...

MySQL performance optimization tips

MySQL Performance Optimization MySQL is widely us...

Pitfalls and solutions encountered in MySQL timestamp comparison query

Table of contents Pitfalls encountered in timesta...

Vue implements pull-down to load more

Developers familiar with Element-UI may have had ...

How to add automatic completion commands for docker and kubectl on Mac

Introduction to kubectl kubectl is a command line...

Example code for implementing an Upload component using Vue3

Table of contents General upload component develo...

Vue simulates the shopping cart settlement function

This article example shares the specific code of ...

Brief introduction and usage of Table and div

Web front end 1 Student ID Name gender age 01 Zha...

Example code for setting hot links and coordinate values ​​for web images

Sometimes you need to set several areas on a pict...

Detailed tutorial on downloading mysql on Windows 10

MySQL versions are divided into Enterprise Editio...

How to quickly delete all tables in MySQL without deleting the database

This article uses an example to describe how to q...