diff --git a/src/assets/fonts/DS-DIGI-1.ttf b/src/assets/fonts/DS-DIGI-1.ttf new file mode 100644 index 0000000..0925877 Binary files /dev/null and b/src/assets/fonts/DS-DIGI-1.ttf differ diff --git a/src/assets/fonts/DS-DIGIB-2.ttf b/src/assets/fonts/DS-DIGIB-2.ttf new file mode 100644 index 0000000..064ad47 Binary files /dev/null and b/src/assets/fonts/DS-DIGIB-2.ttf differ diff --git a/src/assets/fonts/DS-DIGII-3.ttf b/src/assets/fonts/DS-DIGII-3.ttf new file mode 100644 index 0000000..2aae3d8 Binary files /dev/null and b/src/assets/fonts/DS-DIGII-3.ttf differ diff --git a/src/assets/fonts/DS-DIGIT-4.ttf b/src/assets/fonts/DS-DIGIT-4.ttf new file mode 100644 index 0000000..65642f9 Binary files /dev/null and b/src/assets/fonts/DS-DIGIT-4.ttf differ diff --git a/src/assets/images/background_app.png b/src/assets/images/background_app.png new file mode 100644 index 0000000..ae73a81 Binary files /dev/null and b/src/assets/images/background_app.png differ diff --git a/src/views/demo/charts/Line.vue b/src/views/demo/charts/Line.vue index c078942..21091f5 100644 --- a/src/views/demo/charts/Line.vue +++ b/src/views/demo/charts/Line.vue @@ -15,7 +15,7 @@ }, height: { type: String as PropType, - default: 'calc(100vh - 78px)', + default: 'calc(50vh - 200px)', }, }, setup() { @@ -24,7 +24,7 @@ const { barData, lineData, category } = getLineData; onMounted(() => { setOptions({ - backgroundColor: '#0f375f', + // backgroundColor: '#0f375f', tooltip: { trigger: 'axis', axisPointer: { @@ -35,6 +35,7 @@ }, }, }, + legend: { data: ['line', 'bar'], textStyle: { diff --git a/src/views/temperature/Gauge.vue b/src/views/temperature/Gauge.vue new file mode 100644 index 0000000..72a50ad --- /dev/null +++ b/src/views/temperature/Gauge.vue @@ -0,0 +1,143 @@ + + diff --git a/src/views/temperature/Line.vue b/src/views/temperature/Line.vue index 32a9c98..42da0df 100644 --- a/src/views/temperature/Line.vue +++ b/src/views/temperature/Line.vue @@ -25,11 +25,11 @@ import {cloneDeep} from "lodash-es"; }, minValue: { type: Number as PropType, - default: 0, + default: 15, }, maxValue: { type: Number as PropType, - default: 40, + default: 30, }, width: { type: String as PropType, @@ -37,41 +37,65 @@ import {cloneDeep} from "lodash-es"; }, height: { type: String as PropType, - default: 'calc(100vh - 78px)', + default: 'calc(50vh - 68px)', }, }, setup(props) { const chartRef = ref(null); const { setOptions, echarts } = useECharts(chartRef as Ref); const option = reactive({ - backgroundColor: '#0f375f', + backgroundColor: '#2e303e', + borderRadius: 100, + title: { + text : "今日温度", + textStyle: { + color: '#fff', + fontSize: 14, + fontWeight : 'normal' + }, + top : '10', + right : '10', + }, tooltip: { trigger: 'axis', - axisPointer: { - type: 'shadow', - label: { - show: true, - backgroundColor: '#333', - }, - }, + // axisPointer: { + // type: 'shadow', + // label: { + // show: true, + // backgroundColor: '#333', + // }, + // }, + formatter: '{b}
 {a}    {c}℃' }, xAxis: { + name: '时', data: [], + boundaryGap: false, axisLine: { + onZero: false, lineStyle: { color: '#ccc', }, }, }, yAxis: { - splitLine: { show: false }, + name: '摄氏度℃', + splitLine: { + show: true, + lineStyle: { + color: 'gray', + type: 'dashed', + } + }, axisLine: { + show : true, lineStyle: { color: '#ccc', }, }, min: props.minValue, // 设置y轴最小值为数据最小值 max: props.maxValue, // 设置y轴最大值为数据最大值 + }, series: [ // { @@ -81,6 +105,7 @@ import {cloneDeep} from "lodash-es"; // showAllSymbol: 'auto', // symbol: 'emptyCircle', // symbolSize: 15, + // // data: [], // }, // { @@ -112,21 +137,45 @@ import {cloneDeep} from "lodash-es"; //轴数据 let xAxisData = []; let yAxisData = []; + let titleData = []; props.chartData.forEach((item) => { - xAxisData.push(item.reportTime); + titleData.push(item.reportTime); + xAxisData.push(item.reportHour+":00"); yAxisData.push(item.roomTemp); }); // console.log(xAxisData); // console.log(yAxisData); let line: any = { - name: '折线', + // name: '折线', + // type: 'line', + // smooth: true, + // showAllSymbol: 'auto', + // symbol: 'emptyCircle', + name: '温度', type: 'line', + // stack: 'Total', smooth: true, - showAllSymbol: 'auto', - symbol: 'emptyCircle', - symbolSize: 15}; + // showSymbol: false, + // lineStyle: { + // width: 0 + // }, + // areaStyle: { + // opacity: 0.8, + // color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ + // { + // offset: 0, + // color: '#1890ff' + // }, + // { + // offset: 1, + // color: '#14c8d4' + // } + // ]) + // }, + symbolSize: 3 + }; let bar: any = { name: '柱图', type: 'bar', @@ -143,7 +192,7 @@ import {cloneDeep} from "lodash-es"; bar['data'] = yAxisData; let seriesData = []; seriesData.push(line); - seriesData.push(bar); + // seriesData.push(bar); option.xAxis.data = xAxisData; option.series = seriesData; console.log('option', option); diff --git a/src/views/temperature/index.vue b/src/views/temperature/index.vue index 3df9b32..922f624 100644 --- a/src/views/temperature/index.vue +++ b/src/views/temperature/index.vue @@ -1,20 +1,27 @@