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:
|
<<: 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
Recommend
Solutions to VMware workstation virtual machine compatibility issues
How to solve VMware workstation virtual machine c...
MySQL 8.0.23 Major Updates (New Features)
Author: Guan Changlong is a DBA in the Delivery S...
Decompression, installation, backup and restore of MySQL under Windows environment
The system environment is server2012 1. Download ...
Implement a simple search engine based on MySQL
Table of contents Implementing a search engine ba...
MySQL-group-replication configuration steps (recommended)
MySQL-Group-Replication is a new feature develope...
How to quickly set the file path alias in react
React is a JavaScript library for building user i...
Tutorial on installing and configuring MySql5.7 in Alibaba Cloud ECS centos6.8
The default MySQL version under the Alibaba Cloud...
JavaScript css3 to implement simple video barrage function
This article attempts to write a demo to simulate...
React non-parent-child component parameter passing example code
React is a JAVASCRIPT library for building user i...
Basic tutorial on controlling Turtlebot3 mobile robot with ROS
Chinese Tutorial https://www.ncnynl.com/category/...
A brief introduction to Linux environment variable files
In the Linux system, environment variables can be...
How to solve the problem of FileZilla_Server:425 Can't open data connection
When installing FileZilla Server on the server, t...
MySQL 8.0.24 installation and configuration method graphic tutorial
This article shares the installation tutorial of ...
React configuration px conversion rem method
Install related dependencies npm i lib-flexible -...
How to install Odoo12 development environment on Windows 10
Preface Since many friends say they don’t have Ma...