Writing in the front

Recently, due to some force majeure factors, I changed my job to a company providing college education services. Right after I joined the company, I just caught up with the reconstruction of the PC side project. I was mainly responsible for the module of data visualization.

So we have this article, this article is divided into two parts

How to use Echarts elegantly in your Project

In this article I will mainly introduce

  • How do I use Echarts in a VUE project
  • How do I make sure that Echarts displays properly on the page and changes with the window

I hope you can master the correct way of using Echarts in the project after reading it, and step on fewer holes on my basis.

Without further ado, let’s begin.

Use Echarts in vUE projects

The installation

To install echarts, run the command line tool NPM install echarts –save or NPM I echarts -s to install echarts into the project production environment.

Once installed, we need to open the main.js file, find a place to import Echarts, and mount it into the vue prototype as follows

import echarts from 'echarts'
Vue.prototype.$echarts = echarts
Copy the code

use

After simply installing and mounting the prototype, we can use it directly on the page we need.

First we need to create a container, an empty div that can hold Echarts

<div ref="myChart" style="width:100%; height:520px" id="myChart"></div>
Copy the code

Here I use ref to get DOM nodes, mainly to avoid initializing Echarts containers before they are generated.

After creating the container, you can use the data to render Echarts. For your convenience, I post a public code here. If you need to use Echarts in your project, you can copy it directly

mounted(){
	this.setMyEchart()  // Execute after the page is mounted
},
methods: {
    setMyEchart() {
        const myChart = this.$refs.myChart;  // Get the DOM node from ref
        if (myChart) {
            const thisChart = this.$echarts.init(myChart);  // Call the Echarts initialization method using the prototype
            const option = {};  // The configuration of the graph required in {} can be copied in the official case after modification
            thisChart.setOption(option);  // Mount the written configuration items to Echarts
            window.addEventListener("resize".function() {
                thisChart.resize();  // Echarts changes the page size after the page size changes}); }}}Copy the code

Make Echarts appear normally on the page

After the basic structure is written, you can go to the official Echarts example to find the diagram you want, copy the option content and paste it into the Option object on the page.

I’m going to show you a radar diagram here, and when I paste the code, the page looks like this.

The width is only 100px. This is because Echarts doesn’t recognize percentages, so it will recognize 100% as 100px. When we change the browser width and height, trigger thischart.resize (); The graph will display normally, but we can’t change the width of the browser after the user comes in. The official recommendation is that we set the specific width of the Echarts container to ensure the display, which is obviously not a good fit.

So we should set the dynamic width: in this step we first need to have a width reference (this can be a percentage width, since it will be converted to a true pixel width when we get the width), either a chart wrap or adjacent DOM nodes of the same width.

content 

document.querySelector('#myChart').style.width =  document.querySelector('.content').clientWidth
Copy the code

This allows you to set the width to a specific width at the beginning and adjust the browser width to a different height.

As for the content to find their own needs to modify it, more configuration items can refer to this link for learning.

conclusion

After the above learning, I believe you have a preliminary understanding of the use of Echarts, in fact, it is relatively simple, the important thing is that you want to show what, after selecting a copy of our template can be.

In the next installment, I’ll focus on how to populate Echarts with data returned by the API interface.

How to Use Echarts elegantly in A Project

Finally give all the code bar, for your reference.

<div ref="myChart" style="width:100%; height:520px" id="myChart"></div> <div class="content"></div> <script> mounted() { document.querySelector("#myChart").style.width = document.querySelector(".content").clientWidth; this.setMyEchart(); }, methods: { setMyEchart() { const myChart = this.$refs.myChart; If (myChart) {const thisChart = this.$echarts.init(myChart); // Const option = {confine: {confine: true, enterable: true}, legend: TextStyle: {coFlor: "#202124", fontWeight: "bold", fontSize: "14"}, data: [" student ", "class average "]}, calculable: true, color: ["#00CA90", "#4285F4"], radar: {name: {textStyle: {color: "# FFF ", backgroundColor: "#999", fontSize: "10", borderRadius: 3, PADDING: [3, 5]}}, Indicator: [{name: "attendance ", Max: 1}, {name: "assignment submission rate ", Max: 1}, {name:" topic participation rate ", Max: 1}, {name: "number of stars ", Max: 1}, {name:" interactive participation rate ", Max: 1} : 1}], the radius: [{80}, series: type: "radar", data: [{value: [0.85, 0.94, 0.24, 0.56, 0.23], name: "students"}, {value: [0.90, 0.85, 0.37, 0.85, 0.52], name: "class average"}}}]]; Thischart.setoption (option); thischart.setoption (option); Function () {thischart.resize (); function() {thischart.resize (); // Echarts also changes the page size}); } } } } </script>Copy the code

conclusion

The above is the whole content of this article, if there are incorrect places welcome to correct.

Thank you for reading. If you find it useful, please like it/forward it.

Front-end in-depth series is a pit series, which is an exploration and summary of the problems AND pits I have encountered in work and study. It is recorded and shared here, and also a reflection and questioning of my skills.

The front end road is diffuse, step pit ceaseless.

Front-end in-depth series continues to be updated…

More than 2020-01-13.