ふわり from pixiv
關(guān)于echarts項(xiàng)目用到挺多，柱狀圖，折線圖，進(jìn)度圖，指針圖和餅圖
echarts的配置項(xiàng)比較多，用起來(lái)比較繁瑣和復(fù)雜，所以邊寫邊看文檔是必需的（吐槽）
實(shí)戰(zhàn)時(shí)而比較推薦的是在echarts社區(qū)找一個(gè)與需求差不多的實(shí)例，再去修改其中的配置項(xiàng)，這樣效率是最快的
echarts最近被apache收購(gòu)了，換了一個(gè)官網(wǎng)，我們可以在這查看配置項(xiàng)
ECharts Gallery 是重中之重，里面有眾多開發(fā)者的貢獻(xiàn)的實(shí)例，能大幅提高開發(fā)的效率（重點(diǎn)!!!）
補(bǔ)充：Makeapie最近被墻了，現(xiàn)在找一些備用的網(wǎng)站
DataInsight isqqw PPChart 快速獲取區(qū)域json
不好說(shuō)哪一天需求給個(gè)地獄級(jí)圖表的需求，我們束手無(wú)策的時(shí)候可以逛逛社區(qū)，可能會(huì)找到社區(qū)大神貢獻(xiàn)過的類似的實(shí)例
大數(shù)據(jù)首頁(yè)
項(xiàng)目做的大概是這種大數(shù)據(jù)首頁(yè)的效果，為了方便維護(hù)，封裝了vue組件
Echarts
<template>
<!-- :style="{width:width,height:height}" -->
<div
:id="id"
class="base-echarts">
</div>
</template>
<script>
/*
*@description: 圖標(biāo)基礎(chǔ)組件
*@version V0.1.0
*@API:
*@ 參數(shù)
* id 組件標(biāo)簽的id
* option 圖表配置
*
*@ 事件
*
*
*/
// 引入 ECharts 主模塊
// const echarts = require('echarts/lib/echarts')
// // 引入柱狀圖
// require('echarts/lib/chart/bar')
// // 引入提示框和標(biāo)題組件
// require('echarts/lib/component/tooltip')
// require('echarts/lib/component/title')
// require('echarts/lib/chart/pie')
import { debounce } from '@/utils/common.js'
import echarts from 'echarts'
export default {
name: 'BaseEcharts',
props: {
id: {
type: String,
default: ''
},
option: {
type: Object,
default: function() {
return {
title: {
text: 'ECharts 入門示例'
},
tooltip: {},
xAxis: {
data: ['襯衫', '羊毛衫', '雪紡衫', '褲子', '高跟鞋', '襪子']
},
yAxis: {},
series: [{
name: '銷量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
}
}
},
width: {
type: String,
default: 'auto'
},
height: {
type: String,
default: '500px'
},
mapJSON: {
type: Object,
default() {
return {}
}
},
isMap: {
type: Boolean,
default: false
}
},
data() {
return {
baseCharts: null
}
},
created() {
this.reSizeECharts()
},
mounted() {
if (this.isMap) {
echarts.registerMap('GZ', this.mapJSON)
}
if (this.id === '') return
// this.baseCharts = echarts.init(document.getElementById(this.id), {}, {
// width: this.width,
// height: this.height
// })
this.baseCharts = echarts.init(document.getElementById(this.id), {}, {
width: this.width,
height: this.height
})
// console.log(this.id, baseCharts)
// console.log(this.option)
// 添加echarts的配置文件：https://www.echartsjs.com/option.html#series-pie.legendHoverLink
// 若是地圖圖表，注冊(cè)地圖
this.baseCharts.setOption(this.option)
this.reSizeECharts()
// 防抖提升性能
window.addEventListener('resize', debounce(this.reSizeECharts, 300))
this.$once('hook:beforeDestory', () => {
window.removeEventListener('resize', this.reSizeECharts)
})
},
methods: {
// 刷新echart
reLoadOption(option) {
this.baseCharts.setOption(option)
},
// 修改echart的尺寸
reSizeECharts(width, height) {
if (!this.baseCharts) return
this.baseCharts.resize()
// this.baseCharts.resize(
// {
// width: width,
// height: height
// }
// )
}
}
}
</script>
<style lang="scss">
.base-echarts {
}
</style>
頁(yè)面使用
思路是獲取數(shù)據(jù)之后修改原有的配置項(xiàng),然后在調(diào)用echarts的reLoadOption把心的配置項(xiàng)傳進(jìn)去更新
<template>
<l-base-echarts
echartsId="echartsData"
ref="leftTopEchart"
width="800px"
height="330px"
:option="echartsData"
>
</l-base-echarts>
</template>
<script>
// 引用定義好的配置項(xiàng)
import { echartsData } from './DataConfig/index.js'
import { LBaseEcharts } from '@/components/index.js'
export default {
name: 'DashBoard',
props: {
},
components: {
LBaseEcharts
},
data(){
return{
echartsData
}
},
mounted(){
const params = {
param1:xxx,
param2:bbb
}
this.getNetData(params)
},
methods:{
// 更新圖表的公共方法
updataEchart(echarId, option) {
// console.log('option=', option)
if (this.$refs[echarId]) {
// console.log(option)
this.$refs[echarId].reLoadOption(option)
}
},
// 模擬網(wǎng)絡(luò)請(qǐng)求
getNetData(){
this.$store.dispatch('api/homeData', { ...params })
.then((res)=>{
if(res.code){
this.upDateLeftTopEchart(res.data)
} else {
this.$message.error(res.msg)
}
})
},
// 更新echarts數(shù)據(jù)
upDateLeftTopEchart(homeData = {}) {
const option = this.echartsData
// 修改具體的參數(shù)
const pie = option.series[0]
pie.data[0].value = 1
this.updataEchart('leftTopEchart', option)
}
}
</script>
胡桃
大數(shù)據(jù)首頁(yè)
- 項(xiàng)目的分辨率控制，平時(shí)項(xiàng)目用的單位一般是px，而這種首頁(yè)用的是rem或者vh，這里用的rem
- 頁(yè)面布局比較復(fù)雜，一般頁(yè)面圖片會(huì)比較多，縱橫交錯(cuò)，一些echarts會(huì)展示在部分圖片上面，因此頁(yè)面會(huì)劃分層數(shù)來(lái)堆疊，項(xiàng)目縱向分了底層（展示地圖），頂層（css定位），橫向進(jìn)一步用了左中右，上下布局（上部分顯示標(biāo)題，下部分展示主體）
- 項(xiàng)目的背景圖片的大小問題，過大的圖片可能會(huì)很占用網(wǎng)絡(luò)，導(dǎo)致首屏加載速度變慢，這邊的策略是將小圖片通過webpack轉(zhuǎn)成base64，減少網(wǎng)絡(luò)請(qǐng)求次數(shù)，并且在webpack配置中做好切片，而大的圖片經(jīng)過壓縮后放進(jìn)cdn(如果是內(nèi)網(wǎng)項(xiàng)目，直接當(dāng)做靜態(tài)資源不做cdn也無(wú)可厚非，局域網(wǎng)更注重穩(wěn)定)
- 項(xiàng)目的背景圖片放置問題，圖片放置用的background,而background-size都是用100%覆蓋
background: url('~@/assets/dashboard/left-panel02.png') no-repeat;
background-size: 100% 100%;- 大數(shù)據(jù)首頁(yè)不止是echarts的運(yùn)用，css特效部分也有濃墨重彩的一筆，目前項(xiàng)目做的css特效有冒泡特效，光環(huán)特效，波紋特效，氣球特效，動(dòng)態(tài)光圈特效，浮動(dòng)特效等等。
頁(yè)面布局
骨架圖
dom樹結(jié)構(gòu)
