UA 整理提交

he wei

2025-06-06 33d2b1b6b82b65561943b06b617b134d4ec20888

 src/components/echarts/line1.vue

@@ -4,44 +4,48 @@
  import baseChart from "./BaseChart.vue";

  const chart = ref(null);
  const props = defineProps({
    type: {
      type: String,
      default: '电流'
    },
    title: {
      type: String,
      default: ''
    },
    unit: {
      type: String,
      default: ''
    }
  });


   function getOptions() {

 function getOptions(xLabels, datas) {
    xLabels = xLabels || [];
    datas = datas || [];
      const option = {
         title: {
            text: '请求数',
            textStyle: {
               fontWeight: 'normal',
               fontSize: 16,
               color: '#F1F1F3'
            },
            left: '6%'
         },
         // title: {
         //    text: props.title,
         //    textStyle: {
         //       fontWeight: 'normal',
         //       fontSize: 14,
         //       color: '#fff'
         //    },
         //    left: '6%'
         // },
         tooltip: {
            trigger: 'axis',
            axisPointer: {
               lineStyle: {
                  color: '#57617B'
                  color: '#fff'
               }
            }
         },
         // legend: {
         //    icon: 'rect',
         //    itemWidth: 14,
         //    itemHeight: 5,
         //    itemGap: 13,
         //    data: ['移动', '电信', '联通'],
         //    right: '4%',
         //    textStyle: {
         //       fontSize: 12,
         //       color: '#F1F1F3'
         //    }
         // },
         grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
        top: 30,
            containLabel: true
         },
         xAxis: [{
@@ -49,158 +53,62 @@
            boundaryGap: false,
            axisLine: {
               lineStyle: {
                  color: '#57617B'
                  color: '#fff'
               }
            },
            data: ['13:00', '13:05', '13:10', '13:15', '13:20', '13:25', '13:30', '13:35', '13:40', '13:45', '13:50', '13:55']
         }, {
            axisPointer: {
               show: false
            },
            axisLine: {
               lineStyle: {
                  color: '#57617B'
               }
            },
            axisTick: {
               show: false
            },

            position: 'bottom',
            offset: 20,
            data: ['', '', '', '', '', '', '', '', '', '', {
               value: '周六',
               textStyle: {
                  align: 'left'
               }
            }, '周日']
            data: xLabels
         }],
         yAxis: [{
            type: 'value',
            name: '单位（%）',
            name: props.unit,
            axisTick: {
               show: false
               show: true,
            },
            axisLine: {
          show: true,
               lineStyle: {
                  color: '#57617B'
                  color: '#fff'
               }
            },
            axisLabel: {
               margin: 10,
               textStyle: {
                  fontSize: 14
               }
               fontSize: 12,
          color: '#fff'
            },
            splitLine: {
               lineStyle: {
                  color: '#57617B'
                  color: 'rgba(255,255,255,0.2)'
               }
            }
         }],
         series: [{
            name: '移动',
            name: props.type,
            type: 'line',
            smooth: true,
            symbol: 'circle',
            symbolSize: 5,
            showSymbol: false,
            lineStyle: {
               normal: {
                  width: 1
               }
          width: 1
            },
            areaStyle: {
               normal: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                     offset: 0,
                     color: 'rgba(137, 189, 27, 0.3)'
                  }, {
                     offset: 0.8,
                     color: 'rgba(137, 189, 27, 0)'
                  }], false),
                  shadowColor: 'rgba(0, 0, 0, 0.1)',
                  shadowBlur: 10
               }
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
            offset: 0,
            color: 'rgba(0, 136, 212, 0.3)'
          }, {
            offset: 0.8,
            color: 'rgba(0, 136, 212, 0)'
          }], false),
          shadowColor: 'rgba(0, 0, 0, 0.1)',
          shadowBlur: 10
            },
            itemStyle: {
               normal: {
                  color: 'rgb(137,189,27)',
                  borderColor: 'rgba(137,189,2,0.27)',
                  borderWidth: 12

               }
          color: 'rgb(0,136,212)',
          borderColor: 'rgba(0,136,212,0.2)',
          borderWidth: 12
            },
            data: [220, 182, 191, 134, 150, 120, 110, 125, 145, 122, 165, 122]
         }, {
            name: '电信',
            type: 'line',
            smooth: true,
            symbol: 'circle',
            symbolSize: 5,
            showSymbol: false,
            lineStyle: {
               normal: {
                  width: 1
               }
            },
            areaStyle: {
               normal: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                     offset: 0,
                     color: 'rgba(0, 136, 212, 0.3)'
                  }, {
                     offset: 0.8,
                     color: 'rgba(0, 136, 212, 0)'
                  }], false),
                  shadowColor: 'rgba(0, 0, 0, 0.1)',
                  shadowBlur: 10
               }
            },
            itemStyle: {
               normal: {
                  color: 'rgb(0,136,212)',
                  borderColor: 'rgba(0,136,212,0.2)',
                  borderWidth: 12

               }
            },
            data: [120, 110, 125, 145, 122, 165, 122, 220, 182, 191, 134, 150]
         }, {
            name: '联通',
            type: 'line',
            smooth: true,
            symbol: 'circle',
            symbolSize: 5,
            showSymbol: false,
            lineStyle: {
               normal: {
                  width: 1
               }
            },
            areaStyle: {
               normal: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                     offset: 0,
                     color: 'rgba(219, 50, 51, 0.3)'
                  }, {
                     offset: 0.8,
                     color: 'rgba(219, 50, 51, 0)'
                  }], false),
                  shadowColor: 'rgba(0, 0, 0, 0.1)',
                  shadowBlur: 10
               }
            },
            itemStyle: {
               normal: {

                  color: 'rgb(219,50,51)',
                  borderColor: 'rgba(219,50,51,0.2)',
                  borderWidth: 12
               }
            },
            data: [220, 182, 125, 145, 122, 191, 134, 150, 120, 110, 165, 122]
         },]
            data: datas
         }]
      };

      return option;
@@ -218,15 +126,18 @@
   }

   function updateChart(xLabels, datas) {
      let option = getOptions(xLabels, datas);
    // if (myChart) {

    //   myChart.setOption(option);
    // }
    if (chart.value) {
         let option = getOptions(xLabels, datas);
      chart.value.setOption(option);
      }
   }

  defineExpose({
    updateChart
  });

   onMounted(() => {
    console.log('line mounted', '=============');
    // console.log('line mounted', '=============');
    
      initChart();
   });