vue-element-admin-引用echarts折线+柱状，含鼠标悬浮显示X轴内容过长

vue-element-admin官方文档上有引用echarts的说明

目录

 

    <el-tabs v-model="activeName" type="card" @tab-click="handleClickTwo">
        <el-tab-pane label="平台流水" name="first" v-if="active=='first'">
          <line-chart ref="LineChart" :chart-data="lineChartData" v-if="activeName=='first'" />
        </el-tab-pane>
        <el-tab-pane label="充值" name="second" v-if="active=='first'">
          <Topup-chart ref="TopupChart" :chart-data="lineChartData" v-if="activeName=='second'" />
        </el-tab-pane>
        <!-- 数据统计 -->
        <el-tab-pane label="库存预警" name="thirth" v-if="active=='five'">
          <dataStatisticsList ref="dataStatisticsList" :chart-data="lineChartData" v-if="activeName=='thirth'"
            :valueTimeAxis='valueTimeAxis' :valueDay='valueDay' :valueMonth='valueMonth' :valueYear='valueYear' />
        </el-tab-pane>
      </el-tabs>
   

import LineChart from './components/LineChart'
  import TopupChart from './components/TopupChart'
  import dataStatisticsList from './components/dataStatisticsList'
 components: {
      LineChart,
      TopupChart,
      dataStatisticsList,
    },
 data() {
      return {
        lineChartData: {
          FlowingWater: {
            orderData: [],
            ordinaryData: [],
            overseasData: [],
            TotalAmountData: [],
            timeAxisFieldData: []
          },
          Topup: {
            totalMoneyData: [],
            timeAxisFieldData: []
          },
          Brand: {
            amountData: [],
            brandNameData: [],
            timeAxisFieldData: [],
            //销售额
            salesVolumeMax: undefined,
            salesVolumeMin: undefined,
            //销售数量
            salesVolumesMax: undefined,
            salesVolumesMin: undefined,
          },
        },
        total: 0, //总页数--数据总条数
        FlowingWaterList: [], //流水表格的数据-
        FlowingWaterObj: {
          orderData: [],
          ordinaryData: [],
          overseasData: [],
          TotalAmountData: [],
          timeAxisFieldData: []
        },
        TopupList: [], //充值表格的数据-
        TopupObj: {
          totalMoneyData: [],
          timeAxisFieldData: []
        },
        arr: {},//过滤数组1
        cityIdList:[],//过滤数组2
        FlowingWaterLoading: false, //数据加载等待动画
        listQuery: {
          pageNum: 1, //页码
          pageSize: 10, //每页条数
        },
      }
    },

  this.lineChartData.FlowingWater.ordinaryData数据格式根据图表需要进行一些操作

//请选择时间  
timeChange() {
        this.rest()
        // console.log(tab, event);
        if (this.activeName == 'first') {
          //流水
          this.getList();
        } else if (this.activeName == 'second') {
          this.TopupGetList()
        } else if (this.activeName == 'third') {
          this.PriceGetList();
        }
      }, 
      //清空数据
 rest() {
        //选择年份
        this.valueYear = '',
          this.valueMonth = '', //月
          this.valueDay = '',
          this.GoodTypeName = ''
        this.valueGoodType = []
        this.valueCity = []
        this.dateFilter = []
        this.CityName = ''
        //营业额
        this.lineChartData.FlowingWater.ordinaryData = []
        this.lineChartData.FlowingWater.orderData = []
        this.lineChartData.FlowingWater.overseasData = []
        this.lineChartData.FlowingWater.TotalAmountData == []
        this.lineChartData.FlowingWater.timeAxisFieldData == []
        this.lineChartData.Topup.totalMoneyData = []
        this.lineCh