2022.09.22 熟悉echarts

1.在子组件中初始化一个echarts图标的时候,若想在父组件中多次使用这个子组件,则需要给子组件传入不同的值,图标容器需要动态绑定id,否则只能渲染一个容器

父组件

<commonEcharts :type="'projectAll'"></commonEcharts>
<commonEcharts :type="'one'"></commonEcharts>
<commonEcharts :type="'two'"></commonEcharts>

子组件

<template>
    <div :id="type" class="echarts-bar"></div>
</template>
<script>
export default {
  components: {},
    props:['type'],
    mounted:{
       let myChartPie = this.$echarts.init(document.getElementById(this.type));
    }

2.当有多个x轴,y轴的时候,可以在series的每个配置项中通过xAxisIndex或者yAxisIndex指定改系列使用的x轴或者y轴的索引

option.series = [
    {
        type:'bar',
        name:'送检次数',
        data:[10,20,30,40,20,3]
    },
    {
        type:'bar',
        name:'隐藏数量',
        data:[10,30,10,20,40,10],
        yAxisIndex:1 //这里使用yAxis中索引为1的轴
    },
    {
        type:'bar',
        name:'隐藏整改',
        data:[20,20,40,10,8,16]
    }
]

3.echarts图表是不具备自适应的只会渲染一次,不会跟着容器的大小改变而改变,需要通过resize这个api来实现

let timeA = {}
window.addEventListener('resize', () => {
    //timeA = setTimeout(() => {
        myChartPie.resize()
    //}, 500)
})
// this.$once('hook:deactivated', () => {
//     clearInterval(timeA)
//     timeA = null
// })

4.这里$once可以给组件实例绑定一个自定义事件，但该事件只能被触发一次，触发之后随即被移除,可以用于清除定时器比如下面代码:

let timer = setInterval(() => {
      console.log('setInterval')
    }, 2000)
    this.$once('hook:beforeDestroy', () => {
      clearInterval(timer)
      timer = null
    })
  }

如果当前组件使用了组件缓存是不会走beforeDestroy钩子函数的,可以使用activated和deactivated钩子函数如下:

  this.$once('hook:deactivated', () => {
  clearInterval(timer)
  timer = null
  })
 }

5.echarts中的grid组件当中的x,x2,y,y2可以控制图表的摆放：x为左上角的横坐标，y为左上角的纵坐标 x2为右下角的横坐标，y2为右下角的纵坐标

6.基于vue解决 100vw 和 100vh出现滚动条的问题(www.cnblogs.com/zhangzheblo…)

解决办法：

html,body,#app{

    margin: 0;

    padding: 0;

    height: 100%; }

设置全局样式表并在main.js中引入 

import "./assets/css/common.css";

注意：vue开发移动端不会出现此问题*