How to use echarts to visualize components in Vue

echarts component official website address: https://echarts.apache.org/examples/zh/index.html

1. Find the address of the scaffolding project, execute cnpm install echarts, and install the echarts component (the address of the scaffolding is the address of your vue project)

(E:\demo\vuepro) This is my project address, vuepro is the project name

2. Import on demand to speed up opening

//Import echarts componentimport echarts from "echarts"
    //Introduce basic template let echart = require('echarts/lib/echarts')
    //Introduce the bar chart component require('echarts/lib/chart/bar')
    //Introduce tooltip and title components require('echarts/lib/component/tooltip')
    require('echarts/lib/component/title')

3. Prepare div tags to accommodate report graphics

The div id is used to bind the echarts plug-in

 <div id="chart" style="width: 50%; height: 400px;">
 </div>

4. Contents of the script tag

//Import echarts componentimport echarts from "echarts"
    //Introduce basic template let echart = require('echarts/lib/echarts')
    //Introduce the bar chart component require('echarts/lib/chart/bar')
    //Introduce tooltip and title components require('echarts/lib/component/tooltip')
    require('echarts/lib/component/title')
            export default{
                name: 'App',
                data(){
                  return {
                     chartColumn:null
                  }
                },
                methods:{
                  initData(){
                    let dt = document.querySelector("#boss")

                    this.chartColumn=echart.init(dt)
                    this.chartColumn.setOption(
                       //Template in Examples)

                  }
                },
                mounted(){
                    this.initData()
                }
             }

For your convenience, I put here a complete template for introducing echarts visualization components in Vue. You can just copy and use it.

<template>
    <div id="boss" style="width: 500px;height: 500px;">
        
    </div>
</template>

<script>
    //Import echarts componentimport echarts from "echarts"
    //Introduce basic template let echart = require('echarts/lib/echarts')
    //Introduce the bar chart component require('echarts/lib/chart/bar')
    //Introduce tooltip and title components require('echarts/lib/component/tooltip')
    require('echarts/lib/component/title')
            export default{
                name: 'App',
                data(){
                  return {
                     chartColumn:null
                  }
                },
                methods:{
                  initData(){
                    let dt = document.querySelector("#boss")
            
                    this.chartColumn=echart.init(dt)
                    this.chartColumn.setOption(
                       //Template in Examples)
            
                  }
                },
                mounted(){
                    this.initData()
                }
             }
</script>

<style>
</style>

Examples:

<template>
    <div id="boss" style="width: 500px;height: 500px;">

    </div>
</template>

<script>
    import echarts from "echarts"
    //Introduce basic template let echart = require('echarts/lib/echarts')
    //Introduce the bar chart component require('echarts/lib/chart/bar')
    //Introduce tooltip and title components require('echarts/lib/component/tooltip')
    require('echarts/lib/component/title')
            export default{
                name: 'App',
                data(){
                  return {
                     chartColumn:null
                  }
                },
                methods:{
                  initData(){
                    let dt = document.querySelector("#boss")

                    this.chartColumn=echart.init(dt)
                    this.chartColumn.setOption(
                    //The following is the echarts visualization component {
                          tooltip: {
                              trigger: 'axis',
                              axisPointer: { // Use axis to trigger tooltip
                                  type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
                              }
                          },
                          legend: {
                              data: ['Direct', 'Mail Ad', 'Affiliate Ad', 'Video Ad', 'Search Engine']
                          },
                          grid: {
                              left: '3%',
                              right: '4%',
                              bottom: '3%',
                              containLabel: true
                          },
                          xAxis:
                              type: 'value'
                          },
                          yAxis: {
                              type: 'category',
                              data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                          },
                          series: [
                              {
                                  name: 'Direct',
                                  type: 'bar',
                                  stack: 'total',
                                  label: {
                                      show: true
                                  },
                                  emphasis:
                                      focus: 'series'
                                  },
                                  data: [320, 302, 301, 334, 390, 330, 320]
                              },
                              {
                                  name: 'Mail Ad',
                                  type: 'bar',
                                  stack: 'total',
                                  label: {
                                      show: true
                                  },
                                  emphasis:
                                      focus: 'series'
                                  },
                                  data: [120, 132, 101, 134, 90, 230, 210]
                              },
                              {
                                  name: 'Affiliate Ad',
                                  type: 'bar',
                                  stack: 'total',
                                  label: {
                                      show: true
                                  },
                                  emphasis:
                                      focus: 'series'
                                  },
                                  data: [220, 182, 191, 234, 290, 330, 310]
                              },
                              {
                                  name: 'Video Ad',
                                  type: 'bar',
                                  stack: 'total',
                                  label: {
                                      show: true
                                  },
                                  emphasis:
                                      focus: 'series'
                                  },
                                  data: [150, 212, 201, 154, 190, 330, 410]
                              },
                              {
                                  name: 'Search Engine',
                                  type: 'bar',
                                  stack: 'total',
                                  label: {
                                      show: true
                                  },
                                  emphasis:
                                      focus: 'series'
                                  },
                                  data: [820, 832, 901, 934, 1290, 1330, 1320]
                              }
                          ]
                      }
                      //The component ends here)

                  }
                },
                mounted(){
                    this.initData()
                }
             }
</script>

<style>
</style>

Display effect:

This is the end of this article about how to use echarts visualization components in Vue. For more relevant Vue echarts visualization component content, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!

You may also be interested in:

JavaScript data visualization: ECharts map making
Implementation of drag data visualization function in Vue based on Echarts
Complete step-by-step record of using Echarts visualization library in Vue
An example of a method for displaying data visualization on a large screen based on vue+echarts
Vue Echarts implements a visual world map code example
JavaScript Echart visualization learning

<<: Centos8 (minimum installation) tutorial on how to install Python3.8+pip

>>: MySQL 8.0 error The server requested authentication method unknown to the client solution