echarts的学习与实战大数据首页

ふわり 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>

胡桃

大数据首页

1. 项目的分辨率控制，平时项目用的单位一般是px，而这种首页用的是rem或者vh，这里用的rem
2. 页面布局比较复杂，一般页面图片会比较多，纵横交错，一些echarts会展示在部分图片上面，因此页面会划分层数来堆叠，项目纵向分了底层（展示地图），顶层（css定位），横向进一步用了左中右，上下布局（上部分显示标题，下部分展示主体）
3. 项目的背景图片的大小问题，过大的图片可能会很占用网络，导致首屏加载速度变慢，这边的策略是将小图片通过webpack转成base64，减少网络请求次数，并且在webpack配置中做好切片，而大的图片经过压缩后放进cdn(如果是内网项目，直接当做静态资源不做cdn也无可厚非，局域网更注重稳定)
4. 项目的背景图片放置问题，图片放置用的background,而background-size都是用100%覆盖
   background: url('~@/assets/dashboard/left-panel02.png') no-repeat;
   background-size: 100% 100%;
5. 大数据首页不止是echarts的运用，css特效部分也有浓墨重彩的一笔，目前项目做的css特效有冒泡特效，光环特效，波纹特效，气球特效，动态光圈特效，浮动特效等等。

页面布局

骨架图
dom树结构