Vue聯(lián)動Echarts實(shí)現(xiàn)數(shù)據(jù)大屏展示
1.安裝echarts.js
npm install echarts --save
2.新建vue界面
<template> <!-- 定義echarts需要控制的dom元素 --> <div :style="{height:height,width:width}" /> </template>
3.引入 ECharts
<script> import echarts from 'echarts' require('echarts/theme/dark') // echarts主題 //....后面就是配置vue的方法和圖標(biāo)樣式,我打算拿出開單獨(dú)講解 </script>
4.創(chuàng)建Vue方法和圖表信息
創(chuàng)建一個(gè)export default模塊
export default{ //方法和變量 }
在以上基礎(chǔ)添加data()
data() { return { chart: null,// echarts實(shí)例 chartData: '',// 圖表數(shù)據(jù) height: '250px',//設(shè)置默認(rèn)高度 width: '50%',//設(shè)置默認(rèn)寬度 } },
watch監(jiān)聽
watch: {//監(jiān)聽數(shù)據(jù)變化 chartData: { deep: true,//深度監(jiān)聽 handler(val) { this.setOptions(val)//重新繪制圖表數(shù)據(jù) } } },
mounted創(chuàng)建echarts實(shí)例
mounted() { // dom元素加載完成后執(zhí)行 this.$nextTick(() => { // 初始化echarts實(shí)例 this.initEcharts() }) },
methods的方法有initEcharts
和setOptions
methods: { initEcharts(){}, setOptions({expectedData,actualData}){}, }
initEcharts方法創(chuàng)建實(shí)例對象
initEcharts() { // 定義一個(gè)圖表數(shù)據(jù) this.chartData={ expectedData:[190, 100, 10, 9, 170, 110, 160], actualData:[120, 200, 150, 80, 70, 110, 130] } //參數(shù)一:this.$el指向當(dāng)前組件template模板中的根標(biāo)簽(在mounted生命周期中才有效) //參數(shù)二:echarts主題顏色 this.chart = echarts.init(this.$el, "dark") this.setOptions(this.chartData) },
關(guān)于圖標(biāo)樣式需要注意的是,需要引入了echarts主題否則無效.可以看官方的主題樣式點(diǎn)擊跳轉(zhuǎn),也可以根據(jù)自己的喜好進(jìn)行定制化主題并且下載本地,引入項(xiàng)目中
setOptions方法渲染圖表數(shù)據(jù)
setOptions({expectedData,actualData}) { var option={//setOption方法可以接受一個(gè)對象作為參數(shù)更多配置參數(shù)可以參考官網(wǎng) title: {//標(biāo)題組件 text: 'ECharts 入門示例' }, tooltip: {//提示框組件 trigger: 'axis'//坐標(biāo)軸觸發(fā),主要在柱狀圖,折線圖等會使用類目軸的圖表中使用,還有'item','none' }, legend: {//圖例組件 data: ['預(yù)期', '實(shí)際'] }, grid: {//直角坐標(biāo)系內(nèi)繪圖網(wǎng)格 left: '3%', right: '4%', bottom: '3%', containLabel: true }, toolbox: {//工具欄。內(nèi)置有導(dǎo)出圖片,數(shù)據(jù)視圖,動態(tài)類型切換,數(shù)據(jù)區(qū)域縮放,重置五個(gè)工具。 feature: { saveAsImage: {},//保存為圖片。 dataView: {},//數(shù)據(jù)視圖工具,可以展現(xiàn)當(dāng)前圖表所用的數(shù)據(jù),編輯后可以動態(tài)更新。 } }, xAxis: {//直角坐標(biāo)系 grid 中的 x 軸 type: 'category', boundaryGap: false, data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'] }, yAxis: {//直角坐標(biāo)系 grid 中的 y 軸 type: 'value' }, series: [//圖表類型 { name: '預(yù)期', type: 'line', stack: '總量', data: expectedData,//對象內(nèi),解析出來的參數(shù) }, { name: '實(shí)際', type: 'line', stack: '總量', data: actualData,//對象內(nèi),解析出來的參數(shù) } ] } this.chart.setOption(option) }
更多配置項(xiàng)可以點(diǎn)擊查看官網(wǎng)
可能你會對setOptions方法中{expectedData,actualData}產(chǎn)生疑問,為此打算單獨(dú)拆分講解下
在initEcharts()方法中我們調(diào)用了setOptions方法并且傳遞了一個(gè)對象信息,而{}內(nèi)的元素就是解析對象里面對應(yīng)的元素信息,接下來我用控制臺展示下
這下應(yīng)該明白了吧
5.效果樣式
設(shè)置了tooltip參數(shù)類型是’axis’所以移動到坐標(biāo)軸觸發(fā),主要在柱狀圖,折線圖等
6.通過官網(wǎng)查找自己喜歡的樣式
我們也可以通過官網(wǎng)查看自己需要的示例粘貼到項(xiàng)目中點(diǎn)擊直達(dá)
找到自己需要的然后點(diǎn)擊進(jìn)去復(fù)制代碼
把option進(jìn)行替換成官網(wǎng)的代碼就可以了
可以看出效果已經(jīng)出來了,我們也可以對里面顯示的數(shù)據(jù)進(jìn)行替換
是不是很簡單,但是有的時(shí)候我們在其他界面也需要使用到類似的樣式,我們就應(yīng)該使用這個(gè)模板然后替換里面的數(shù)據(jù)做展示,而不是重新創(chuàng)建新頁面然后復(fù)制代碼,你們懂我意思吧
7.組件重復(fù)使用
我現(xiàn)在需要在主頁面使用前面的模板,操作也很簡單跟著步驟一起來吧
1.組件重復(fù)使用定義
1.在需要引用的界面導(dǎo)入該模塊
<script> //引入模板 import TestTemplate from "./dashboard/TestTemplate" <script>
2.添加模板到組件中
export default { components: { //添加模板到組件 TestTemplate }, data() { return { } }, }
3.添加組件標(biāo)簽
<test-template></test-template>
你可能在想引用的組件標(biāo)簽為什么叫這個(gè),因?yàn)槲覀儗?dǎo)入組件的名稱是TestTemplate
那么標(biāo)簽使用的kebab-case(短橫線命名)為什么用這個(gè)呢而不是使用駝峰命名,由于HTML的特性不識別大小寫所以要使用短橫線命名,首字母小寫,遇到大寫字母需要加短橫并且改成小寫,如TestTemplate
改成短橫test-template
此時(shí)可以看出首頁已經(jīng)可以展示我們前面寫的組件了,簡單來說就三個(gè)步驟哦!
2.當(dāng)前頁面數(shù)據(jù)傳遞子組件中
但是還沒達(dá)到我們的要求,不同的頁面應(yīng)該展示不同的數(shù)據(jù)才對,所以我們需要把當(dāng)前頁面的數(shù)據(jù)傳遞到組件中去,簡單來講就是父的數(shù)據(jù)傳遞到子里面。
父界面改造
1.在父界面data()中添加需要傳遞的數(shù)據(jù)對象
2.在標(biāo)簽中添加創(chuàng)建的數(shù)據(jù)
<test-template :chart-data="LineChartData"></test-template>
子界面改造(重復(fù)使用的組件)
1.子界面定義props用于接收父組件傳遞的數(shù)據(jù)
//接收父組件傳遞的參數(shù) props: { chartData: {//接收父組件傳遞的參數(shù)名稱 type: Object,//父組件傳遞的數(shù)據(jù)類型 required: true //表示必須傳遞 } },
2.需要把原本頁面定義的數(shù)據(jù)進(jìn)行注釋,因?yàn)槲覀兛梢灾苯邮褂酶競鬟f過來的chartData
數(shù)據(jù)
可以看出數(shù)據(jù)已經(jīng)使用的是父頁面?zhèn)鬟f的數(shù)據(jù)了
我們還可以在同個(gè)頁面添加多個(gè)一樣的組件
通過不同數(shù)據(jù)展示不同數(shù)據(jù)信息
如圖展示
以上就是Vue聯(lián)動Echarts實(shí)現(xiàn)數(shù)據(jù)大屏展示的詳細(xì)內(nèi)容,更多關(guān)于Vue Echarts數(shù)據(jù)大屏的資料請關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
使用vue實(shí)現(xiàn)HTML頁面生成圖片的方法
這篇文章主要介紹了使用vue實(shí)現(xiàn)HTML頁面生成圖片的相關(guān)知識,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-03-03vite結(jié)合electron構(gòu)建前端桌面應(yīng)用程序
本文主要介紹了vite結(jié)合electron構(gòu)建前端桌面應(yīng)用程序,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-05-05ElementUI?復(fù)雜頂部和左側(cè)導(dǎo)航欄實(shí)現(xiàn)示例
本文主要介紹了ElementUI?復(fù)雜頂部和左側(cè)導(dǎo)航欄實(shí)現(xiàn)示例,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-04-04詳解vue項(xiàng)目中實(shí)現(xiàn)圖片裁剪功能
這篇文章主要介紹了vue項(xiàng)目中實(shí)現(xiàn)圖片裁剪功能,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06vue3一個(gè)元素如何綁定兩個(gè)或多個(gè)事件
這篇文章主要介紹了vue3一個(gè)元素如何綁定兩個(gè)或多個(gè)事件問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-11-11