联调实时数据页面

src/components/echarts/MyEchart.vue

@@ -15,8 +15,7 @@ import { color, gradeColor3 } from './color'
 import { useConfig } from '@/stores/config'
 const config = useConfig()
 // import { nextTick } from 'process'
-
-
+const emit = defineEmits(['triggerPoint'])
 color[0] = config.layout.elementUiPrimary[0]
 const chartRef = ref<HTMLDivElement>()
 
@@ -37,7 +36,7 @@ const initChart = () => {
         chart?.dispose()
     }
     // chart?.dispose()
-    chart = echarts.init(chartRef.value as HTMLDivElement)
+    chart = echarts.getInstanceByDom(chartRef.value as HTMLDivElement) || echarts.init(chartRef.value as HTMLDivElement)
     const options = {
         title: {
             left: 'center',
@@ -69,10 +68,11 @@ const initChart = () => {
         },
         toolbox: {
             right: 20,
-            top: 20,
+            top: 15,
             feature: {
                 saveAsImage: {
-                    title: '保存图片',
+                    title: '', // 按钮标题
+                    icon: 'path://M892.342857 463.238095l-73.142857-68.266666-258.438095 258.438095V29.257143h-97.52381v624.152381L204.8 394.971429 131.657143 463.238095l380.342857 380.342857zM107.27619 897.219048h804.571429v97.523809H107.27619z' // 自定义图标路径
                 },
 
                 ...(props.options?.toolbox?.featureProps || null)
@@ -87,8 +87,8 @@ const initChart = () => {
             ...(props.options?.toolbox || null)
         },
         legend: {
-            right: 20,
-            top: 0,
+            right: 50,
+            top: 25,
             itemGap: 10,
             itemStyle: {},
             // textStyle: {
@@ -100,7 +100,7 @@ const initChart = () => {
             ...(props.options?.legend || null)
         },
         grid: {
-            top: '60px',
+            top: '70px',
             left: '30px',
             right: '70px',
             bottom: props.options?.options?.dataZoom === null ? '10px' : '40px',
@@ -132,7 +132,13 @@ const initChart = () => {
     handlerBar(options)
     // 处理柱状图
     chart.setOption(options, true)
-
+    chart.group = 'group'
+    // 添加点击事件
+    chart.on('click', function (params) {
+        if (params.seriesName == '暂态触发点') {
+            emit('triggerPoint', params.data)
+        }
+    })
     setTimeout(() => {
         chart.resize()
     }, 0)
@@ -223,9 +229,9 @@ const handlerXAxis = () => {
             // textStyle: {
             fontFamily: 'dinproRegular',
             color: '#000',
-            fontSize: '12',
+            fontSize: '12'
             // }
-        },
+        }
         // boundaryGap: false,
     }
     // props.options?.xAxis 是数组还是对象
@@ -256,11 +262,17 @@ const resizeObserver = new ResizeObserver(entries => {
         }, 100)
     }
 })
+const setOptions = (options: any) => {
+    chart.setOption(options)
+}
+const getChart = () => {
+    return chart
+}
 onMounted(() => {
     initChart()
     resizeObserver.observe(chartRef.value!)
 })
-defineExpose({ initChart })
+defineExpose({ initChart, setOptions, getChart })
 onBeforeUnmount(() => {
     resizeObserver.unobserve(chartRef.value!)
     chart?.dispose()