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