就在上周全國各地區GDP總量上了熱搜，一時性起就想寫個大資料面板展示
既然決定要寫，那么就要考慮到圖表和圖示的使用，這里我是用了我最熟悉的兩大框架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. 選擇合適的圖表
這里我使用了折線圖、柱狀圖、餅圖、地圖、滾動串列，重點說一下地圖和滾動串列
地圖的話我們需要找該地區的json或js地圖資料檔案引入或用其他地圖插件（如百度地圖），但我個人感覺這種輪廓地圖要好看點，
我檔案里下載了一個中國省區地圖，和地級市地圖，需要可以自取，我用到的是地級市地圖
import chinaCityJson from './china-cities.json'
export default {
methods: {
initChart() {
//...關鍵陳述句
this.$echarts.registerMap("china", chinaCityJson);
}
}
}
滾動串列我使用的是vue-seamless-scroll，因為我這里表格用了element-ui的一個表格，為了控制表頭不滾動，我其實是寫了兩個表格，一個隱藏主體內容，一個隱藏表頭，不想使用這個插件的可以參考我之前的文章Vue實作簡單串列無限回圈滾動（滑鼠懸停）自己修改一個適合自己的滾動串列
vue-seamless-scroll組件參考代碼：
import vueSeamlessScroll from 'vue-seamless-scroll'
export default {
data() {},
components: { //組件
vueSeamlessScroll
},
computed: {
optionSingleHeight() {
return {
step: 0.2, // 數值越大速度滾動越快
limitMoveNum: 2, // 開始無縫滾動的資料量 this.List.length
hoverStop: true, // 是否開啟滑鼠懸停stop
direction: 1, // 0向下 1向上 2向左 3向右
openWatch: true, // 開啟資料實時監控重繪dom
singleHeight: 0, // 單步運動停止的高度(默認值0是無縫不停止的滾動) direction => 0/1
singleWidth: 0, // 單步運動停止的寬度(默認值0是無縫不停止的滾動) direction => 2/3
waitTime: 1000 // 單步運動停止的時間(默認值1000ms)
}
}
},
}
3. 樣式美化
我們可以插入一些圖片和做一些動態邊框、透明背景來實作美化界面
這里我只用了兩張背景圖做美化，那就是大屏的背景圖和一線城市的背景圖
這里考慮到打包到服務器會找不到背景圖一些原因，我們把樣式寫到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是相對于螢屏寬度變化，這里可以根據自己需求改動，寬度我是利用element-ui的Layout布局做的回應式，這里我最適應的螢屏大小是1920*944，但這是瀏覽器寬高，不適合大屏展示，所以我又寫了一個全屏js，當然如果需要的話要調整一個布局高度，不然下面會因為內容沒填滿出現白邊
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;
},
},
}
全屏主要是用于展廳大屏展示、公司大屏展示等
防抖函式是利用時間差去銷毀重構圖表，以起到防止變化過快出現的抖動
/**
* @param {Function} fn 防抖函式
* @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. 動態資料
因為我這里只用了一年的資料，就沒什么動態效果，如果有多個年份的資料可以做地區城市攀爬和動態資料，所以是只是做了隨機展示地圖上的資料內容
export default {
methods:{
// 開啟定時器
startInterval() {
if (this.intervalId !== null) {
clearInterval(this.intervalId);
}
this.intervalId = setInterval(() => {
this.reSelectMapRandomArea();
}, 2000);
},
// 重新隨機選中地圖區域
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);
// 移入區域，清除定時器、取消之前選中并選中當前
this.chart.on('mouseover', (params)=> {
clearInterval(this.intervalId);
});
// 移出區域重新隨機選中地圖區域，并開啟定時器
this.chart.on('globalout', ()=> {
this.reSelectMapRandomArea();
this.startInterval();
});
this.startInterval();
});
},
},
}
二、最終效果展示
演示地址：http://zspt_sf.gitee.io/data-visualization-view
效果圖：
動態效果圖：
三、原始碼地址
github地址：https://github.com/zsptsf/data-visualization
gitee地址：https://gitee.com/zspt_sf/data-visualization
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/275491.html
標籤：其他