- <template>
- <!-- 实时水质 -->
- <div :id="id" style="width: 100%; height: 100%"></div>
- </template>
- <script setup>
- import { guid } from '@/utils/ruoyi';
- import { nextTick } from 'vue';
- import moment from 'moment';
-
- const id = guid();
- const myChart = shallowRef('');
- import * as echarts from 'echarts';
- import { nowSize } from '@/utils/util.js';
-
- const { proxy } = getCurrentInstance();
-
- const props = defineProps({
- data: {
- type: Object,
- default: () => [],
- },
- //刷新
- refresh: {
- type: Number,
- },
- });
-
- watch(
- () => props.refresh,
- value => {
- console.log('???????');
- //先销毁实例
- myChart.value && myChart.value.dispose();
- init();
- },
- {
- deep: true,
- }
- );
-
- function init() {
- let position = ['insideStartTop', 'insideMiddleTop', 'insideEndBottom'];
- myChart.value = echarts.init(document.getElementById(id));
-
- let maxnh4n=Number((Math.max(...[Number(props.data.marklineObj.nh4n),...props.data.nh4n]) * 1.2))
- console.log('123',maxnh4n);
- // console.log('2222332',(Math.max(...[Number(props.data.marklineObj.nh4n),...props.data.nh4n]) * 1.1).toFixed(2));
- let option = {
- tooltip: {
- trigger: 'axis',
- backgroundColor: '#004284',
- borderColor: '#0B9BFF',
- borderRadius: 6, // 设置圆角大小
- // 自定义提示框文本样
- formatter: function (params) {
- let res = params[0].name + '<br/>';
- params.forEach(function (item) {
- // 对每个数据项的数值进行格式化,保留两位小数
- let text= `<div class="flex flex-justcontent-spacebetween">
- <span>${item.marker}${item.seriesName}</span>
- <span>${(item.value == null ? '-' : Number(item.value).toFixed(2))}</span>
- </div>`
- res +=text ;
- });
- return res;
- },
- textStyle: {
- // 字体颜色
- color: 'white',
- // 字体大小
- fontSize: nowSize(14, 1920),
-
- },
- },
- legend: {
- data: ['氨氮(mg/L)', '溶解氧(mg/L)', 'COD(mg/L)', '电导率(μS/cm)', 'PH值'],
- orient: "horizontal", //horizontal横向 vertical 纵向
- type: "scroll",
- x: "center", //居右显示
- align: "left", //图例控制在左边
- textStyle: {
- color: '#FFFFFF',
- fontSize: nowSize(12, 1920),
- },
- },
- grid: {
- top: 52,
- left: 20,
- right: 25,
- bottom: 10,
- containLabel: true,
- },
-
- xAxis: {
- type: 'category',
- boundaryGap: true,
- // show: false,
- data: props.data.XAxis,
- axisLabel: {
- color: 'rgba(255,255,255,1)',
- fontSize: nowSize(12, 1920),
- fontFamily: 'AlibabaPuHuiTi',
- formatter: function (value) {
- return moment(value).format('HH:MM');
- },
- },
- },
- dataZoom: [
- {
- // show: true,
- show: false,
- height: 4,
- bottom: 10,
- start: 0,
- end: 60,
- handleSize: '100%',
- fillerColor: '#94FA41',
- borderColor: 'transparent',
- backgroundColor: 'rgba(148, 250, 65, 0.2)',
- handleStyle: {
- color: '#94FA41',
- },
- moveHandleSize: 0,
- textStyle: {
- color: '#fff',
- },
- },
- {
- type: 'inside',
- show: true,
- height: 15,
- start: 0,
- end: 60,
- },
- ],
- yAxis: [
-
- {
- name: '氨氮',
- type: 'value',
- // minInterval: 1,
-
- min: 0,
- max:Number((Math.max(...[Number(props.data.marklineObj.nh4n),...props.data.nh4n]) * 1.3)).toFixed(2),
-
- axisLabel: {
- color: '#259543',
- show: true,
- formatter: function (value) {
- return value.toFixed(1); // 保留两位小数
- },
- },
-
- nameTextStyle: {
- color: '#259543',
- padding: [0, 0, 0, -5],
- },
- splitLine: {
- show: false,
- lineStyle: {
- type: 'dashed',
- color: '#2161a8',
- },
- },
-
- alignTicks: true,
- position: 'left',
- inverse: true,
- nameLocation: 'start',
- offset: 28,
- },
- {
- name: '溶解氧',
- type: 'value',
- // minInterval: 1,
- min: 0,
- max:(Math.max(...[Number(props.data.marklineObj.DO),...props.data.DO]) * 1.3).toFixed(2),
-
- axisLabel: {
- color: '#b14de5',
- show: true,
- formatter: function (value) {
- return value.toFixed(0); // 保留两位小数
- },
- },
- nameTextStyle: {
- color: '#b14de5',
- padding: [0, 0, 0, -5],
- },
- splitLine: {
- show: false,
- lineStyle: {
- type: 'dashed',
- color: '#2161a8',
- },
- },
- // alignTicks: true,
- position: 'left',
- offset: -5,
- },
- {
- name: 'COD',
- type: 'value',
- // minInterval: 1,
- min: 0,
- max:(Math.max(...[Number(props.data.marklineObj.codcr),...props.data.codcr]) * 1.3).toFixed(2),
- axisLabel: {
- color: '#99FF55',
- show: true,
- // formatter: function (value) {
- // return value.toFixed(2); // 保留两位小数
- // },
- },
- nameTextStyle: {
- color: '#99FF55',
- padding: [0, 0, 0, 10],
- },
- splitLine: {
- show: false,
- lineStyle: {
- type: 'dashed',
- color: '#2161a8',
- },
- },
- // alignTicks: true,
- position: 'right',
- offset: -5,
- },
-
- {
- name: '电导率',
- type: 'value',
- // minInterval: 1,
- min: 0,
- axisLabel: {
- color: '#FFC155',
- show: true,
- // formatter: function (value) {
- // return value.toFixed(2); // 保留两位小数
- // },
- },
- nameTextStyle: {
- color: '#FFC155',
- padding: [0, 0, 0, 15],
- },
- splitLine: {
- show: false,
- lineStyle: {
- type: 'dashed',
- color: '#2161a8',
- },
- },
- // alignTicks: true,
- position: 'right',
- offset: 28,
- },
- {
- name: 'PH值',
- type: 'value',
- // minInterval: 1,
- min: 0,
- axisLabel: {
- color: '#009BE9',
- show: true,
- // formatter: function (value) {
- // return value.toFixed(2); // 保留两位小数
- // },
- },
- nameTextStyle: {
- color: '#009BE9',
- padding: [0, 0, 0, 15],
- },
- splitLine: {
- show: false,
- lineStyle: {
- type: 'dashed',
- color: '#2161a8',
- },
- },
- // alignTicks: true,
- position: 'right',
- offset: 62,
- },
- ],
- series: [
- {
- name: '氨氮(mg/L)',
- type: 'line',
- data: props.data.nh4n,
- yAxisIndex: 0,
- symbolSize: 7,
- // 修改折线颜色
- lineStyle: {
- color: '#259543', // 折线颜色
- width: 2, // 折线宽度
- },
- // 修改数据点颜色
- itemStyle: {
- color: '#259543', // 数据点颜色
- width: 4,
- },
- markLine: {
- data: [
- {
- yAxis: props.data.marklineObj.nh4n, // 这是水平线的 Y 轴值
- lineStyle: {
- type: 'dashed',
- color: '#259543', // 线的颜色
- },
- label: {
- show: true,
- formatter: '氨氮警戒线:' + props.data.marklineObj.nh4n,
- color: '#259543',
- fontSize: nowSize(12, 1920),
- position: 'middle',
- },
- },
- ],
- symbol: ['none', 'none'], // 这里设置标记线两端的标记为'none',即不显示箭头
- },
- },
- {
- name: '溶解氧(mg/L)',
- type: 'line',
- data: props.data.DO,
- yAxisIndex: 1,
- symbolSize: 7,
- // 修改折线颜色
- lineStyle: {
- color: '#b14de5', // 折线颜色
- width: 2, // 折线宽度
- },
- // 修改数据点颜色
- itemStyle: {
- color: '#b14de5', // 数据点颜色
- width: 4,
- },
- markLine: {
- data: [
- {
- yAxis: props.data.marklineObj.DO, // 这是水平线的 Y 轴值
- lineStyle: {
- type: 'dashed',
- color: '#b14de5', // 线的颜色
- },
- label: {
- show: true,
- formatter: '溶解氧警戒线:' + props.data.marklineObj.DO,
- color: '#b14de5',
- fontSize: nowSize(12, 1920),
- position: 'middle',
- },
- },
- ],
- symbol: ['none', 'none'], // 这里设置标记线两端的标记为'none',即不显示箭头
- },
- },
- {
- name: 'COD(mg/L)',
- type: 'line',
- data: props.data.codcr,
- yAxisIndex: 2,
- // 修改折线颜色
- lineStyle: {
- color: '#99FF55', // 折线颜色
- width: 2, // 折线宽度
- },
- // 修改数据点颜色
- itemStyle: {
- color: '#99FF55', // 数据点颜色
- },
- markLine: {
- data: [
- {
- yAxis: props.data.marklineObj.codcr, // 这是水平线的 Y 轴值
- lineStyle: {
- type: 'dashed',
- color: '#99FF55', // 线的颜色
- },
- label: {
- show: true,
- formatter: 'COD警戒线:' + props.data.marklineObj.codcr,
- color: '#99FF55',
- fontSize: nowSize(12, 1920),
- position: 'middle',
- },
- },
- ],
- symbol: ['none', 'none'], // 这里设置标记线两端的标记为'none',即不显示箭头
- },
- },
- {
- name: '电导率(μS/cm)',
- type: 'line',
- data: props.data.cond,
- yAxisIndex: 3,
- // 修改折线颜色
- lineStyle: {
- color: '#FFC155', // 折线颜色
- width: 2, // 折线宽度
- },
- // 修改数据点颜色
- itemStyle: {
- color: '#FFC155', // 数据点颜色
- },
- },
- {
- name: 'PH值',
- type: 'line',
- data: props.data.ph,
- yAxisIndex: 4,
- // 修改折线颜色
- lineStyle: {
- color: '#009BE9', // 折线颜色
- width: 2, // 折线宽度
- },
- // 修改数据点颜色
- itemStyle: {
- color: '#009BE9', // 数据点颜色
- },
- },
- ],
- };
-
- option && myChart.value.setOption(option);
- }
-
- function resizeTheChart() {
- if (myChart.value) {
- myChart.value.resize();
- }
- }
- onMounted(() => {
- nextTick(() => {
- init();
- window.addEventListener('resize', resizeTheChart);
- });
- });
- </script>