Echarts动画相关及图表自适应总结

加载动画的显示和隐藏

通常会在获取数据之前使用显示加载动画，获取数据之后隐藏加载动画，提高用户体验。

let instance = echarts.init(el)
.....
//显示加载动画
instance.showLoading()

//获取数据之前
.....
//获取数据之后

//隐藏加载动画
instance.hideLoading()

增量动画

增量动画通过setOption进行实现，setOption不是一个覆盖的操作而是一个整合的操作，他会根据配置项单独变化的一块与之前的配置项进行整合，并更新图表的显示。

let instance = echarts.init(el)
let optionData = {...}
....
instance.setOption(optionData)

动画配置项

控制动画的相关配置项。

optiop:{
//动画的开启和关闭
animation：true //不设置默认开启动画，设置为false关闭动画

//动画的时长
animationDuration:5000//单位为毫秒，可以为一个function,形参代表动画元素的下标值，可以通过这个对每个元素设置不同的动画时长。

//缓动动画
animationEasing:'bounceOut'//动画相关曲线函数，控制动画的缓急形式

//动画阈值
animationThreshold:7//超过这个值时动画会关闭

}

图表大小自适应

通过对浏览器窗口大小进行监听,当浏览器窗口自大小变化的时候,调用resize()方法

let instance = echarts.init(el)
...
window.onresize = function(){
	instance.resize()
}

这里的大小自适应只是针对整个图表的整体大小进行自适应。
如果需要对具体的内容进行自适应。比如说我们把echart封装到Vue的一个组件，组件内部宽高都是100%，组件的大小交给使用者进行设置，使用者可以通过组件的父容器大小进行控制组件大小。我这时们可以通过获取组件父容器大小对其进行一些自适应的操作
例如我们可以通过获取DOM节点的offsetWidth属性对其进行按比例划分,作为字体的大小。

//el这里我泛指DOM元素对象
let fontSize = el.offsetWidth / 100 *3.6

举个例子吧，这是Vue组件中的一个自适应的函数，我们通过得到一个比例后对其配置项进行更新，即可完成对图表具体元素的大小进行自适应了。

screenAdapt () {
      const titleFontSize = this.$refs.hot_ref.offsetWidth / 100 * 3.6
      this.titleFontSize = titleFontSize
      const adaptData = {
        title: {
          textStyle: {
            fontSize: titleFontSize
          }
        },
        legend: {
          itemHeight: titleFontSize,
          itemWidth: titleFontSize,
          itemGap: titleFontSize / 2,
          textStyle: {
            fontSize: titleFontSize / 2
          }
        },
        series: [
          {
            radius: titleFontSize * 4.5,
            center: ['50%', '50%']
          }
        ]
      }
      this.chartInstance.setOption(adaptData)
      this.chartInstance.resize()
    }