diff --git a/src/components/content/badGasInfo/BadGasInfo.vue b/src/components/content/badGasInfo/BadGasInfo.vue index 7d8334b..39cb4f7 100644 --- a/src/components/content/badGasInfo/BadGasInfo.vue +++ b/src/components/content/badGasInfo/BadGasInfo.vue @@ -7,7 +7,7 @@
-
+
@@ -25,108 +25,9 @@ const props = defineProps({ }); const isVisited = ref(false); const badGasList = ref([]) -const chart = ref(null); +const chart = ref(); let myEcharts = reactive({}); -const option = reactive({ - //图例 - legend: { - left: 0, - textStyle:{ - color:'#FFFFFF', - fontSize:28 - }, - // itemWidth: 20, - // itemHeight: 20 - }, - //离容器四侧的距离 - grid: { - left: 45, // 左边距 - // right: 60, // 右边距 - top: 60, // 顶边距 - bottom: 40, // 底边距 - // containLabel: true, - }, - //提示框组件 - tooltip: { - show: true, - trigger: 'axis' - }, - //X轴 - xAxis: { - type: 'category', - data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], - axisLabel: { - textStyle: { - fontSize: 24, - color:'#D6F1FA' - }, - }, - }, - //Y轴 - yAxis: { - type: 'value', - - axisLabel: { - textStyle: { - fontSize: 24, - color:'#D6F1FA' - }, - }, - }, - //配置项 - series: [ - { - name: '二氧化碳', - data: [5, 9, 10, 7, 8, 15, 12], - type: 'line', - smooth: true, - symbolSize:24, - lineStyle:{ - width:5 - } - }, - { - name: '一氧化碳', - data: [8, 15, 5, 9, 10, 7, 12], - type: 'line', - smooth: true, - symbolSize:24, - lineStyle:{ - width:5 - } - }, - { - name: '二氧化氮', - data: [5, 15, 1, 9, 10, 7, 8], - type: 'line', - smooth: true, - symbolSize:24, - lineStyle:{ - width:5 - } - }, - { - name: '二氧化硫', - data: [8, 15, 12, 5, 9, 2, 7], - type: 'line', - smooth: true, - symbolSize:24, - lineStyle:{ - width:5 - } - }, - { - name: '硫化氢', - data: [2, 9, 10, 15, 12, 7, 8,], - type: 'line', - smooth: true, - symbolSize:24, - lineStyle:{ - width:5 - } - }, - ] -}) +// const option = reactive() watch(() => props.list, (now) => { badGasList.value.forEach(item => { @@ -142,12 +43,6 @@ watch(() => props.badGasData, (now) => { getBadGasInfo(now.sensorList) }, {deep: true}); -onMounted(() => { - nextTick(() => { - initChart() - }) -}) - const getBadGasInfo = (now) => { let windPressureObj = {} let windPressureArr = [] @@ -172,16 +67,118 @@ const changeData = (item) => { const handleOpenChart = () => { console.log('有害气体弹窗') isVisited.value = true - initChart() + nextTick(() => { + initChart() + }) + // initChart() } /** * 初始化echarts实例方法 */ const initChart = () => { //3.初始化container容器 - myEcharts = echarts.init(chart.value); + myEcharts = echarts.init(document.getElementById('container')); //5.传入数据 - myEcharts.setOption(option, true); + let option={ + //图例 + legend: { + left: 0, + textStyle:{ + color:'#FFFFFF', + fontSize:28 + }, + // itemWidth: 20, + // itemHeight: 20 + }, + //离容器四侧的距离 + grid: { + left: 45, // 左边距 + // right: 60, // 右边距 + top: 60, // 顶边距 + bottom: 40, // 底边距 + // containLabel: true, + }, + //提示框组件 + tooltip: { + show: true, + trigger: 'axis' + }, + //X轴 + xAxis: { + type: 'category', + data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], + axisLabel: { + textStyle: { + fontSize: 24, + color:'#D6F1FA' + }, + }, + }, + //Y轴 + yAxis: { + type: 'value', + axisLabel: { + textStyle: { + fontSize: 24, + color:'#D6F1FA' + }, + }, + }, + //配置项 + series: [ + { + name: '二氧化碳', + data: [5, 9, 10, 7, 8, 15, 12], + type: 'line', + smooth: true, + symbolSize:24, + lineStyle:{ + width:5 + } + }, + { + name: '一氧化碳', + data: [8, 15, 5, 9, 10, 7, 12], + type: 'line', + smooth: true, + symbolSize:24, + lineStyle:{ + width:5 + } + }, + { + name: '二氧化氮', + data: [5, 15, 1, 9, 10, 7, 8], + type: 'line', + smooth: true, + symbolSize:24, + lineStyle:{ + width:5 + } + }, + { + name: '二氧化硫', + data: [8, 15, 12, 5, 9, 2, 7], + type: 'line', + smooth: true, + symbolSize:24, + lineStyle:{ + width:5 + } + }, + { + name: '硫化氢', + data: [2, 9, 10, 15, 12, 7, 8,], + type: 'line', + smooth: true, + symbolSize:24, + lineStyle:{ + width:5 + } + }, + ] + } + myEcharts.setOption(option); //图表大小自适应窗口大小变化 window.onresize = () => { myEcharts.resize();