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