From 50ee7232f3c98fe24a1f2e31dba9508cfec14887 Mon Sep 17 00:00:00 2001
From: gjj <Ganjj@probim.com.cn>
Date: Fri, 21 Feb 2025 17:35:39 +0800
Subject: [PATCH] 模型预览
---
src/components/V2Echarts.vue | 176 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 176 insertions(+), 0 deletions(-)
diff --git a/src/components/V2Echarts.vue b/src/components/V2Echarts.vue
new file mode 100644
index 0000000..037b6e5
--- /dev/null
+++ b/src/components/V2Echarts.vue
@@ -0,0 +1,176 @@
+<template>
+ <div
+ :id="idName"
+ :style="`margin-top:${top}px`"
+ class="echarts w-full h-full"
+ >
+ </div>
+</template>
+
+<script>
+import * as echarts from 'echarts'
+export default {
+ name: 'V2Echarts',
+ props: {
+ options: {
+ type: Object,
+ default: () => {},
+ require: true
+ },
+ // 传入id名称
+ idName: {
+ type: String,
+ default: () => {
+ return ''
+ },
+ require: true
+ },
+ width: {
+ type: String,
+ default: () => {
+ return '410'
+ }
+ },
+ height: {
+ type: String,
+ default: () => {
+ return '290'
+ }
+ },
+ top: {
+ type: String,
+ default: () => {
+ return '0'
+ }
+ }
+ },
+ data () {
+ return {
+ myChart: null,
+ resizeObserver: null,
+ }
+ },
+
+ watch: {
+ options: {
+ handler (newVal) {
+ this.setChartEvents(newVal)
+ },
+ deep: true,
+ immediate: true
+ }
+ },
+ created() {
+ this.$nextTick(this.initTheChart)
+ },
+ methods: {
+ // 初始化图表
+ initTheChart() {
+ this.myChart = echarts.init(document.getElementById(this.idName))
+ this.myChart.setOption(this.options, true)
+
+ // 鼠标移入图表时，不为第一条时就取消第一条的高亮效果
+ this.myChart.on('mouseover', v => {
+ if (v.dataIndex !== 0) {
+ this.myChart.dispatchAction({
+ type: 'downplay',
+ seriesIndex: 0,
+ dataIndex: 0
+ })
+ }
+ if (this.idName === 'jinzhanqushi' || this.idName === 'dailogjinzhanqushi') {
+ this.myChart.setOption({
+ tooltip: {
+ // 鼠标在折线上，系列内横向比对，显示系列名称
+ formatter: function(p) {
+ const ynames = ['年度计划完成', '预计年度完成', '预计年度TBM', '预计年度钻爆']
+ if (ynames.indexOf(p[v.seriesIndex].seriesName) !== -1) {
+ return p[v.seriesIndex].marker +
+ ' ' + p[v.seriesIndex].seriesName + ':' + p[v.seriesIndex].value + 'm'
+ } else {
+ let dataStr = ''
+ const valMap = {};
+ p.forEach(element => {
+ const seriesName = element.seriesName; // 图例名称
+ const value = element.value; // y轴值
+
+ // 过滤无效值
+ if (value === '-') {
+ return
+ }
+ // 过滤重叠值
+ if (valMap[seriesName] === value) {
+ return
+ }
+ if (ynames.indexOf(seriesName) === -1) {
+ dataStr += `<span style="display:inline-block;margin-right:5px;width:10px;height:10px;background-color:${element.color};"></span>`
+ dataStr += `${element.seriesName}: <span style="font-size:16px;font-weight:600;">${element.data ? element.data : 0}m</span> <br>`
+ valMap[seriesName] = value;
+ }
+ });
+ return dataStr
+ }
+ }
+ }
+ })
+ }
+ })
+ // 鼠标图表时默认显示第一条
+ this.myChart.on('mouseout', v => {
+ this.myChart.dispatchAction({
+ type: 'highlight',
+ seriesIndex: 0,
+ dataIndex: 0
+ })
+ })
+ // this.myChart.on('click', function (param) {
+ // console.log('param', param)
+ // })
+ // 监听窗口变化 - 只刷新最后一个图表
+ window.onresize = () => {
+ this.myChart.resize()
+ }
+ // 监听窗口变化 - 多个图表同时刷新
+ window.addEventListener('resize', () => {
+ this.myChart.resize()
+ })
+ },
+ // 设置图表的事件
+ setChartEvents (options) {
+ // console.log(options, this.idName)
+ if (!this.myChart) return
+ this.myChart.setOption(options, true)
+ // 刷新时默认显示第一条
+ this.myChart.dispatchAction({
+ type: 'highlight',
+ seriesIndex: 0,
+ dataIndex: 0
+ })
+ },
+ setResize() {
+ this.$nextTick(() => {
+ // 使echarts尺寸重置
+ if (this.myChart) {
+ this.myChart.resize()
+ }
+ })
+ }
+ },
+ mounted() {
+ // 当屏幕改变，图表重新动态改变并渲染
+ const self = this;
+ const viewElem = document.body;
+ // 调用实例对象的observe方法，监听整个body节点的变化，当改变窗口大小或者某个DOM节点出现或隐藏时时，就会触发回调
+ this.resizeObserver = new ResizeObserver(() => {
+ if (!self.myChart) return
+ self.myChart.resize();
+ });
+ this.resizeObserver.observe(viewElem);
+ },
+ beforeDestroy() {
+ if (this.resizeObserver) {
+ this.resizeObserver.unobserve(document.body)
+ }
+ }
+}
+</script>
--
Gitblit v1.9.3