就在上周全國各地區(qū)GDP總量上了熱搜惶洲，一時性起就想寫個大數(shù)據(jù)面板展示
既然決定要寫步鉴，那么就要考慮到圖表和圖標的使用胡野，這里我是用了我最熟悉的兩大框架ECharts和element-ui
一仁连、我的構思步驟
1. 確定主題色彩
首先我們通過ECharts主題定制確定我們的總體圖表顏色
也可以自行定制满葛，替換掉我里面的macarons.json文件就行了
import macarons from './macarons.json' // 引入默認主題
export default {
data () {
return {
chart: null
}
},
mounted () {
this.$echarts.registerTheme('macarons', macarons); // 覆蓋默認主題
this.initChart();
},
methods: {
initChart () {
// 初始化echart
this.chart = this.$echarts.init(this.$el, 'macarons')
this.chart.setOption(this.options, true)
}
}
}
2. 選擇合適的圖表
這里我使用了折線圖镰矿、柱狀圖琐驴、餅圖、地圖秤标、滾動列表绝淡，重點說一下地圖和滾動列表
地圖的話我們需要找該地區(qū)的json或js地圖數(shù)據(jù)文件引入或用其他地圖插件（如百度地圖），但我個人感覺這種輪廓地圖要好看點苍姜。
我文件里下載了一個中國省區(qū)地圖牢酵，和地級市地圖，需要可以自取衙猪，我用到的是地級市地圖
import chinaCityJson from './china-cities.json'
export default {
methods: {
initChart() {
//...關鍵語句
this.$echarts.registerMap("china", chinaCityJson);
}
}
}
滾動列表我使用的是vue-seamless-scroll馍乙，因為我這里表格用了element-ui的一個表格，為了控制表頭不滾動垫释，我其實是寫了兩個表格丝格，一個隱藏主體內容，一個隱藏表頭棵譬，不想使用這個插件的可以參考我之前的文章Vue實現(xiàn)簡單列表無限循環(huán)滾動（鼠標懸停）自己修改一個適合自己的滾動列表
vue-seamless-scroll組件參考代碼：
import vueSeamlessScroll from 'vue-seamless-scroll'
export default {
data() {},
components: { //組件
vueSeamlessScroll
},
computed: {
optionSingleHeight() {
return {
step: 0.2, // 數(shù)值越大速度滾動越快
limitMoveNum: 2, // 開始無縫滾動的數(shù)據(jù)量 this.List.length
hoverStop: true, // 是否開啟鼠標懸停stop
direction: 1, // 0向下 1向上 2向左 3向右
openWatch: true, // 開啟數(shù)據(jù)實時監(jiān)控刷新dom
singleHeight: 0, // 單步運動停止的高度(默認值0是無縫不停止的滾動) direction => 0/1
singleWidth: 0, // 單步運動停止的寬度(默認值0是無縫不停止的滾動) direction => 2/3
waitTime: 1000 // 單步運動停止的時間(默認值1000ms)
}
}
},
}
3. 樣式美化
我們可以插入一些圖片和做一些動態(tài)邊框显蝌、透明背景來實現(xiàn)美化界面
這里我只用了兩張背景圖做美化，那就是大屏的背景圖和一線城市的背景圖
這里考慮到打包到服務器會找不到背景圖一些原因订咸，我們把樣式寫到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曼尊，這是一個CSS3的像素單位酬诀，主要是相對于HTML根元素變化，而px是相對于屏幕寬度變化骆撇，這里可以根據(jù)自己需求改動瞒御，寬度我是利用element-ui的Layout布局做的響應式，這里我最適應的屏幕大小是1920*944艾船，但這是瀏覽器寬高葵腹，不適合大屏展示，所以我又寫了一個全屏js屿岂，當然如果需要的話要調整一個布局高度践宴，不然下面會因為內容沒填滿出現(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ù)是利用時間差去銷毀重構圖表爷怀，以起到防止變化過快出現(xiàn)的抖動
/**
* @param {Function} fn 防抖函數(shù)
* @param {Number} delay 延遲時間
*/
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. 動態(tài)數(shù)據(jù)
因為我這里只用了一年的數(shù)據(jù)阻肩，就沒什么動態(tài)效果，如果有多個年份的數(shù)據(jù)可以做地區(qū)城市攀爬和動態(tài)數(shù)據(jù)运授，所以是只是做了隨機展示地圖上的數(shù)據(jù)內容
export default {
methods:{
// 開啟定時器
startInterval() {
if (this.intervalId !== null) {
clearInterval(this.intervalId);
}
this.intervalId = setInterval(() => {
this.reSelectMapRandomArea();
}, 2000);
},
// 重新隨機選中地圖區(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);
// 移入區(qū)域烤惊，清除定時器、取消之前選中并選中當前
this.chart.on('mouseover', (params)=> {
clearInterval(this.intervalId);
});
// 移出區(qū)域重新隨機選中地圖區(qū)域吁朦，并開啟定時器
this.chart.on('globalout', ()=> {
this.reSelectMapRandomArea();
this.startInterval();
});
this.startInterval();
});
},
},
}
二柒室、最終效果展示
演示地址：http://zspt_sf.gitee.io/data-visualization-view
效果圖：
動態(tài)效果圖：
三、源碼地址
github地址：https://github.com/zsptsf/data-visualization
gitee地址：https://gitee.com/zspt_sf/data-visualization
