就在上周全國(guó)各地區(qū)GDP總量上了熱搜，一時(shí)性起就想寫個(gè)大數(shù)據(jù)面板展示
既然決定要寫，那么就要考慮到圖表和圖標(biāo)的使用，這里我是用了我最熟悉的兩大框架ECharts和element-ui
一、我的構(gòu)思步驟
1. 確定主題色彩
首先我們通過ECharts主題定制確定我們的總體圖表顏色
也可以自行定制，替換掉我里面的macarons.json文件就行了
import macarons from './macarons.json' // 引入默認(rèn)主題
export default {
data () {
return {
chart: null
}
},
mounted () {
this.$echarts.registerTheme('macarons', macarons); // 覆蓋默認(rèn)主題
this.initChart();
},
methods: {
initChart () {
// 初始化echart
this.chart = this.$echarts.init(this.$el, 'macarons')
this.chart.setOption(this.options, true)
}
}
}
2. 選擇合適的圖表
這里我使用了折線圖、柱狀圖、餅圖、地圖、滾動(dòng)列表，重點(diǎn)說一下地圖和滾動(dòng)列表
地圖的話我們需要找該地區(qū)的json或js地圖數(shù)據(jù)文件引入或用其他地圖插件（如百度地圖），但我個(gè)人感覺這種輪廓地圖要好看點(diǎn)。
我文件里下載了一個(gè)中國(guó)省區(qū)地圖，和地級(jí)市地圖，需要可以自取，我用到的是地級(jí)市地圖
import chinaCityJson from './china-cities.json'
export default {
methods: {
initChart() {
//...關(guān)鍵語(yǔ)句
this.$echarts.registerMap("china", chinaCityJson);
}
}
}
滾動(dòng)列表我使用的是vue-seamless-scroll，因?yàn)槲疫@里表格用了element-ui的一個(gè)表格，為了控制表頭不滾動(dòng)，我其實(shí)是寫了兩個(gè)表格，一個(gè)隱藏主體內(nèi)容，一個(gè)隱藏表頭，不想使用這個(gè)插件的可以參考我之前的文章Vue實(shí)現(xiàn)簡(jiǎn)單列表無限循環(huán)滾動(dòng)（鼠標(biāo)懸停）自己修改一個(gè)適合自己的滾動(dòng)列表
vue-seamless-scroll組件參考代碼：
import vueSeamlessScroll from 'vue-seamless-scroll'
export default {
data() {},
components: { //組件
vueSeamlessScroll
},
computed: {
optionSingleHeight() {
return {
step: 0.2, // 數(shù)值越大速度滾動(dòng)越快
limitMoveNum: 2, // 開始無縫滾動(dòng)的數(shù)據(jù)量 this.List.length
hoverStop: true, // 是否開啟鼠標(biāo)懸停stop
direction: 1, // 0向下 1向上 2向左 3向右
openWatch: true, // 開啟數(shù)據(jù)實(shí)時(shí)監(jiān)控刷新dom
singleHeight: 0, // 單步運(yùn)動(dòng)停止的高度(默認(rèn)值0是無縫不停止的滾動(dòng)) direction => 0/1
singleWidth: 0, // 單步運(yùn)動(dòng)停止的寬度(默認(rèn)值0是無縫不停止的滾動(dòng)) direction => 2/3
waitTime: 1000 // 單步運(yùn)動(dòng)停止的時(shí)間(默認(rèn)值1000ms)
}
}
},
}
3. 樣式美化
我們可以插入一些圖片和做一些動(dòng)態(tài)邊框、透明背景來實(shí)現(xiàn)美化界面
這里我只用了兩張背景圖做美化，那就是大屏的背景圖和一線城市的背景圖
這里考慮到打包到服務(wù)器會(huì)找不到背景圖一些原因，我們把樣式寫到data里面
export default {
data() {
return {
note: {
backgroundImage: "url(" + require("../assets/img/bg.jpg") + ")",
backgroundSize: "100% 100%",
},
box: {
margin:"10px 10px 10px 10px",
height: "2rem",
border: "0.25rem solid transparent",
borderImage: "url("+require("../assets/img/border.png")+") 51 32 18 66",
},
};
},
}
4. 大屏比例和防抖
像素我用的是rem，這是一個(gè)CSS3的像素單位，主要是相對(duì)于HTML根元素變化，而px是相對(duì)于屏幕寬度變化，這里可以根據(jù)自己需求改動(dòng)，寬度我是利用element-ui的Layout布局做的響應(yīng)式，這里我最適應(yīng)的屏幕大小是1920*944，但這是瀏覽器寬高，不適合大屏展示，所以我又寫了一個(gè)全屏js，當(dāng)然如果需要的話要調(diào)整一個(gè)布局高度，不然下面會(huì)因?yàn)閮?nèi)容沒填滿出現(xiàn)白邊
export default {
data() {
return {
fullscreen: false,
};
},
methods:{
// 全屏事件
handleFullScreen() {
let element = document.documentElement;
if (this.fullscreen) {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
} else {
if (element.requestFullscreen) {
element.requestFullscreen();
} else if (element.webkitRequestFullScreen) {
element.webkitRequestFullScreen();
} else if (element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if (element.msRequestFullscreen) {
// IE11
element.msRequestFullscreen();
}
}
this.fullscreen = !this.fullscreen;
},
},
}
全屏主要是用于展廳大屏展示、公司大屏展示等
防抖函數(shù)是利用時(shí)間差去銷毀重構(gòu)圖表，以起到防止變化過快出現(xiàn)的抖動(dòng)
/**
* @param {Function} fn 防抖函數(shù)
* @param {Number} delay 延遲時(shí)間
*/
export function debounce(fn, delay) {
var timer;
return function () {
var context = this;
var args = arguments;
clearTimeout(timer);
timer = setTimeout(function () {
fn.apply(context, args);
}, delay);
};
}
5. 動(dòng)態(tài)數(shù)據(jù)
因?yàn)槲疫@里只用了一年的數(shù)據(jù)，就沒什么動(dòng)態(tài)效果，如果有多個(gè)年份的數(shù)據(jù)可以做地區(qū)城市攀爬和動(dòng)態(tài)數(shù)據(jù)，所以是只是做了隨機(jī)展示地圖上的數(shù)據(jù)內(nèi)容
export default {
methods:{
// 開啟定時(shí)器
startInterval() {
if (this.intervalId !== null) {
clearInterval(this.intervalId);
}
this.intervalId = setInterval(() => {
this.reSelectMapRandomArea();
}, 2000);
},
// 重新隨機(jī)選中地圖區(qū)域
reSelectMapRandomArea() {
this.$nextTick(() => {
let index = Math.floor(Math.random() * this.data.length);
this.chart.dispatchAction({
type: 'showTip',
seriesIndex: 0,
dataIndex: index,
});
this.chart.dispatchAction({
type: 'select',
seriesIndex: 0,
dataIndex: index,
});
});
},
handleMapRandomSelect() {
this.$nextTick(() => {
setTimeout(() => {
this.reSelectMapRandomArea();
}, 0);
// 移入?yún)^(qū)域，清除定時(shí)器、取消之前選中并選中當(dāng)前
this.chart.on('mouseover', (params)=> {
clearInterval(this.intervalId);
});
// 移出區(qū)域重新隨機(jī)選中地圖區(qū)域，并開啟定時(shí)器
this.chart.on('globalout', ()=> {
this.reSelectMapRandomArea();
this.startInterval();
});
this.startInterval();
});
},
},
}
二、最終效果展示
演示地址：http://zspt_sf.gitee.io/data-visualization-view
效果圖：
動(dòng)態(tài)效果圖：
三、源碼地址
github地址：https://github.com/zsptsf/data-visualization
gitee地址：https://gitee.com/zspt_sf/data-visualization
