ふわり from pixiv
关于echarts项目用到挺多，柱状图，折线图，进度图，指针图和饼图
echarts的配置项比较多，用起来比较繁琐和复杂，所以边写边看文档是必需的（吐槽）
实战时而比较推荐的是在echarts社区找一个与需求差不多的实例，再去修改其中的配置项，这样效率是最快的
echarts最近被apache收购了，换了一个官网，我们可以在这查看配置项
ECharts Gallery 是重中之重，里面有众多开发者的贡献的实例，能大幅提高开发的效率（重点!!!）
补充：Makeapie最近被墙了，现在找一些备用的网站
DataInsight isqqw PPChart 快速获取区域json
不好说哪一天需求给个地狱级图表的需求，我们束手无策的时候可以逛逛社区，可能会找到社区大神贡献过的类似的实例
大数据首页
项目做的大概是这种大数据首页的效果，为了方便维护，封装了vue组件
Echarts
<template>
<!-- :style="{width:width,height:height}" -->
<div
:id="id"
class="base-echarts">
</div>
</template>
<script>
/*
*@description: 图标基础组件
*@version V0.1.0
*@API:
*@ 参数
* id 组件标签的id
* option 图表配置
*
*@ 事件
*
*
*/
// 引入 ECharts 主模块
// const echarts = require('echarts/lib/echarts')
// // 引入柱状图
// require('echarts/lib/chart/bar')
// // 引入提示框和标题组件
// 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
// 若是地图图表，注册地图
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>
页面使用
思路是获取数据之后修改原有的配置项,然后在调用echarts的reLoadOption把心的配置项传进去更新
<template>
<l-base-echarts
echartsId="echartsData"
ref="leftTopEchart"
width="800px"
height="330px"
:option="echartsData"
>
</l-base-echarts>
</template>
<script>
// 引用定义好的配置项
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)
}
},
// 模拟网络请求
getNetData(){
this.$store.dispatch('api/homeData', { ...params })
.then((res)=>{
if(res.code){
this.upDateLeftTopEchart(res.data)
} else {
this.$message.error(res.msg)
}
})
},
// 更新echarts数据
upDateLeftTopEchart(homeData = {}) {
const option = this.echartsData
// 修改具体的参数
const pie = option.series[0]
pie.data[0].value = 1
this.updataEchart('leftTopEchart', option)
}
}
</script>
胡桃
大数据首页
- 项目的分辨率控制，平时项目用的单位一般是px，而这种首页用的是rem或者vh，这里用的rem
- 页面布局比较复杂，一般页面图片会比较多，纵横交错，一些echarts会展示在部分图片上面，因此页面会划分层数来堆叠，项目纵向分了底层（展示地图），顶层（css定位），横向进一步用了左中右，上下布局（上部分显示标题，下部分展示主体）
- 项目的背景图片的大小问题，过大的图片可能会很占用网络，导致首屏加载速度变慢，这边的策略是将小图片通过webpack转成base64，减少网络请求次数，并且在webpack配置中做好切片，而大的图片经过压缩后放进cdn(如果是内网项目，直接当做静态资源不做cdn也无可厚非，局域网更注重稳定)
- 项目的背景图片放置问题，图片放置用的background,而background-size都是用100%覆盖
background: url('~@/assets/dashboard/left-panel02.png') no-repeat;
background-size: 100% 100%;- 大数据首页不止是echarts的运用，css特效部分也有浓墨重彩的一笔，目前项目做的css特效有冒泡特效，光环特效，波纹特效，气球特效，动态光圈特效，浮动特效等等。
页面布局
骨架图
dom树结构
