|
|
@@ -24,8 +24,8 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="main-contents">
|
|
|
- <!-- <div class="main" ref="main"></div> -->
|
|
|
- <echartLine :setid="main" ref="main" style="width: 100%; height: 100%"></echartLine>
|
|
|
+ <div class="main" ref="main"></div>
|
|
|
+ <!-- <echartLine :setid="main" ref="main" style="width: 100%; height: 100%"></echartLine> -->
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
@@ -33,8 +33,8 @@
|
|
|
<script lang="ts" setup>
|
|
|
import { ref, reactive, onMounted, nextTick, defineProps, watch } from 'vue';
|
|
|
import { SvgIcon } from '/@/components/Icon';
|
|
|
- import echartLine from './EchartLineCharacter3.vue'
|
|
|
- // import * as echarts from 'echarts';
|
|
|
+ // import echartLine from './EchartLineCharacter3.vue'
|
|
|
+ import * as echarts from 'echarts';
|
|
|
|
|
|
|
|
|
let props = defineProps({
|
|
|
@@ -73,193 +73,195 @@
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- // function getOption() {
|
|
|
- // nextTick(() => {
|
|
|
- // const myChart = echarts.init(main.value);
|
|
|
- // let option = {
|
|
|
- // tooltip: {
|
|
|
- // trigger: 'axis',
|
|
|
- // axisPointer: {
|
|
|
- // type: 'cross',
|
|
|
- // },
|
|
|
- // },
|
|
|
+ function getOption() {
|
|
|
+ nextTick(() => {
|
|
|
+ const myChart = echarts.init(main.value);
|
|
|
+ let option = {
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis',
|
|
|
+ axisPointer: {
|
|
|
+ type: 'cross',
|
|
|
+ },
|
|
|
+ },
|
|
|
|
|
|
|
|
|
- // grid: {
|
|
|
- // top: '22%',
|
|
|
- // left: '5%',
|
|
|
- // right: '16%',
|
|
|
- // bottom: '5%',
|
|
|
- // containLabel: true,
|
|
|
- // },
|
|
|
+ grid: {
|
|
|
+ top: '22%',
|
|
|
+ left: '5%',
|
|
|
+ right: '16%',
|
|
|
+ bottom: '5%',
|
|
|
+ containLabel: true,
|
|
|
+ },
|
|
|
|
|
|
- // xAxis: [
|
|
|
- // {
|
|
|
- // type: 'category',
|
|
|
- // name: '负压(Pa)',
|
|
|
- // nameTextStyle: {
|
|
|
- // color: '#b3b8cc',
|
|
|
- // fontSize: 12,
|
|
|
- // padding: -5,
|
|
|
- // },
|
|
|
- // // boundaryGap: false,
|
|
|
- // axisLine: {
|
|
|
- // //坐标轴轴线相关设置。数学上的x轴
|
|
|
- // show: true,
|
|
|
- // lineStyle: {
|
|
|
- // color: 'rgba(62, 103, 164)',
|
|
|
- // },
|
|
|
- // },
|
|
|
- // axisLabel: {
|
|
|
- // //坐标轴刻度标签的相关设置
|
|
|
- // textStyle: {
|
|
|
- // color: '#b3b8cc',
|
|
|
- // padding: 0,
|
|
|
- // fontSize: 14,
|
|
|
- // },
|
|
|
- // formatter: function (data) {
|
|
|
- // return data;
|
|
|
- // },
|
|
|
- // },
|
|
|
- // splitLine: {
|
|
|
- // show: false,
|
|
|
- // },
|
|
|
- // axisTick: {
|
|
|
- // show: false,
|
|
|
- // },
|
|
|
- // data: echartData.xdata,
|
|
|
- // },
|
|
|
- // ],
|
|
|
+ xAxis: [
|
|
|
+ {
|
|
|
+ type: 'category',
|
|
|
+ name: '负压(Pa)',
|
|
|
+ nameTextStyle: {
|
|
|
+ color: '#b3b8cc',
|
|
|
+ fontSize: 12,
|
|
|
+ padding: -5,
|
|
|
+ },
|
|
|
+ // boundaryGap: false,
|
|
|
+ axisLine: {
|
|
|
+ //坐标轴轴线相关设置。数学上的x轴
|
|
|
+ show: true,
|
|
|
+ lineStyle: {
|
|
|
+ color: 'rgba(62, 103, 164)',
|
|
|
+ },
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ //坐标轴刻度标签的相关设置
|
|
|
+ textStyle: {
|
|
|
+ color: '#b3b8cc',
|
|
|
+ padding: 0,
|
|
|
+ fontSize: 14,
|
|
|
+ },
|
|
|
+ formatter: function (data) {
|
|
|
+ return data;
|
|
|
+ },
|
|
|
+ },
|
|
|
+ splitLine: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ axisTick: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ data: echartData.xdata,
|
|
|
+ },
|
|
|
+ ],
|
|
|
|
|
|
- // yAxis: [
|
|
|
- // {
|
|
|
- // name: '风量\n(m³/min)',
|
|
|
- // nameTextStyle: {
|
|
|
- // color: '#b3b8cc',
|
|
|
- // fontSize: 12,
|
|
|
- // padding: -5,
|
|
|
- // },
|
|
|
- // min: 0,
|
|
|
- // splitLine: {
|
|
|
- // show: true,
|
|
|
- // lineStyle: {
|
|
|
- // color: 'rgba(62, 103, 164,.4)',
|
|
|
- // },
|
|
|
- // },
|
|
|
- // axisLine: {
|
|
|
- // show: true,
|
|
|
- // lineStyle: {
|
|
|
- // color: 'rgba(62, 103, 164)',
|
|
|
- // },
|
|
|
- // },
|
|
|
- // axisLabel: {
|
|
|
- // show: true,
|
|
|
- // textStyle: {
|
|
|
- // color: '#b3b8cc',
|
|
|
- // padding: 0,
|
|
|
- // fontSize: 14,
|
|
|
- // },
|
|
|
- // formatter: function (value) {
|
|
|
- // if (value === 0) {
|
|
|
- // return value;
|
|
|
- // }
|
|
|
- // return value;
|
|
|
- // },
|
|
|
- // },
|
|
|
- // axisTick: {
|
|
|
- // show: false,
|
|
|
- // },
|
|
|
- // },
|
|
|
- // ],
|
|
|
- // series: [
|
|
|
- // {
|
|
|
- // name: '风量',
|
|
|
- // type: 'line',
|
|
|
- // smooth: true,
|
|
|
- // yAxisIndex: 0,
|
|
|
- // symbolSize: 6,
|
|
|
- // lineStyle: {
|
|
|
- // normal: {
|
|
|
- // width: 2,
|
|
|
- // color: 'orange', // 线条颜色
|
|
|
- // },
|
|
|
- // borderColor: 'rgba(0,0,0,.4)',
|
|
|
- // },
|
|
|
- // itemStyle: {
|
|
|
- // color: 'orange',
|
|
|
- // borderColor: '#646ace',
|
|
|
- // borderWidth: 0,
|
|
|
- // },
|
|
|
- // data: echartData.ydata,
|
|
|
- // },
|
|
|
- // {
|
|
|
- // name: '负压',
|
|
|
- // type: 'line',
|
|
|
- // smooth: true,
|
|
|
- // yAxisIndex: 0,
|
|
|
- // symbolSize: 6,
|
|
|
+ yAxis: [
|
|
|
+ {
|
|
|
+ name: '风量\n(m³/min)',
|
|
|
+ nameTextStyle: {
|
|
|
+ color: '#b3b8cc',
|
|
|
+ fontSize: 12,
|
|
|
+ padding: -5,
|
|
|
+ },
|
|
|
+ min: 0,
|
|
|
+ splitLine: {
|
|
|
+ show: true,
|
|
|
+ lineStyle: {
|
|
|
+ color: 'rgba(62, 103, 164,.4)',
|
|
|
+ },
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ show: true,
|
|
|
+ lineStyle: {
|
|
|
+ color: 'rgba(62, 103, 164)',
|
|
|
+ },
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ show: true,
|
|
|
+ textStyle: {
|
|
|
+ color: '#b3b8cc',
|
|
|
+ padding: 0,
|
|
|
+ fontSize: 14,
|
|
|
+ },
|
|
|
+ formatter: function (value) {
|
|
|
+ if (value === 0) {
|
|
|
+ return value;
|
|
|
+ }
|
|
|
+ return value;
|
|
|
+ },
|
|
|
+ },
|
|
|
+ axisTick: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: '风量',
|
|
|
+ type: 'line',
|
|
|
+ smooth: true,
|
|
|
+ yAxisIndex: 0,
|
|
|
+ symbolSize: 6,
|
|
|
+ lineStyle: {
|
|
|
+ normal: {
|
|
|
+ width: 2,
|
|
|
+ color: 'orange', // 线条颜色
|
|
|
+ },
|
|
|
+ borderColor: 'rgba(0,0,0,.4)',
|
|
|
+ },
|
|
|
+ itemStyle: {
|
|
|
+ color: 'orange',
|
|
|
+ borderColor: '#646ace',
|
|
|
+ borderWidth: 0,
|
|
|
+ },
|
|
|
+ data: echartData.ydata,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '负压',
|
|
|
+ type: 'line',
|
|
|
+ smooth: true,
|
|
|
+ yAxisIndex: 0,
|
|
|
+ symbolSize: 6,
|
|
|
|
|
|
- // lineStyle: {
|
|
|
- // normal: {
|
|
|
- // width: 2,
|
|
|
- // color: '#00ba01', // 线条颜色
|
|
|
- // },
|
|
|
- // borderColor: 'rgba(0,0,0,.4)',
|
|
|
- // },
|
|
|
- // itemStyle: {
|
|
|
- // color: '#00ba01',
|
|
|
- // borderColor: '#646ace',
|
|
|
- // borderWidth: 0,
|
|
|
- // },
|
|
|
- // data: echartData.ydata1,
|
|
|
- // },
|
|
|
- // ],
|
|
|
- // };
|
|
|
- // myChart.setOption(option);
|
|
|
- // window.onresize = function () {
|
|
|
- // myChart.resize();
|
|
|
- // };
|
|
|
- // });
|
|
|
- // }
|
|
|
- // 设置曲线数据
|
|
|
- function setChart(param,character) {
|
|
|
- // if(this.startfan !=1 && this.startfan !=2){
|
|
|
- // return
|
|
|
- // }
|
|
|
+ lineStyle: {
|
|
|
+ normal: {
|
|
|
+ width: 2,
|
|
|
+ color: '#00ba01', // 线条颜色
|
|
|
+ },
|
|
|
+ borderColor: 'rgba(0,0,0,.4)',
|
|
|
+ },
|
|
|
+ itemStyle: {
|
|
|
+ color: '#00ba01',
|
|
|
+ borderColor: '#646ace',
|
|
|
+ borderWidth: 0,
|
|
|
+ },
|
|
|
+ data: echartData.ydata1,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ };
|
|
|
+ myChart.setOption(option);
|
|
|
+ window.onresize = function () {
|
|
|
+ myChart.resize();
|
|
|
+ };
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ // //设置曲线数据
|
|
|
+ // function setChart(param,character) {
|
|
|
+ // // if(this.startfan !=1 && this.startfan !=2){
|
|
|
+ // // return
|
|
|
+ // // }
|
|
|
|
|
|
- param.dataQ = param.dataQ == null?0:param.dataQ
|
|
|
- param.dataH = param.dataH == null?0:param.dataH
|
|
|
- let Q1 = Math.round(parseFloat(param.dataQ)/60*100)/100;
|
|
|
- let H1 = parseFloat(param.dataH);
|
|
|
+ // param.dataQ = param.dataQ == null?0:param.dataQ
|
|
|
+ // param.dataH = param.dataH == null?0:param.dataH
|
|
|
+ // let Q1 = Math.round(parseFloat(param.dataQ)/60*100)/100;
|
|
|
+ // let H1 = parseFloat(param.dataH);
|
|
|
|
|
|
- let q = Q1 - character.dataha3;
|
|
|
- let h = H1 - character.dataha4;
|
|
|
- // 风压特性曲线1
|
|
|
- let data = [];
|
|
|
- // 风压特性曲线2
|
|
|
- let data2 = [];
|
|
|
- let data3 = [];
|
|
|
+ // let q = Q1 - character.dataha3;
|
|
|
+ // let h = H1 - character.dataha4;
|
|
|
+ // // 风压特性曲线1
|
|
|
+ // let data = [];
|
|
|
+ // // 风压特性曲线2
|
|
|
+ // let data2 = [];
|
|
|
+ // let data3 = [];
|
|
|
|
|
|
- for (let i = 30; i <= 400; i++) {
|
|
|
- let x = i;
|
|
|
- let y4 =
|
|
|
- character.dataha0 * (x - q) * (x - q) +
|
|
|
- character.dataha1 * (x - q) +
|
|
|
- character.dataha2 +
|
|
|
- h;
|
|
|
- data2.push([x, y4]);
|
|
|
- }
|
|
|
- for (let i = 0; i <= 400; i++) {
|
|
|
- let x = i;
|
|
|
- let y = (H1 / Q1 / Q1) * x * x;
|
|
|
- data.push([x, y]);
|
|
|
- }
|
|
|
- // if(this.$refs.chartlineCharacter != null){
|
|
|
+ // for (let i = 30; i <= 400; i++) {
|
|
|
+ // let x = i;
|
|
|
+ // let y4 =
|
|
|
+ // character.dataha0 * (x - q) * (x - q) +
|
|
|
+ // character.dataha1 * (x - q) +
|
|
|
+ // character.dataha2 +
|
|
|
+ // h;
|
|
|
+ // data2.push([x, y4]);
|
|
|
+ // }
|
|
|
+ // for (let i = 0; i <= 400; i++) {
|
|
|
+ // let x = i;
|
|
|
+ // let y = (H1 / Q1 / Q1) * x * x;
|
|
|
+ // data.push([x, y]);
|
|
|
+ // }
|
|
|
+ // // if(this.$refs.chartlineCharacter != null){
|
|
|
|
|
|
- main.value.setXData(data,data2,[[Q1, H1]]);
|
|
|
+ // main.value.setXData(data,data2,[[Q1, H1]]);
|
|
|
|
|
|
- // }
|
|
|
- }
|
|
|
+ // // }
|
|
|
+ // }
|
|
|
|
|
|
watch(
|
|
|
() => props.maindata,
|
|
|
@@ -279,11 +281,11 @@
|
|
|
}
|
|
|
);
|
|
|
onMounted(() => {
|
|
|
- // 添加resize事件监听
|
|
|
- main.value.setXMax(400);
|
|
|
- main.value.setYMax(4000);
|
|
|
- // window.addEventListener("resize", this.chartResize);
|
|
|
- setChart({ dataQ: 100, dataH: 200 }, { dataha0: 20, dataha1: 40, dataha2: 60, dataha3: 80, dataha4: 70 })
|
|
|
+ // // 添加resize事件监听
|
|
|
+ // main.value.setXMax(400);
|
|
|
+ // main.value.setYMax(4000);
|
|
|
+ // // window.addEventListener("resize", this.chartResize);
|
|
|
+ // setChart({ dataQ: 100, dataH: 200 }, { dataha0: 20, dataha1: 40, dataha2: 60, dataha3: 80, dataha4: 70 })
|
|
|
});
|
|
|
</script>
|
|
|
|
