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
Detailed explanation of how to introduce custom fonts (font-face) in CSS
Why did I use this? It all started with the makin...
Detailed explanation of Docker container data volumes
What is Let’s first look at the concept of Docker...
Example of converting JavaScript flat array to tree structure
Table of contents 10,000 pieces of data were lost...
Example of how to set WordPress pseudo-static in Nginx
Quoting Baidu's explanation of pseudo-static:...
Nexus uses API to operate
Nexus provides RestApi, but some APIs still need ...
Customize the style of the <input type="file"> element used when uploading files in HTML
In a web page, the <input type="file"...
TypeScript interface definition case tutorial
The role of the interface: Interface, in English:...
Share 20 excellent web form design cases
Sophie Hardach Clyde Quay Wharf 37 East Soapbox Rx...
The homepage design best reflects the level of the web designer
In the many projects I have worked on, there is b...
Related commands to completely uninstall nginx under ubuntu16.04
nginx Overview nginx is a free, open source, high...
Linux Dig command usage
Dig Introduction: Dig is a tool that queries DNS ...
DHTML objects (common properties of various HTML objects)
!DOCTYPE Specifies the Document Type Definition (...
Detailed tutorial on installing Python 3.8.1 on Linux
This example takes the installation of Python 3.8...
Tutorial on importing and exporting Docker containers
background The popularity of Docker is closely re...
Advanced explanation of javascript functions
Table of contents Function definition method Func...