UA 整理提交

he wei

5 天以前 3c3576d5792bfabcef84979757ee344712e71cd3

 src/components/echarts/BaseChart.vue

@@ -2,249 +2,68 @@
import * as echarts from "echarts";
import "./transparent";
import { onMounted, onBeforeUnmount, ref, nextTick } from "vue";
import eventBus from "@/utils/eventBus";

const chart_instance = ref(null);
let exportChart_instance = ref(null);
let chart_instance = null;
let exportChart_instance = null;

const chart = ref(null);
const exportChart = ref(null);
const fullScreenFlag = ref(false);
const emit = defineEmits(["click"]);
const emit = defineEmits(["click", "update:fullFlag"]);

const props = defineProps({
  fullFlag: {
    type: Boolean,
    default: false,
  }
});

const fullScreenFlag = ref(props.fullFlag);



  onMounted(() => {
    console.log('base mounted',chart.value, '=============');
    
    chart_instance.value = echarts.init(chart.value, "transparent");
    exportChart_instance.value = echarts.init(exportChart.value, "transparent");

    let option = getOptions();
    // chart_instance.value = echarts.init(chart.value, "transparent");
    chart_instance = echarts.init(chart.value, "transparent");
    exportChart_instance = echarts.init(exportChart.value, "transparent");

    nextTick(() => {
      chart_instance.value.resize();
      chart_instance.value.setOption(option);
      chart_instance.resize();
    });
    window.addEventListener("resize", resize);

    eventBus.on("toggleSiteList", () => {
      console.log('toggleSiteList', '=============');
      setTimeout(() => {
        resize();
        // 因为过渡设置了0.5s,所以需要等待0.5s后再resize
      }, 500);
      
    });

  });

  onBeforeUnmount(() => {
    window.removeEventListener("resize", resize);
    eventBus.off("toggleSiteList");
    dispose();
  });

  function getOptions() {

      const option = {
         // title: {
         //    text: '请求数',
         //    textStyle: {
         //       fontWeight: 'normal',
         //       fontSize: 16,
         //       color: '#F1F1F3'
         //    },
         //    left: '6%'
         // },
         tooltip: {
            trigger: 'axis',
            axisPointer: {
               lineStyle: {
                  color: '#57617B'
               }
            }
         },
         // legend: {
         //    icon: 'rect',
         //    itemWidth: 14,
         //    itemHeight: 5,
         //    itemGap: 13,
         //    data: ['移动', '电信', '联通'],
         //    right: '4%',
         //    textStyle: {
         //       fontSize: 12,
         //       color: '#F1F1F3'
         //    }
         // },
         grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
         },
         xAxis: [{
            type: 'category',
            boundaryGap: false,
            axisLine: {
               lineStyle: {
                  color: '#57617B'
               }
            },
            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'
               }
            }, '周日']
         }],
         yAxis: [{
            type: 'value',
            name: '单位（%）',
            axisTick: {
               show: false
            },
            axisLine: {
               lineStyle: {
                  color: '#57617B'
               }
            },
            axisLabel: {
               margin: 10,
               textStyle: {
                  fontSize: 14
               }
            },
            splitLine: {
               lineStyle: {
                  color: '#57617B'
               }
            }
         }],
         series: [{
            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(137, 189, 27, 0.3)'
                  }, {
                     offset: 0.8,
                     color: 'rgba(137, 189, 27, 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

               }
            },
            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]
         },]
      };

      return option;
   }

  function getChart() {
    return chart_instance.value;
    return chart_instance;
  }

  function setOption(option) {
    if (chart_instance.value) {
      chart_instance.value.setOption(option);
    if (chart_instance) {
      chart_instance.setOption(option);
    }
  }

  function fullScreen() {
    fullScreenFlag.value = !fullScreenFlag.value;
    emit("update:fullFlag", fullScreenFlag.value);
    nextTick(() => {
      resize();
    });
@@ -252,19 +71,24 @@

  function getDataURL() {
    let base64 = "";
    if (exportChart_instance.value) {
      let option = chart_instance.value.getOption();
    if (exportChart_instance) {
      let option = chart_instance.getOption();
      option.xAxis[0].axisLine.lineStyle = {
        color: "#000",
      };
      option.xAxis[0].axisLabel.textStyle = option.xAxis[0].axisLabel.textStyle || {};
      option.xAxis[0].axisLabel.textStyle.color = "#000";

      option.yAxis[0].axisLine.lineStyle = {
        color: "#000",
      };
      option.yAxis[0].axisLabel.textStyle = option.yAxis[0].axisLabel.textStyle || {};
      option.yAxis[0].axisLabel.textStyle.color = "#000";
      exportChart_instance.value.setOption(option);
      base64 = exportChart_instance.value.getDataURL({
      
      option.animation = false;

      exportChart_instance.setOption(option);
      base64 = exportChart_instance.getDataURL({
        pixelRatio: 1,
        backgroundColor: "#fff",
      });
@@ -273,16 +97,14 @@
  }

  function resize() {
    if (chart_instance.value) {
      chart_instance.value.resize();
      console.log('resize', '=============');
      
    if (chart_instance) {
      chart_instance.resize();
    }
  }

  function dispose() {
    disposeChart(chart_instance.value);
    disposeChart(exportChart_instance.value);
    disposeChart(chart_instance);
    disposeChart(exportChart_instance);
  }

  function disposeChart(chart) {
@@ -306,9 +128,9 @@
  <div
    class="e-chart-root"
    :class="{ 'full-screen': fullScreenFlag }"
    @click="handleClick"
    @dblclick="fullScreen"
  >
    <!-- @click="handleClick"
    @dblclick="fullScreen" -->
    <div class="e-chart-container">
      <div class="e-chart" ref="chart"></div>
      <slot name="tools"></slot>