Browse Source

refactor: 多轴图表修改,未完

master
wally 4 years ago
parent
commit
9e5a6ba53e
  1. 34
      src/components/statistical/stastistical-chart.vue
  2. 220
      src/utils/statistical.js
  3. 7
      src/views/statistical-report.vue

34
src/components/statistical/stastistical-chart.vue

@ -6,8 +6,9 @@
</template>
<script setup>
import { defineExpose, defineProps, onMounted, ref } from 'vue';
import { generateChartOption } from 'utils/statistical';
import { computed, defineExpose, defineProps, onMounted, ref, watchEffect } from 'vue';
import { useStore } from 'vuex';
import { generateChartOption, generateDefaultYAxis, generateYAxis } from 'utils/statistical';
import * as echarts from 'echarts/core';
import { DataZoomComponent, GridComponent, LegendComponent, ToolboxComponent, TooltipComponent } from 'echarts/components';
import { LineChart } from 'echarts/charts';
@ -25,30 +26,41 @@ echarts.use([
DataZoomComponent,
]);
const store = useStore();
const props = defineProps({ searchHeight: Number });
const show = ref(false);
const realtimeData = computed(() => store.state.statistics.realtimeData);
const isMounted = ref(false);
const noData = ref(true);
let myChart = null;
//
onMounted(() => {
show.value = true;
initChart();
isMounted.value = true;
});
watchEffect(() => {
if (!realtimeData.value) return;
const { data } = realtimeData.value;
if (!data || !data.length || !isMounted.value) return;
initChart(data);
});
// chart
function initChart() {
function initChart(data) {
const chartDom = document.getElementById('realtimeContainer');
const canvasHeight = document.documentElement.clientHeight - props.searchHeight - 150;
console.log(canvasHeight, document.documentElement.clientHeight, props.searchHeight);
chartDom.style.height = `${canvasHeight}px`;
myChart && myChart.dispose();
myChart = echarts.init(chartDom);
render(data, generateDefaultYAxis());
myChart.on('legendselectchanged', event => {
render(data, generateYAxis(event.selected));
});
}
function render(data) {
myChart && myChart.clear();
function render(data, yAxis) {
// myChart && myChart.clear();
if (!data || !data.length) {
noData.value = true;
return;
@ -58,7 +70,7 @@ function render(data) {
if (!myChart) {
initChart();
}
const option = generateChartOption(data);
const option = generateChartOption(data, yAxis);
option && myChart.setOption(option);
}

220
src/utils/statistical.js

@ -43,13 +43,136 @@ function generateParams(data) {
return result;
}
const yAxisData = [
{
type: 'value',
name: 'SO2(ppb)',
position: 'left',
axisLine: {
show: true,
lineStyle: { color: colors[0] },
},
axisLabel: { formatter: '{value}ppb' },
},
{
type: 'value',
name: '盐分阻抗(Ω)',
// min: 0,
// max: 250,
position: 'left',
offset: 70,
axisLine: {
show: true,
lineStyle: { color: colors[1] },
},
axisLabel: { formatter: '{value}Ω' },
},
{
type: 'value',
name: '环温(℃)',
// min: 0,
// max: 25,
position: 'left',
offset: 135,
axisLine: {
show: true,
lineStyle: { color: colors[2] },
},
axisLabel: { formatter: '{value}°C' },
},
{
type: 'value',
name: '环湿(RH%)',
// min: 0,
// max: 25,
position: 'left',
offset: 200,
axisLine: {
show: true,
lineStyle: { color: colors[3] },
},
axisLabel: { formatter: '{value}RH%' },
},
{
type: 'value',
name: '锌腐蚀电流(nA)',
position: 'right',
axisLine: {
show: true,
lineStyle: { color: colors[4] },
},
axisLabel: { formatter: '{value}' },
},
{
type: 'value',
name: '铜腐蚀电流(nA)',
offset: 100,
position: 'right',
axisLine: {
show: true,
lineStyle: { color: colors[5] },
},
axisLabel: { formatter: '{value}' },
},
{
type: 'value',
name: '铝腐蚀电流(nA)',
offset: 200,
position: 'right',
axisLine: {
show: true,
lineStyle: { color: colors[6] },
},
axisLabel: { formatter: '{value}' },
},
{
type: 'value',
name: '钢腐蚀电流(nA)',
offset: 300,
position: 'right',
axisLine: {
show: true,
lineStyle: { color: colors[7] },
},
axisLabel: { formatter: '{value}' },
},
];
/**
* 生产y轴内容
* @param {Object} selectedLegend
* @returns {({axisLabel: {formatter: string}, axisLine: {lineStyle: {color: string}, show: boolean}, name: string, position: string, type: string}|{axisLabel: {formatter: string}, offset: number, axisLine: {lineStyle: {color: string}, show: boolean}, name: string, position: string, type: string}|{axisLabel: {formatter: string}, offset: number, axisLine: {lineStyle: {color: string}, show: boolean}, name: string, position: string, type: string}|{axisLabel: {formatter: string}, offset: number, axisLine: {lineStyle: {color: string}, show: boolean}, name: string, position: string, type: string}|{axisLabel: {formatter: string}, axisLine: {lineStyle: {color: string}, show: boolean}, name: string, position: string, type: string})[]}
*/
export function generateYAxis(selectedLegend) {
console.log(selectedLegend);
return yAxisData.filter(item => selectedLegend[item.name]);
}
/**
* 生成初始状态的y轴
* @returns {({axisLabel: {formatter: string}, axisLine: {lineStyle: {color: string}, show: boolean}, name: string, position: string, type: string}|{axisLabel: {formatter: string}, offset: number, axisLine: {lineStyle: {color: string}, show: boolean}, name: string, position: string, type: string}|{axisLabel: {formatter: string}, offset: number, axisLine: {lineStyle: {color: string}, show: boolean}, name: string, position: string, type: string}|{axisLabel: {formatter: string}, offset: number, axisLine: {lineStyle: {color: string}, show: boolean}, name: string, position: string, type: string}|{axisLabel: {formatter: string}, axisLine: {lineStyle: {color: string}, show: boolean}, name: string, position: string, type: string})[]}
*/
export function generateDefaultYAxis() {
const selectedLegend = [
{
'钢腐蚀电流(nA)': true,
'铜腐蚀电流(nA)': true,
'铝腐蚀电流(nA)': true,
'锌腐蚀电流(nA)': true,
},
];
return yAxisData.filter(item => selectedLegend.find(selected => selected[item.name]));
}
/**
* 生成chart参数
* @param {Object[]} rawData 返回段返回的data数据
* @param {Object[]} yAxis
* @returns {{yAxis: [{axisLabel: {formatter: string}, axisLine: {lineStyle: {color: string}, show: boolean}, name: string, position: string, type: string},{axisLabel: {formatter: string}, offset: number, axisLine: {lineStyle: {color: string}, show: boolean}, name: string, position: string, type: string},{axisLabel: {formatter: string}, axisLine: {lineStyle: {color: string}, show: boolean}, name: string, position: string, type: string},{axisLabel: {formatter: string}, axisLine: {lineStyle: {color: string}, show: boolean}, name: string, position: string, type: string},{axisLabel: {formatter: string}, axisLine: {lineStyle: {color: string}, show: boolean}, name: string, position: string, type: string},null,null,null], xAxis: [{data: *[], axisTick: {alignWithLabel: boolean}, type: string}], color: string[], grid: {right: string}, legend: {data: string[]}, series: [{data: *[], name: string, type: string},{data: *[], name: string, type: string, yAxisIndex: number},{data: *[], name: string, type: string, yAxisIndex: number},{data: *[], name: string, type: string, yAxisIndex: number},{data: *[], name: string, type: string, yAxisIndex: number},null,null,null], tooltip: {axisPointer: {type: string}, trigger: string}, toolbox: {feature: {saveAsImage: {show: boolean}, restore: {show: boolean}, dataView: {show: boolean, readOnly: boolean}}}}}
*/
// eslint-disable-next-line import/prefer-default-export
export function generateChartOption(rawData) {
export function generateChartOption(rawData, yAxis) {
console.log(yAxis);
const data = generateParams(rawData);
const option = {
color: colors,
@ -72,100 +195,7 @@ export function generateChartOption(rawData) {
data: data.time,
},
],
yAxis: [
{
type: 'value',
name: 'SO2(ppb)',
position: 'left',
axisLine: {
show: true,
lineStyle: { color: colors[0] },
},
axisLabel: { formatter: '{value}ppb' },
},
{
type: 'value',
name: '盐分阻抗(Ω)',
// min: 0,
// max: 250,
position: 'left',
offset: 70,
axisLine: {
show: true,
lineStyle: { color: colors[1] },
},
axisLabel: { formatter: '{value}Ω' },
},
{
type: 'value',
name: '环温(℃)',
// min: 0,
// max: 25,
position: 'left',
offset: 135,
axisLine: {
show: true,
lineStyle: { color: colors[2] },
},
axisLabel: { formatter: '{value}°C' },
},
{
type: 'value',
name: '环湿(RH%)',
// min: 0,
// max: 25,
position: 'left',
offset: 200,
axisLine: {
show: true,
lineStyle: { color: colors[3] },
},
axisLabel: { formatter: '{value}RH%' },
},
{
type: 'value',
name: '锌腐蚀电流(nA)',
position: 'right',
axisLine: {
show: true,
lineStyle: { color: colors[4] },
},
axisLabel: { formatter: '{value}' },
},
{
type: 'value',
name: '铜腐蚀电流(nA)',
offset: 100,
position: 'right',
axisLine: {
show: true,
lineStyle: { color: colors[5] },
},
axisLabel: { formatter: '{value}' },
},
{
type: 'value',
name: '铝腐蚀电流(nA)',
offset: 200,
position: 'right',
axisLine: {
show: true,
lineStyle: { color: colors[6] },
},
axisLabel: { formatter: '{value}' },
},
{
type: 'value',
name: '钢腐蚀电流(nA)',
offset: 300,
position: 'right',
axisLine: {
show: true,
lineStyle: { color: colors[7] },
},
axisLabel: { formatter: '{value}' },
},
],
yAxis: yAxisData,
series: [
{
name: 'SO2(ppb)',

7
src/views/statistical-report.vue

@ -1,6 +1,6 @@
<template>
<SearchBar ref="searchBar" :loading-search="loadingSearch" @search="onSearch" />
<HistoryData ref="childRef" :search-height="searchHeight" class="mt-4" />
<HistoryData :search-height="searchHeight" class="mt-4" />
</template>
<script setup>
@ -9,13 +9,10 @@ import HistoryData from 'components/statistical/stastistical-chart.vue';
import { computed, onMounted, ref } from 'vue';
import { useStore } from 'vuex';
const childRef = ref(null);
const searchBar = ref(null);
let timer = null;
const store = useStore();
const token = computed(() => store.getters['user/token']);
const realtimeData = computed(() => store.state.statistics.realtimeData);
const currentDeviceId = computed(() => store.state.device.currentDeviceId); // id
const search = ref({});
const loadingSearch = ref(false);
@ -37,6 +34,7 @@ onMounted(() => {
const getData = async () => {
try {
if (token && token.value) {
if (!currentDeviceId.value) return;
loadingSearch.value = true;
const options = { ...search.value };
const date = options && options.date ? options.date : [];
@ -48,7 +46,6 @@ const getData = async () => {
await store.dispatch('statistics/getRealtimeData', params);
timer && clearTimeout(timer);
timer = null;
childRef.value.render(realtimeData.value.data);
loadingSearch.value = false;
} else {
loadingSearch.value = false;

Loading…
Cancel
Save