6. Order browsing module (omitted)

7. Data statistics module

1. Load data report components through routes (omitted)

2. Install Echarts and render Demo diagrams

2.1 There are five steps to use:

(1) Import echarts(two methods)

import echarts from 'echarts'
// Require is used for import because init in step (3) is wrong
let echarts =require('echarts')
Copy the code

(2) Prepare a Dom with size (width and height) for ECharts

<div id="main" style="width: 600px; height:400px;"></div>
Copy the code

(3) Initialize the echarts instance based on the prepared DOM

var myChart = echarts.init(document.getElementById('main'));
Copy the code

(4) Prepare data and configuration items

var option = {
            title: {
                text: 'Getting started with ECharts'
            },
            tooltip: {},
            legend: {
                data: ['sales']},xAxis: {
                data: ["Shirt"."Cardigan"."Chiffon shirt."."Pants"."High heels"."Socks"]},yAxis: {},
            series: [{
                name: 'sales'.type: 'bar'.data: [5.20.36.10.10.20]]}};Copy the code

(5) Use the configuration items and data just specified to display the chart.

 myChart.setOption(option);
Copy the code

The entire code:

<template>
    <div class="report">
        <! -- Crumbs -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">Home page</el-breadcrumb-item>
      <el-breadcrumb-item>Data statistics</el-breadcrumb-item>
      <el-breadcrumb-item>Data report</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
        <! 2. Prepare a Dom with size (width and height) for ECharts.
    <div id="main" style="width: 600px; height:400px;"></div>
    </el-card>
    </div>
</template>

<script>
Import echarts
// import echarts from 'echarts'
let echarts =require('echarts')

export default {
    data(){
        return{}},methods:{

    },
    created(){},
    // mounted executes after dom rendering is complete
    mounted(){
        // 3. Initialize the echarts instance based on the prepared DOM
        
        var myChart = echarts.init(document.getElementById('main'));

        // 4. Prepare data and configuration items
        var option = {
            title: {
                text: 'Getting started with ECharts'
            },
            tooltip: {},
            legend: {
                data: ['sales']},xAxis: {
                data: ["Shirt"."Cardigan"."Chiffon shirt."."Pants"."High heels"."Socks"]},yAxis: {},
            series: [{
                name: 'sales'.type: 'bar'.data: [5.20.36.10.10.20]]}};// 5. Use the configuration items and data just specified to display the chart.myChart.setOption(option); }}</script>

<style lang="less" scoped>
.report {
    margin: 20px;
}
</style>
Copy the code

3. Methods to merge two objects

Object.assign(b,a) adds an Object from A to b, as shown in the following example:

 let a = {
            age: 18.name: 'xiaofeng',}let b = {
            weight: 60.height: 180,}Object.assign(b, a)
        console.log(a);
        console.log(b);
Copy the code

Output result:

If two objects have attributes of the same name,

 let a = {
            age: 24.name: 'xiaofeng',}let b = {
            age: 18.name: 'jiaxin'
        }
        Object.assign(b, a)
        console.log(a);
        console.log(b);
Copy the code

Output result:

The same property will be the same in both objects and will be the property in B

Also, a has the same and different properties as B:

 let a = {
            age: 24.name: 'xiaofeng',}let b = {
            age: 18.name: 'jiaxin'.weight: 55
        }
        Object.assign(b, a)
        console.log(a);
        console.log(b);
Copy the code

Output: