实现echart大屏动画效果及全屏布局错乱解决方式

本文链接：https://blog.csdn.net/Primary_Insist/article/details/144537316
如何实现echarts动画效果?如何实现表格或多个垂直布局的柱状图自动滚动效果?如何解决tooltip位置超出屏幕问题,如何解决legend文字过长,布局错乱问题?如何处理饼图的中心图片永远居中?

本文将主要解决以上问题,如有错漏,请指正.
一、大屏动画效果

这里的动画效果主要指，tooltip自动轮播，排名的柱状图或表格自动滚动效果。
1.实现柱状图，折线图自动轮播效果。

以折线图为例，其他的类似。
①封装一个折线图组件
<template>
  <div class="bar-line"
       ref="chartRef"></div>
</template>
<script>
import * as echarts from 'echarts'
export default {
  props: {
    dataList: {
      required: false,
      type: Object,
    },
    unit: {
      type: Array,
      required: false,
    },
  },
  watch: {
    dataList(value, oldValue) {
        this.currentOption = value;
        if (this.animotion) {
          this.clearTimeAnimation()
          this.set_Animation()
        } else {
          this.setOption();
        }
      }
    },
  data() {
    return {
      currentChart: null,
      time_Highlight: null,
      currentOption:null,
      //是否tooltip开启动画
      animotion:true,
    }
  },
  methods: {
    isNullorEmpty(str) {
      return (
        str === '' ||
        str == '--' ||
        str === null ||
        str === undefined ||
        isNaN(str)
      )
    },
    initChart(){
  this.init();
  let myChart=echarts.init(this.$refs.chartRef);
  this.currentChart=myChart
  if (this.animotion) {
          this.clearTimeAnimation()
          this.set_Animation()
        } else {
          this.setOption();
        }

},
setOption() {
  let myChart=this.currentChart
  let option=this.currentOption
  myChart.clear();
  option &&myChart.setOption(option);
  window.addEventListener('resize', () => {
    myChart.resize();
    myChart.setOption(option)
  });
  
 
},
 //  清除定时器
 clearTimeAnimation() {
 
        if (this.time_Highlight) {
          clearInterval(this.time_Highlight)
        }
      },

      set_Animation() {
      
        // 获取当前this
        var that = this;
     var option=that.currentOption;
     

        // 鼠标悬浮事件
        that.currentChart.on('mouseover', (params) => {
          // console.log('悬浮')
          // 清除定时器
          that.clearTimeAnimation();

          that.currentChart.dispatchAction({
            type: 'downplay',
            seriesIndex: seriesIndex
          });
          that.currentChart.dispatchAction({
            type: 'highlight',
            seriesIndex: seriesIndex,
            dataIndex: params.dataIndex
          });
           that.currentChart.dispatchAction({
            type: 'showTip',
            seriesIndex: 0,
            dataIndex: params.dataIndex,
          });
          that.time_Highlight = null;

        })

        // 鼠标移出事件
        that.currentChart.on('mouseout', () => {
          // 取消高亮效果
          that.currentChart.dispatchAction({
            type: 'downplay',
            seriesIndex: seriesIndex
          });
          that.clearTimeAnimation();
          setHighlight()
          
        })
        // 当前 X 轴下标
        var myChartIndex = 0;
        // 拿到数组长度
        var dataLen = option.series[0].data.length;
        // 需要显示的系列的下标
        var seriesIndex = option.series.map((item, index) => (index))
        // 是否完成一轮动画
        var isReDataZoom = false;
        // 是否 Y 轴滚动缩放  Y轴缩放 需要增加 orient='vertical' 属性 Y轴0到1是向上的  需要1到0是向下滚动
        var orientZoom =  false;
        if (orientZoom) {
          //Y 最顶端开始
          myChartIndex = dataLen - 1;
        }


        // 设置高亮和提示框
        function setHighlight() {
          option && that.currentChart.setOption(option);
          that.time_Highlight = setInterval(() => {
            // 取消高亮
            that.currentChart.dispatchAction({
              type: 'downplay',
              seriesIndex: seriesIndex,
              dataIndex: myChartIndex
            });
            // 取消提示框
           that.currentChart.dispatchAction({
              type: 'hideTip',
              seriesIndex: 0,
              dataIndex: myChartIndex
            });
            // 是否Y轴
            if (orientZoom) {
              myChartIndex = (myChartIndex - 1) % dataLen;
              if (myChartIndex < 0) {
                myChartIndex = dataLen;
                // 同步
                isReDataZoom = true;
              }
            } else {
              myChartIndex = (myChartIndex + 1) % dataLen;
              if (myChartIndex === 0) {
                // 同步
                isReDataZoom = true;
              }
            }

            // 高亮
            that.currentChart.dispatchAction({
              type: 'highlight',
              seriesIndex: seriesIndex,
              dataIndex: myChartIndex
            });
            // 显示提示框
            that.currentChart.dispatchAction({
              type: 'showTip',
              seriesIndex: 0,
              dataIndex: myChartIndex
            });
          }, 1950)
        }


       setHighlight()
        
      },

    init() {
      let that=this;
      let unit=this.unit;

      let xData = this.dataList.xData
      const seriesList = []
      this.dataList.seriesList.forEach((item, index) => {
        let series = {}
        series = {
          name: item.name,
          type: 'line',
          symbol: 'emptyCircle',
          symbolSize: 4, //标记的大小
          data: item.yData,

          yAxisIndex: item.yIndex === 1 ? item.yIndex : 0,
          connectNulls: item.connectNulls ? item.connectNulls : false,
          color: item.color ? item.color : 'skyblue',
        }
        if (item.type == 'line' && item.isAreaColor) {
          series.lineStyle = {
            width: 2,
          }
          series.areaStyle = {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: item.start, // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: item.end, // 100% 处的颜色
                },
              ],
            },
          }
        }
        seriesList.push(series)
      })

      let option = {
        grid: {
          left: '5%',
          right: '5%',
          top: '15%',
          bottom: '12%',
          containLabel: true,
        },
        legend: {
          show: true,
          y: '0%',
          itemWidth: 15,
          itemHeight: 10,
          lineStyle: {
            type: 'solid',
          },
          textStyle: {
            color: '#eee',
            fontSize: '11',
          },
  

        },
        tooltip: {
          trigger: 'axis',
          axisPointer: { type: 'shadow' },
          formatter: function (params) {
            let tip = params[0].name;
            for (let i = 0; i < params.length; i++)
            {
                const unit2 = seriesList[i].yAxisIndex === 1 ? unit[1] : unit[0];
              if( that.isNullorEmpty(params[i].value)){
                tip +=
                '<br/>' + params[i].marker + params[i].seriesName + '：' +'--' + unit2;
              }else{
                tip +=
                '<br/>' + params[i].marker + params[i].seriesName + '：' + Number(params[i].value).toFixed(2)  + unit2;
              }
               
             
              


            }
            return tip;
          },
        },
        xAxis: [
          {
            type: 'category',
            axisLabel: {
              textStyle: {
                color: '#fff',
                fontSize: '12',
              },
              interval: 0,
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: 'rgb(41,111,198)',
              },
            },
            axisTick: {
              show: false,
            },
            data: xData,
          },
        ],
        yAxis: [
          {
            name: unit[0],
            nameTextStyle: {
              fontSize: '12' /* 14/192 */,

              color: '#D9EDFF',
            },
            type: 'value',
            axisTick: {
              show: false,
            },
            splitLine: {
              show: false,
              lineStyle: { type: 'solid', color: 'rgb(41,111,198)' },
            },
            axisLabel: {
              textStyle: {
                color: ' rgb(125, 170, 197)',
              },
              fontSize: '12' /* 14/192 */,
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: 'rgb(41,111,198)',
              },
            },
          },
          {
            nameTextStyle: {
              fontSize: '12' /* 14/192 */,

              color: '#D9EDFF',
            },
            name: unit[1],
            show: this.dataLis