Skip to content

E
energyai_vue
Commit 4b982186 authored by xiexingan's avatar xiexingan
Browse files
Options

图表调整

parent e38f0869
Show whitespace changes
Inline Side-by-side
Showing with 102 additions and 553 deletions
src/pages/analysis/outdoor/chart.vue
View file @ 4b982186
//
<template lang='pug'> <template lang='pug'>
#chart(:style="{ width: '100%', height: '90%'}") div(:id="id", :style="{ width: '100%', height: '90%' }")
</template> </template>
<script> <script>
export default { export default {
props: ['id', 'data', 'title', 'color'],
watch: {
data() {
this.initChart()
}
},
mounted() { mounted() {
this.chart() this.initChart()
}, },
methods: { methods: {
chart() { initChart() {
let dom = document.getElementById('chart') let dom = document.getElementById(this.id)
if (!dom) return if (!dom) return
let myCharts = this.$echarts.init(dom) let myCharts = this.$echarts.init(dom)
let option = { let option = {
// color:['#D0F0FF'], // color:['#D0F0FF'],
title: { title: {
text: '温度' text: this.title
}, },
tooltip: { tooltip: {
trigger: 'axis' trigger: 'axis'
}, },
grid: { grid: {
left: '3%', left: '3%',
right: '4%',
bottom: '3%', bottom: '3%',
containLabel: true containLabel: true
}, },
xAxis: [ xAxis: [
{ {
type: 'category', // type: 'category',
boundaryGap: false, type: 'time',
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'] boundaryGap: false
} }
], ],
yAxis: [ yAxis: [
...@@ -53,7 +59,7 @@ export default { ...@@ -53,7 +59,7 @@ export default {
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [ color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ {
offset: 0, offset: 0,
color: '#21ACFC' // 0% 处的颜色 color: this.color // 0% 处的颜色
}, },
{ {
offset: 1, offset: 1,
...@@ -63,7 +69,7 @@ export default { ...@@ -63,7 +69,7 @@ export default {
} }
}, },
lineStyle: { lineStyle: {
color: '#21ACFC' color: this.color
}, },
itemStyle: { itemStyle: {
normal: { normal: {
...@@ -73,7 +79,7 @@ export default { ...@@ -73,7 +79,7 @@ export default {
emphasis: { emphasis: {
focus: 'series' focus: 'series'
}, },
data: [820, 932, 901, 934, 1290, 1330, 1320] data: this.data
} }
] ]
} }
......
src/pages/analysis/outdoor/chart2.vue deleted 100644 → 0
View file @ e38f0869
<template lang='pug'>
#chart2(:style="{ width: '100%', height: '90%'}")
</template>
<script>
export default {
mounted() {
this.chart2()
},
methods: {
chart2() {
let dom = document.getElementById('chart2')
if (!dom) return
let myCharts = this.$echarts.init(dom)
let option = {
// color:['#D0F0FF'],
title: {
text: '湿度'
},
tooltip: {
trigger: 'axis'
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [
{
type: 'category',
boundaryGap: false,
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
}
],
yAxis: [
{
type: 'value'
}
],
series: [
{
name: '订单数量',
type: 'line',
stack: '总量',
smooth: true,
// label: {
// show: true,
// position: 'top'
// },
areaStyle: {
normal: {
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#36CBCB' // 0% 处的颜色
},
{
offset: 1,
color: '#fff' // 100% 处的颜色
}
])
}
},
lineStyle: {
color: '#36CBCB'
},
itemStyle: {
normal: {
color: '#13B0FF'
}
},
emphasis: {
focus: 'series'
},
data: [820, 932, 901, 934, 1290, 1330, 1320]
}
]
}
myCharts.setOption(option)
}
}
}
</script>
<style lang="scss" scoped>
</style>
src/pages/analysis/outdoor/chart3.vue deleted 100644 → 0
View file @ e38f0869
<template lang='pug'>
#chart3(:style="{ width: '100%', height: '90%'}")
</template>
<script>
export default {
mounted() {
this.chart3()
},
methods: {
chart3() {
let dom = document.getElementById('chart3')
if (!dom) return
let myCharts = this.$echarts.init(dom)
let option = {
// color:['#D0F0FF'],
title: {
text: '风速'
},
tooltip: {
trigger: 'axis'
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [
{
type: 'category',
boundaryGap: false,
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
}
],
yAxis: [
{
type: 'value'
}
],
series: [
{
name: '订单数量',
type: 'line',
stack: '总量',
smooth: true,
// label: {
// show: true,
// position: 'top'
// },
areaStyle: {
normal: {
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#3AA0FF' // 0% 处的颜色
},
{
offset: 1,
color: '#fff' // 100% 处的颜色
}
])
}
},
lineStyle: {
color: '#3AA0FF'
},
itemStyle: {
normal: {
color: '#13B0FF'
}
},
emphasis: {
focus: 'series'
},
data: [820, 932, 901, 934, 1290, 1330, 1320]
}
]
}
myCharts.setOption(option)
}
}
}
</script>
<style lang="scss" scoped>
</style>
src/pages/analysis/outdoor/chart4.vue deleted 100644 → 0
View file @ e38f0869
<template lang='pug'>
#chart4(:style="{ width: '100%', height: '90%'}")
</template>
<script>
export default {
mounted() {
this.chart4()
},
methods: {
chart4() {
let dom = document.getElementById('chart4')
if (!dom) return
let myCharts = this.$echarts.init(dom)
let option = {
// color:['#D0F0FF'],
title: {
text: '光照'
},
tooltip: {
trigger: 'axis'
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [
{
type: 'category',
boundaryGap: false,
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
}
],
yAxis: [
{
type: 'value'
}
],
series: [
{
name: '订单数量',
type: 'line',
stack: '总量',
smooth: true,
// label: {
// show: true,
// position: 'top'
// },
areaStyle: {
normal: {
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#FAD337' // 0% 处的颜色
},
{
offset: 1,
color: '#fff' // 100% 处的颜色
}
])
}
},
lineStyle: {
color: '#FAD337'
},
itemStyle: {
normal: {
color: '#13B0FF'
}
},
emphasis: {
focus: 'series'
},
data: [820, 932, 901, 934, 1290, 1330, 1320]
}
]
}
myCharts.setOption(option)
}
}
}
</script>
<style lang="scss" scoped>
</style>
src/pages/analysis/outdoor/chart5.vue deleted 100644 → 0
View file @ e38f0869
<template lang='pug'>
#chart5(:style="{ width: '100%', height: '90%' }")
</template>
<script>
export default {
mounted() {
this.chart5()
},
methods: {
chart5() {
let dom = document.getElementById('chart5')
if (!dom) return
let myCharts = this.$echarts.init(dom)
let option = {
// color:['#D0F0FF'],
title: {
text: 'CO2'
},
tooltip: {
trigger: 'axis'
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [
{
type: 'category',
boundaryGap: false,
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
}
],
yAxis: [
{
type: 'value'
}
],
series: [
{
name: '订单数量',
type: 'line',
stack: '总量',
smooth: true,
// label: {
// show: true,
// position: 'top'
// },
areaStyle: {
normal: {
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#4ECB74' // 0% 处的颜色
},
{
offset: 1,
color: '#fff' // 100% 处的颜色
}
])
}
},
lineStyle: {
color: '#4ECB74'
},
itemStyle: {
normal: {
color: '#13B0FF'
}
},
emphasis: {
focus: 'series'
},
data: [820, 932, 901, 934, 1290, 1330, 1320]
}
]
}
myCharts.setOption(option)
}
}
}
</script>
<style lang="scss" scoped>
</style>
src/pages/analysis/outdoor/chart7.vue deleted 100644 → 0
View file @ e38f0869
<template lang='pug'>
#chart7(:style="{ width: '100%', height: '90%' }")
</template>
<script>
export default {
mounted() {
this.chart7()
},
methods: {
chart7() {
let dom = document.getElementById('chart7')
if (!dom) return
let myCharts = this.$echarts.init(dom)
let option = {
// color:['#D0F0FF'],
title: {
text: '辐射'
},
tooltip: {
trigger: 'axis'
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [
{
type: 'category',
boundaryGap: false,
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
}
],
yAxis: [
{
type: 'value'
}
],
series: [
{
name: '订单数量',
type: 'line',
stack: '总量',
smooth: true,
// label: {
// show: true,
// position: 'top'
// },
areaStyle: {
normal: {
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#975FE4' // 0% 处的颜色
},
{
offset: 1,
color: '#fff' // 100% 处的颜色
}
])
}
},
lineStyle: {
color: '#975FE4'
},
itemStyle: {
normal: {
color: '#13B0FF'
}
},
emphasis: {
focus: 'series'
},
data: [820, 932, 901, 934, 1290, 1330, 1320]
}
]
}
myCharts.setOption(option)
}
}
}
</script>
<style lang="scss" scoped>
</style>
src/pages/analysis/outdoor/index.vue
View file @ 4b982186
...@@ -6,104 +6,66 @@ card-warp(title="室外气象分析", height="45px", showBackground) ...@@ -6,104 +6,66 @@ card-warp(title="室外气象分析", height="45px", showBackground)
div(slot="content", style="height: 90%") div(slot="content", style="height: 90%")
el-form(:inline="true", size="mini") el-form(:inline="true", size="mini")
el-form-item(label="设备名称：") el-form-item(label="设备名称：")
el-input(type="primary", size="mini" v-model='name' readOnly) el-input(type="primary", size="mini", v-model="name", readOnly)
el-form-item(label="时间范围：") el-form-item(label="时间范围：")
el-date-picker( el-button(
size="mini", size="mini",
v-model="startTime", type="primary",
align="right", @click="handleDate(index)",
type="date", v-for="(item, index) in typeList",
placeholder="选择日期", :key="index",
:picker-options="pickerOptions" :class="[index == currentActive ? 'isActive' : '']"
) ) {{ item.name }}
span(style="padding: 0 10px") 至
el-date-picker(
size="mini",
v-model="endTime",
align="right",
type="date",
placeholder="选择日期",
:picker-options="pickerOptions"
)
el-button(size="mini", type="primary") 查询
.echartsWarp(width="100%", flex) .echartsWarp(width="100%", flex)
div(v-for='item in chartList' :key='item.id')
chart(:id="item.id", :data="data", :title="item.title", :color="item.color")
div div
chart pie
div
chart2
div
chart3
div
chart4
div
chart5
div
chart6
div
chart7
div
pie8
</template> </template>
<script> <script>
import chart from './chart' import chart from './chart'
import chart2 from './chart2' import pie from './pie'
import chart3 from './chart3'
import chart4 from './chart4'
import chart5 from './chart5'
import chart6 from './chart6'
import chart7 from './chart7'
import pie8 from './pie8'
export default { export default {
components: { components: {
chart, chart,
chart2, pie
chart3,
chart4,
chart5,
chart6,
chart7,
pie8
}, },
data() { data() {
return { return {
activeName: '1', chartList: [
name: '室外气象站', { id: '11', title: '温度', color: '#21ACFC' },
startTime: '', { id: '22', title: '湿度', color: '#36CBCB' },
endTime: '', { id: '33', title: '风速', color: '#3AA0FF' },
pickerOptions: { { id: '44', title: '光照', color: '#FAD337' },
disabledDate(time) { { id: '55', title: 'CO2', color: '#4ECB74' },
return time.getTime() > Date.now() { id: '66', title: 'PM2.5', color: '#999999' },
}, { id: '77', title: '辐射', color: '#975FE4' }
shortcuts: [ ],
{ data: [
text: '今天', ['2019-8-14 8:00:00', 70],
onClick(picker) { ['2019-8-14 8:00:01', 60],
picker.$emit('pick', new Date()) ['2019-8-14 8:00:02', 30],
} ['2019-8-14 8:00:03', 79],
}, ['2019-8-14 8:00:06', 10],
{ ['2019-8-14 8:00:20', 31]
text: '昨天', ],
onClick(picker) { typeList: [
const date = new Date() { name: '当日' },
date.setTime(date.getTime() - 3600 * 1000 * 24) { name: '本周' },
picker.$emit('pick', date) { name: '当月' },
} { name: '今年' }
}, ],
{ currentActive: '0',
text: '一周前', name: '室外气象站'
onClick(picker) {
const date = new Date()
date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
picker.$emit('pick', date)
}
}
]
}
} }
}, },
methods: { methods: {
getDataList() {} getDataList() {},
// 当日 ，本周
handleDate(i) {
this.currentActive = i
}
} }
} }
</script> </script>
...@@ -127,7 +89,7 @@ export default { ...@@ -127,7 +89,7 @@ export default {
color: #000000; color: #000000;
line-height: 40px; line-height: 40px;
&::before { &::before {
content: ''; content: "";
display: inline-block; display: inline-block;
width: 10px; width: 10px;
height: 10px; height: 10px;
...@@ -138,4 +100,9 @@ export default { ...@@ -138,4 +100,9 @@ export default {
} }
} }
} }
// 选中
.isActive {
background: #4cb527 !important;
border: transparent 1px solid;
}
</style> </style>
src/pages/analysis/outdoor/chart6.vue → src/pages/components/chart.vue
View file @ 4b982186
// 曲线图 ==》 （首页，数据分析）
<template lang='pug'> <template lang='pug'>
#chart6(:style="{ width: '100%', height: '90%' }") div(:id="id", :style="{ width: '100%', height: '90%' }")
</template> </template>
<script> <script>
export default { export default {
props: ['id', 'data', 'title', 'color'],
watch: {
data() {
this.initChart()
}
},
mounted() { mounted() {
this.chart6() this.initChart()
}, },
methods: { methods: {
chart6() { initChart() {
let dom = document.getElementById('chart6') let dom = document.getElementById(this.id)
if (!dom) return if (!dom) return
let myCharts = this.$echarts.init(dom) let myCharts = this.$echarts.init(dom)
let option = { let option = {
// color:['#D0F0FF'], // color:['#D0F0FF'],
title: { title: {
text: 'PM2.5' text: this.title
}, },
tooltip: { tooltip: {
trigger: 'axis' trigger: 'axis'
}, },
grid: { grid: {
left: '3%', left: '3%',
right: '4%',
bottom: '3%', bottom: '3%',
containLabel: true containLabel: true
}, },
xAxis: [ xAxis: [
{ {
type: 'category', // type: 'category',
boundaryGap: false, type: 'time',
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'] boundaryGap: false
} }
], ],
yAxis: [ yAxis: [
...@@ -54,7 +59,7 @@ export default { ...@@ -54,7 +59,7 @@ export default {
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [ color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ {
offset: 0, offset: 0,
color: '#999999' // 0% 处的颜色 color: this.color // 0% 处的颜色
}, },
{ {
offset: 1, offset: 1,
...@@ -64,7 +69,7 @@ export default { ...@@ -64,7 +69,7 @@ export default {
} }
}, },
lineStyle: { lineStyle: {
color: '#999999' color: this.color
}, },
itemStyle: { itemStyle: {
normal: { normal: {
...@@ -74,7 +79,7 @@ export default { ...@@ -74,7 +79,7 @@ export default {
emphasis: { emphasis: {
focus: 'series' focus: 'series'
}, },
data: [820, 932, 901, 934, 1290, 1330, 1320] data: this.data
} }
] ]
} }
......
src/pages/home/page.vue
View file @ 4b982186
...@@ -94,7 +94,7 @@ ...@@ -94,7 +94,7 @@
</el-row> </el-row>
<div style="height: calc(100% - 130px)"> <div style="height: calc(100% - 130px)">
<!-- <energy-total-charts></energy-total-charts> --> <!-- <energy-total-charts></energy-total-charts> -->
<chart></chart> <chart id="11" :data="data" title="温度" color="#21ACFC"></chart>
</div> </div>
</div> </div>
</card-list> </card-list>
...@@ -113,15 +113,15 @@ ...@@ -113,15 +113,15 @@
<script> <script>
import cardList from '../components/cardList' import cardList from '../components/cardList'
import energyTotalCharts from '../components/energyTotalCharts' // import energyTotalCharts from '../components/energyTotalCharts'
import myPies from '../components/myPies' import myPies from '../components/myPies'
import chart from './chart'
// import CardList from './compontents/cardList.vue'; // import CardList from './compontents/cardList.vue';
import chart from '@/pages/components/chart.vue'
export default { export default {
name: 'home', name: 'home',
components: { components: {
cardList, cardList,
energyTotalCharts, // energyTotalCharts,
myPies, myPies,
chart chart
}, },
...@@ -181,6 +181,14 @@ export default { ...@@ -181,6 +181,14 @@ export default {
// value: "05", // value: "05",
// label: "全年", // label: "全年",
// }, // },
],
data: [
['2019-8-14 8:00:00', 70],
['2019-8-14 8:00:01', 60],
['2019-8-14 8:00:02', 30],
['2019-8-14 8:00:03', 79],
['2019-8-14 8:00:06', 10],
['2019-8-14 8:00:20', 31]
] ]
} }
}, },
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment