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
CSS scroll bar style modification code
CSS scroll bar style modification code .scroll::-...
Detailed explanation of process management in Linux system
Table of contents 1. The concept of process and t...
MySQL database optimization: index implementation principle and usage analysis
This article uses examples to illustrate the prin...
Solution to the problem of English letters not wrapping in Firefox
The layout of text has some formatting requiremen...
Analysis and solution of a MySQL slow log monitoring false alarm problem
Previously, for various reasons, some alarms were...
Why the disk space is not released after deleting data in MySQL
Table of contents Problem Description Solution Pr...
MySQL green decompression version installation and configuration steps
Steps: 1. Install MySQL database 1. Download the ...
Summary of three ways to implement ranking in MySQL without using order by
Assuming business: View the salary information of...
Solutions for high traffic websites
First: First, confirm whether the server hardware ...
Detailed explanation of performance optimization ideas for React functional components
Optimization ideas There are two main optimizatio...
6 inheritance methods of JS advanced ES6
Table of contents 1. Prototype chain inheritance ...
Solution to incomplete text display in el-tree
Table of contents Method 1: The simplest way to s...
In-depth understanding of MySQL long transactions
Preface: This article mainly introduces the conte...
MySQL multi-table query detailed explanation
Eating well and getting enough rest sounds simple...
Oracle deployment tutorial in Linux environment
1. Environment and related software Virtual Machi...