• Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

1- How to use Echarts in VUE

The installation

npm install echarts --save

The introduction of

// in main.js
import echarts from 'echarts' 
Vue.prototype.$echarts = echarts
Copy the code

use

//HTML
<div ref="chartDom" id="chartDom"  style="width:100%; height:100%" ></div>

//JS
data(){
    return{
        myChart:null}}// The DOM is required to build echarts, so the method to build echarts needs to be executed again in the lifecycle
mounted(){
	this.loadChart()
},
// Because loading echarts takes a lot of performance, disable listening on this page before switching to another page
beforeDestory(){
    if(this.myChart){
        return
    }
    window.removeEventListener("resize".function() {
        this.myChart.resize()
    });
}

methods: {
    / / load echarts
    loadChart() {
        const chartDom = this.$refs.chartDom; 
        // If determines to initialize and configure myChart container after it is generated
        if (chartDom) {
            this.myChart = this.$echarts.init(chartDom);// Initialize the container
            const option = {};// Write configuration item data for your icon, see heading 2
            option && this.myChart.setOption(option);// Render the configuration to the container
            // Implement echarts responsiveness by listening for the browser window to zoom and expand
            window.addEventListener("resize".function() {
                this.myChart.resize(); }); }}}Copy the code

2- Echarts Main configuration items

In the front-end project, the types of statistical charts frequently used include bar chart, pie chart, line chart and so on. First, we determine the chart type according to the design diagram given by THE UI. We find the most similar structure in the echarts official website example and adjust its style by modifying the configuration item.

Options configuration is the soul of Echarts, and the API is extremely powerful, you can do almost any style and function you want.

Legend — Legend component

The legend component displays different sets of symbols, colors, and names. You can control which series are not shown by clicking on the legend.

Grid — Grid components in a coordinate system

In the rectangular coordinate system drawing grid, a single grid can be placed up and down two X axes, two Y axes left and right. Line charts and bar charts can be drawn on the grid

In ECharts 2.x, there can be at most one grid component in a single ECharts instance. In ECharts 3, there can be any grid component.

XAxis — The X axis in the grid

In general, a grid component can only have up or down two X axes, and the style of x axis can be configured here

YAxis — The Y-axis in the grid

In general, a grid component can only have up or down two Y-axes. The Y-axis styles can be configured here

Title — The title component

Any number of header components can exist in ECharts 3

option={
    title:[{title 1 configuration}, {title 2 configuration},]}Copy the code

Serise — Chart type and associated configuration

Specific to see