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