Use Echarts in Vue

Echarts is a domestic, very excellent visualization library, for a large amount of data processing and visualization has a very strong support. Now prepare to learn the basics of Echarts while working with VUE to encapsulate corresponding better, more perfect components. Vue: I’m new to learning, too.

  • Vue-cli creates projects and uses Echarts for the first time
vue create echarts-vue
Create a vUE project
Copy the code
  • Install echarts (NPM is recommended here, and specify the version number of echarts, preferably not the latest version of echarts).
NPM install [email protected] - saveCopy the code

Try to install echarts below @4.90 so you don’t get a lot of weird error messages.

  • Once you have echarts installed, you need to import echarts and use echarts. (configured in main.js)
import echarts from 'echarts'
// first reference in use
Vue.use(echarts)
Copy the code
  • The idea of componentization uses Echarts

Create an Echarts folder in the SRC /components/ folder of your vue project, where you can later encapsulate your own echarts private components.

The code for the specific component file is as follows, along with comments in the code to understand the use of Echarts in a Vue project:

<template>
    <div>// 1. Prepare a container for your Echarts chart. Make sure it has a width and height, otherwise you can't see the rendered graphics<div id="main"></div>
    </div>
</template>

<script>
//2. Reference the echarts library
import echarts from 'echarts'
    export default {
        data() {
            return {
                // Set the icon's data in data
                students: ['Ming'.'little red'.'yellow'.'little blue'.'the little green'].fenshu: [88.64.98.88.92]}},mounted() {
            // Initialize echarts to get an echarts object
            The method of creating an echarts object is the init() method in echarts
            let mycharts = echarts.init(document.getElementById("main"));// Initialize the echarts object
            
            // Create and initialize an Echarts configuration item object option for all echarts ICONS
            // From the configuration of the option object, which can be written in data, via the parent component, etc
            // The component passes the value to use.
            const option = {
                // This is the x-coordinate component of the echarts object
                // Category represents the category, which is the thing above the horizontal axis
                //data Indicates the data corresponding to the category
                xAxis: {
                    type: 'category'.data: this.students
                },
                // The Y-axis component of the echarts object
                // Type also indicates the source and type of data to be represented on the Y-axis
                yAxis: {
                    type: "value",},// Series means series, which represents the core of the entire icon, in terms of data and the type and style of the entire icon
                series: [{name: 'mathematics'.// The line chart shows the score of English
                        type: 'line'.// Type indicates what type of icon is used to render this group of data, obviously a line graph
                        data: this.fenshu // The source of the line graph is Fenshu in data}, {name: 'English'.// The bar chart is used to represent the English subjects
                        type: 'bar'.// Similarly, this icon uses both a line chart and a bar chart
                        data: this.fenshu // If the data source is the same, the math and English scores are the same.
                        // Of course it is impossible in reality.}}]// Finally, the echarts object is used to set the pre-written data to display the iconmycharts.setOption(option); }},</script>

<style scoped>
    #main{
        width: 500px;
        height: 500px;
    }
</style>
Copy the code

Hook Mounted Is used to initialize echarts objects and set the last echarts data. This will not result in a mismatch between rendering and attempt. Finally use the command:

Use your wrapped component in app. vue, and then run the following command in terminal:

npm run serve
Copy the code

Run the program and see the results!