Vue使用echarts可視化組件的方法
更新時(shí)間：2021年07月28日 09:32:21 作者：你就叫醬油
這篇文章主要介紹了Vue使用echarts可視化組件的方法,本文通過實(shí)例代碼案例給大家詳細(xì)介紹，需要的朋友可以參考下
echarts組件官網(wǎng)地址:https://echarts.apache.org/examples/zh/index.html
1.找到腳手架項(xiàng)目所在地址，執(zhí)行cnpm install echarts，安裝echarts組件（腳手架的地址就是你vue項(xiàng)目的地址）
（E:\demo\vuepro）這是我的項(xiàng)目地址，vuepro為項(xiàng)目名
2.按需導(dǎo)入，以加快打開速度
//引入echarts組件
import echarts from "echarts"
// 引入基本模板
let echart = require('echarts/lib/echarts')
// 引入柱狀圖組件
require('echarts/lib/chart/bar')
// 引入提示框和title組件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')
3.準(zhǔn)備div標(biāo)簽 容納報(bào)表圖形
div的 id用于綁定echarts插件
<div id="chart" style="width: 50%; height: 400px;"> </div>
4.script標(biāo)簽的內(nèi)容
//引入echarts組件
import echarts from "echarts"
// 引入基本模板
let echart = require('echarts/lib/echarts')
// 引入柱狀圖組件
require('echarts/lib/chart/bar')
// 引入提示框和title組件
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(
//Examples中的模板
)
}
},
mounted(){
this.initData()
}
}
為了方便大家的使用，我在這里放一個(gè)在Vue中引入echarts可視化組件的完整模板，大家直接復(fù)制使用即可
<template>
<div id="boss" style="width: 500px;height: 500px;">
</div>
</template>
<script>
//引入echarts組件
import echarts from "echarts"
// 引入基本模板
let echart = require('echarts/lib/echarts')
// 引入柱狀圖組件
require('echarts/lib/chart/bar')
// 引入提示框和title組件
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(
//Examples中模板
)
}
},
mounted(){
this.initData()
}
}
</script>
<style>
</style>
案例：
<template>
<div id="boss" style="width: 500px;height: 500px;">
</div>
</template>
<script>
import echarts from "echarts"
// 引入基本模板
let echart = require('echarts/lib/echarts')
// 引入柱狀圖組件
require('echarts/lib/chart/bar')
// 引入提示框和title組件
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(
//以下為echarts可視化組件
{
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]
}
]
}
//組件到此結(jié)束
)
}
},
mounted(){
this.initData()
}
}
</script>
<style>
</style>
顯示效果：
到此這篇關(guān)于Vue使用echarts可視化組件的方法的文章就介紹到這了,更多相關(guān)Vue echarts可視化組件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
您可能感興趣的文章:
- 詳解Vue2+Echarts實(shí)現(xiàn)多種圖表數(shù)據(jù)可視化Dashboard（附源碼）
- Vue使用Echarts實(shí)現(xiàn)數(shù)據(jù)可視化的方法詳解
- 基于vue+echarts數(shù)據(jù)可視化大屏展示的實(shí)現(xiàn)
- vue中的echarts實(shí)現(xiàn)寬度自適應(yīng)的解決方案
- Vuejs通過拖動(dòng)改變?cè)貙挾葘?shí)現(xiàn)自適應(yīng)
- Vue實(shí)現(xiàn)input寬度隨文字長(zhǎng)度自適應(yīng)操作
- Vue中使用Echarts可視化圖表寬度自適應(yīng)的完美解決方案
相關(guān)文章
在vue中通過render函數(shù)給子組件設(shè)置ref操作
這篇文章主要介紹了在vue中通過render函數(shù)給子組件設(shè)置ref操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-11-11
前端vue3中的ref與reactive用法及區(qū)別總結(jié)
這篇文章主要給大家介紹了關(guān)于前端vue3中的ref與reactive用法及區(qū)別的相關(guān)資料,關(guān)于ref及reactive的用法,還是要在開發(fā)中多多使用,遇到響應(yīng)式失效問題,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-08-08
這篇文章主要介紹了vant的picker的坑及解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-12-12
vue2和vue3的v-if與v-for優(yōu)先級(jí)對(duì)比學(xué)習(xí)
這篇文章主要介紹了vue2和vue3的v-if與v-for優(yōu)先級(jí)對(duì)比學(xué)習(xí)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-10-10
這篇文章主要為大家詳細(xì)介紹了vue中非父子組件通信，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-02-02
vue3.x源碼剖析之?dāng)?shù)據(jù)響應(yīng)式的深入講解
這篇文章主要給大家介紹了關(guān)于vue3.x源碼剖析之?dāng)?shù)據(jù)響應(yīng)式的相關(guān)資料,在講解過程中,我們會(huì)對(duì)比Vue2.x的API特性,使用有哪些區(qū)別,需要的朋友可以參考下2022-01-01
vue實(shí)現(xiàn)自定義表格工具擴(kuò)展
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)自定義表格工具擴(kuò)展，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
這篇文章主要介紹了Vue中自定義日志打印插件問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05
element中el-table局部刷新的實(shí)現(xiàn)示例
本文主要介紹了element中el-table局部刷新的實(shí)現(xiàn)示例，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04
vue 中基于html5 drag drap的拖放效果案例分析
本文通過三個(gè)案例給大家介紹了vue 中基于html5 drag drap的拖放效果 ,需要的朋友可以參考下2018-11-11