profitManage1.1/src/components/echartsList/line.vue

<template>
    <div>
        <DateTimeSelect v-if="!(lineData && lineData.hiddenTime)" :sideIcon="sideIcon" :dateDataTrans="dateDataTrans" :dateShowType="dateShowType" @dataChange="dataChangeValue"></DateTimeSelect>
        <div :id="`lineChart` + num" style="width:100%;height: 100%;" />
    </div>
</template>

<script>
    import * as echarts from 'echarts'
    import DateTimeSelect from './dateTimeSelect.vue'
    export default {
      name: 'echartsLine',
      components: {DateTimeSelect},
      props: {
        lineData: {
          type: Object,
          default: () => {}
        },
        title: {
          type: String,
          default: null
        },
        dateShowType: {
          type: String,
          default: null
        },
        dateDataTrans: {
          type: Object,
          default: () => ({})
        },
        chartData: {
          type: Function,
          default: () => {
          }
        },
        sideIcon: {
          type: Object,
          default: () => {}
        }
      },
      watch: {
        lineData: {
          handler(val) {
            this.$nextTick(() => {
              this.getList(this.title, this.lineData);
            });
          },
          deep: true,
          immediate: true
        }
      },
      data() {
        return {
          lineDataList: '',
          num: ''
        }
      },
      created() {
        this.num = Math.floor(Math.random() * 9000);
      },
      mounted() {
        if (this.lineData && this.lineData.hiddenTime) {
          this.getList(this.title, this.lineData);
        }
      },
      methods: {
        getList(title, dataXY) {
          console.log('dataXY===',dataXY);
          const lineDataListIntance = echarts.init(document.getElementById('lineChart' + this.num));
          let titleList = {text: title, x: '50%', y: '3%', textAlign: 'center',textStyle: {fontSize: 16}};
          if (dataXY && dataXY.titleVal) {
            titleList = Object.assign({},titleList, dataXY.titleVal);
          }
          let legendData = dataXY && dataXY.legend ? dataXY.legend : {};
          if (dataXY && dataXY.legend && dataXY.legend.formatter) {
            let formatData = {
              // formatter: function(params) {
              //   const customSuffix = 'xxxxx';
              //   return `${params} ${customSuffix}`;
              // },
            };
            legendData = Object.assign({}, legendData, formatData);
          }
          let series = [];
          if (dataXY && dataXY.dataList && dataXY.dataList.length > 0) {
            dataXY.dataList.forEach(item => {
              series.push({
                name: item && item.name || '',
                type: 'line',
                // showSymbol: false,
                symbol: 'circle',
                areaStyle: {
                  opacity: 0.6
                },
                data: item && item.data || []
              });
            });
          } else {
            series = [{
              data: dataXY && dataXY.data || [],
              type: 'line',
              smooth: true,
              // areaStyle: {  // 阴影
              //   color: 'rgba(140, 158, 217, 1)'
              // }
            }];
          }
          let option = {
            title: [titleList],
            legend: legendData,
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'cross',
                label: {
                  backgroundColor: '#6a7985'
                }
              }
            },
            grid: {
              top: dataXY && dataXY.gridTop || '80px',
              left: dataXY && dataXY.gridLeft || '2%',
              right: '4%',
              bottom: dataXY && dataXY.gridBotm || '3%',
              containLabel: true
            },
            xAxis: {
              type: 'category',
              boundaryGap: false,
              axisLine: {
                show: false
              },
              axisTick: {
                show: false
              },
              axisLabel: {
                formatter: function(value) {
                  // 每4个字符换一行（根据实际文本长度调整）
                  const maxLength = 11;
                  let result = '';
                  let count = 0;
                  for (let i = 0; i < value.length; i++) {
                    count++;
                    result += value[i];
                    if (count % maxLength === 0 && i !== value.length - 1) {
                      result += '\n'; // 换行
                    }
                  }
                  return result;
                },
                // lineHeight: 10, // 行高（确保换行后不重叠）
              },
              data: dataXY && dataXY.lineXData || []
            },
            yAxis: {
              type: 'value',
              name: dataXY?.yAxisName || '单位Mbps',
              min: 0,    // 自定义最小刻度（根据业务需求调整，如 0）
              max: dataXY && dataXY.data && dataXY.data.length > 0 ? null : dataXY && dataXY.dataList && dataXY.dataList[0] && dataXY.dataList[0].data.length > 0 ? null : 100,
              splitLine: {
                show: true,
              },
            },
            series: series
          };
          lineDataListIntance.setOption(option);
          // window.addEventListener("resize", () => {
          //   lineDataListIntance.resize()
          // })
        },
        dataChangeValue(val, timeArr, iconVal) {
          // 调用父级页面传过来的事件，在父级中处理该方法的逻辑--
          if (timeArr) {
            this.chartData(timeArr);
          }
          if (iconVal) {
            this.chartData({iconVal: iconVal})
          }
          // let lineDataList = days && days.length > 0 ? days: this.lineData.lineXData;
          // this.getList(this.title, {data: this.lineData.data, lineXData: lineDataList});
        }
      }
    }
</script>
<style scoped>
</style>