"The back-end partners are coming to the pre-school side." Vue middle school can use Echarts to generate various charts. We have to learn the basic operations that must be learned

It's still the cover given by Xuemei

Directly enter the topic... What is used in vue is almost a process.

Introduction of Echarts

install

npm install echarts --save

Let's write an Echarts component and introduce it inside

import * as  echarts from 'echarts'

Getting started

If you haven't contacted Vue or Echarts' partners before, the way to understand is undoubtedly Echarts official documents Or major search engines.

This is undoubtedly my way of understanding, but when I read the official documents, I think the example given by the official is a little inconsistent with Vue's style, but I'll post it first to realize the simplest introduction:

<template>
  <div id="echarts" style="width: 600px; height: 600px"></div>
</template>
<script>
import * as  echarts from 'echarts'
export default {
  mounted() {
    this.createEcharts();
  },
  methods: {
    createEcharts() {
        // Initialize the ecarts instance based on the prepared dom
    var myChart = echarts.init(document.getElementById("echarts"));
    // Draw a chart  
    // The most important thing is to understand the role of each configuration. If there is nothing to say, practice makes perfect
    myChart.setOption({
      title: {
        text: "ECharts Getting started example",
      },
      tooltip: {},
      xAxis: {
        data: ["shirt", "cardigan", "Chiffon shirt", "trousers", "high-heeled shoes", "Socks"],
      },
      yAxis: {},
      series: [
        {
          name: "sales volume",
          type: "bar",
          data: [5, 20, 36, 10, 10, 20],
        },
      ],
    });
    }
  }
};
</script>

Just introduce this component into the app component. Let's see the initial effect.

problem

1) Change from DOM operation to ref

I wonder if you have found the problem:

In the official document, it is the document. Getelementbyid ("eckarts") that directly operates on the dom, which is actually different from Vue's concept.

In vue, we want to reduce direct dom operations as much as possible. How can we improve it here??

Let's clarify what document. Getelementbyid ("seals") gets. There is no doubt that the node information is obtained. When printed, you can see console.log (document. Getelementbyid ("seals");

Then we only need to obtain the node information in the way of vue, so we can use the ref attribute in vue.

<div id="echarts" ref="myEcharts" style="width: 600px; height: 600px"></div>

console.log(this.$refs.myEcharts);

Let's take a look

It's as like as two peas we got before.

In order to be more consistent with the method in Vue, we will change this case to be more flexible:

<template>
  <div ref="myEcharts" style="width: 600px; height: 600px"></div>
</template>
<script>
import * as  echarts from 'echarts'
  export default {
        data() {
            return {
                myEcharts: null,
                option:{
                    title: { 
                        text: 'General chart'
                    },
                    tooltip: {},
                    xAxis: {
                        data: ["shirt", "cardigan", "Chiffon shirt", "trousers", "high-heeled shoes", "Socks"]
                    },
                    yAxis: {},
                    series: [{
                        name: 'sales volume',
                        type: 'bar',
                        data: [5, 20, 36, 10, 10, 20]
                    }]
                }
            }
        },
        methods: {     
            initChart() {
                this.myEcharts = echarts.init(this.$refs.myEcharts);
                this.myEcharts.setOption(this.option);
            }
        },
        mounted () {
            this.initChart()
        }
    }
</script>

That's how it's written in vue.

2) Optimization ideas

1. If we need to use multiple styles of charts in the project, it is not impossible to import them directly. However, if we only use the line chart or histogram, we still recommend that we import them on demand, so that the packaging volume of the project will be smaller.

On demand introduction of official documents

2. In addition, we can encapsulate echarts into components. This is the best way to make everything dynamic.

In my opinion, I only consider the optimized use mode, not the performance. If there are any deficiencies, please point them out in time. Thank you very much.

This is the simplest histogram. I know everyone's needs are different. Here's how to learn.

A variety of charts

In the official documents, there are many cases. Even if we don't know anything, the cv method can be easily used as soon as it comes out.

Official example

And each chart has core code.

The so-called core code is various configuration items in option. The official also gave a detailed introduction to each configuration item.

The column of data is data, and others are configuration items. However, how to render depends on our business.

Click the document column in the top menu, and there will be one Configuration item manual

The most commonly used configuration items should be the one in the figure below, commonly known as the nine configuration items.

If you want to understand it quickly, it is recommended to directly click on the official example diagram of a complex point, and then check it with the configuration manual. I think this method should be the simplest.

It is better to teach people to fish than to teach them to fish

Because different businesses may have different needs, we need to learn how to learn more.

You can draw so many kinds of pictures with Echarts. I can't make a small Demo for everyone, and everyone's data is different, so we can't copy our homework, so let's just talk about how to learn to play this thing.

Reading official documents in my opinion is always the fastest way to understand it. (maybe people will say why they don't read all kinds of blogs, or directly Baidu and Google)

There are two reasons:

  1. Because of the version, the blog you search does not necessarily use the latest version. The iteration of technology is really very fast now.
  2. Secondly, blog content is rarely as complete as official documents. In addition, in the process of writing, most authors (including myself) will post what they think is very core. For some very detailed things, they are likely to be ignored.

Hands on try

  1. After reading the document, it should not be applied to the current project immediately. The best way is to write a demo to see the effect (personal idea)
  2. I feel shallow on paper. I absolutely know that I have to practice it.

It's done. It's done

Tags: Javascript Front-end Vue.js

Posted on Fri, 26 Nov 2021 00:12:40 -0500 by php-phan