6-8 修改EChart组件样式及自适应图表

目录：

• 修改Echart组件样式
• 自适应图表
• 总结

一、修改Echarts组件样式

 配置我们Echarts的样式，包括大小，其实都是在我们Echarts的配置项里面配置的，比如来配置我们的 颜色：

如果说要更改我们图表的大小，则选择 grid => 这个在我们的 echart的api中的配置项也是有的这个我们就不多介绍了。直接看文档就好了。

二、自适应图表

2.1、完善组件样式

normalOption: {
    tooltip: {
        trigger: 'item'
    }
    color: ['#of78f4','#dd536b','#9462e5','#a6a6a6','#elbb22','#39c362','#3edlcf'],
    series: []
}

2.2、需要自适应的地方

•  浏览器窗口大小发生变化
• 折叠菜单的时候

其实实现自适应的地方是用echarts 提供的方法: resize方法，先看看看官方api怎么说的：

1.浏览器窗口大小发生变化  => 编辑 Echarts.vue

<template>
    <div style="height: 100%" ref="echarts"> <!--ref添加属性元素，通过vm.$ref获取dom元素-->
      echarts
    </div>
</template>

<script>
    import echarts from 'echarts'
    export default {
        ....,
      methods: {
          ...,
          resizeChart(){   //创建一个 自适应的方法 调用resize方法
            this.echarts ? this.echarts.resize() : ''
          }
      },
      mounted() {   //挂起时添加监听窗口事件，调用resizeChart方法，重新渲染 图表大小
          window.addEventListener('resize',this.resizeChart)
      },
      destroyed() {  //不用时需要销毁，不然会导致内存泄漏
          window.removeEventListener('resize',this.resizeChart)
      }
    }
</script>

2.折叠菜单的时候  => 编辑 Echarts.vue

说明：这个你自己看，如果当你折叠 菜单栏的时候，图标发生变化了，我觉得没有必要用，至少我测试的时候，没啥软用。

<template>
    <div style="height: 100%" ref="echarts"> <!--ref添加属性元素，通过vm.$ref获取dom元素-->
      echarts
    </div>
</template>

<script>
    import echarts from 'echarts'
    export default {
        .....,
        computed: {
          ....,
          isCollapse(){
            return this.$store.state.tab.isCollage
          }
        },
       ....,
      watch: {  
        ....,
        isCollapse() { //监听方法，当菜单栏折叠时，则调用resizeChart
          setTimeout(() => {
            this.resizeChart()
          },300)
        }
      },
      methods: {
          ....,
          resizeChart(){
            this.echarts ? this.echarts.resize() : ''
          }
      },
      mounted() {
          window.addEventListener('resize',this.resizeChart)
      },
      destroyed() {
          window.removeEventListener('resize',this.resizeChart)
      }
    }
</script>

三、总结

• 观察文档，考虑组件需要的基本参数
• 参数筛选，分为父组件传过来的参数和自身的参数
• 完善组件，观察设计图，找不同，在文档中选择对应的配置项
• 细节优化，考虑多种场景下，图表自适应的处理