Skip to content

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

图表调整

parent e38f0869
Hide 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'>
#chart(:style="{ width: '100%', height: '90%'}")
div(:id="id", :style="{ width: '100%', height: '90%' }")
</template>
<script>
export default {
mounted() {
this.chart()
},
methods: {
chart() {
let dom = document.getElementById('chart')
props: ['id', 'data', 'title', 'color'],
watch: {
data() {
this.initChart()
}
},
mounted() {
this.initChart()
},
methods: {
initChart() {
let dom = document.getElementById(this.id)
if (!dom) return
let myCharts = this.$echarts.init(dom)
let option = {
// color:['#D0F0FF'],
title: {
text: '温度'
text: this.title
},
tooltip: {
trigger: 'axis'
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [
{
type: 'category',
boundaryGap: false,
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
// type: 'category',
type: 'time',
boundaryGap: false
}
],
yAxis: [
......@@ -43,7 +49,7 @@ export default {
name: '订单数量',
type: 'line',
stack: '总量',
smooth: true,
smooth: true,
// label: {
// show: true,
// position: 'top'
......@@ -53,7 +59,7 @@ export default {
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#21ACFC' // 0% 处的颜色
color: this.color // 0% 处的颜色
},
{
offset: 1,
......@@ -63,7 +69,7 @@ export default {
}
},
lineStyle: {
color: '#21ACFC'
color: this.color
},
itemStyle: {
normal: {
......@@ -73,13 +79,13 @@ export default {
emphasis: {
focus: 'series'
},
data: [820, 932, 901, 934, 1290, 1330, 1320]
data: this.data
}
]
}
myCharts.setOption(option)
}
}
}
}
</script>
......
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)
div(slot="content", style="height: 90%")
el-form(:inline="true", size="mini")
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-date-picker(
el-button(
size="mini",
v-model="startTime",
align="right",
type="date",
placeholder="选择日期",
:picker-options="pickerOptions"
)
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") 查询
type="primary",
@click="handleDate(index)",
v-for="(item, index) in typeList",
:key="index",
:class="[index == currentActive ? 'isActive' : '']"
) {{ item.name }}
.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
chart
div
chart2
div
chart3
div
chart4
div
chart5
div
chart6
div
chart7
div
pie8
pie
</template>
<script>
import chart from './chart'
import chart2 from './chart2'
import chart3 from './chart3'
import chart4 from './chart4'
import chart5 from './chart5'
import chart6 from './chart6'
import chart7 from './chart7'
import pie8 from './pie8'
import pie from './pie'
export default {
components: {
chart,
chart2,
chart3,
chart4,
chart5,
chart6,
chart7,
pie8
pie
},
data() {
return {
activeName: '1',
name: '室外气象站',
startTime: '',
endTime: '',
pickerOptions: {
disabledDate(time) {
return time.getTime() > Date.now()
},
shortcuts: [
{
text: '今天',
onClick(picker) {
picker.$emit('pick', new Date())
}
},
{
text: '昨天',
onClick(picker) {
const date = new Date()
date.setTime(date.getTime() - 3600 * 1000 * 24)
picker.$emit('pick', date)
}
},
{
text: '一周前',
onClick(picker) {
const date = new Date()
date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
picker.$emit('pick', date)
}
}
]
}
chartList: [
{ id: '11', title: '温度', color: '#21ACFC' },
{ id: '22', title: '湿度', color: '#36CBCB' },
{ id: '33', title: '风速', color: '#3AA0FF' },
{ id: '44', title: '光照', color: '#FAD337' },
{ id: '55', title: 'CO2', color: '#4ECB74' },
{ id: '66', title: 'PM2.5', color: '#999999' },
{ id: '77', title: '辐射', color: '#975FE4' }
],
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]
],
typeList: [
{ name: '当日' },
{ name: '本周' },
{ name: '当月' },
{ name: '今年' }
],
currentActive: '0',
name: '室外气象站'
}
},
methods: {
getDataList() {}
getDataList() {},
// 当日 ，本周
handleDate(i) {
this.currentActive = i
}
}
}
</script>
......@@ -127,7 +89,7 @@ export default {
color: #000000;
line-height: 40px;
&::before {
content: '';
content: "";
display: inline-block;
width: 10px;
height: 10px;
......@@ -138,4 +100,9 @@ export default {
}
}
}
// 选中
.isActive {
background: #4cb527 !important;
border: transparent 1px solid;
}
</style>
src/pages/analysis/outdoor/chart6.vue → src/pages/components/chart.vue
View file @ 4b982186
// 曲线图 ==》 （首页，数据分析）
<template lang='pug'>
#chart6(:style="{ width: '100%', height: '90%' }")
div(:id="id", :style="{ width: '100%', height: '90%' }")
</template>
<script>
export default {
props: ['id', 'data', 'title', 'color'],
watch: {
data() {
this.initChart()
}
},
mounted() {
this.chart6()
this.initChart()
},
methods: {
chart6() {
let dom = document.getElementById('chart6')
initChart() {
let dom = document.getElementById(this.id)
if (!dom) return
let myCharts = this.$echarts.init(dom)
let option = {
// color:['#D0F0FF'],
title: {
text: 'PM2.5'
text: this.title
},
tooltip: {
trigger: 'axis'
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [
{
type: 'category',
boundaryGap: false,
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
// type: 'category',
type: 'time',
boundaryGap: false
}
],
yAxis: [
......@@ -54,7 +59,7 @@ export default {
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#999999' // 0% 处的颜色
color: this.color // 0% 处的颜色
},
{
offset: 1,
......@@ -64,7 +69,7 @@ export default {
}
},
lineStyle: {
color: '#999999'
color: this.color
},
itemStyle: {
normal: {
......@@ -74,7 +79,7 @@ export default {
emphasis: {
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 @@
</el-row>
<div style="height: calc(100% - 130px)">
<!-- <energy-total-charts></energy-total-charts> -->
<chart></chart>
<chart id="11" :data="data" title="温度" color="#21ACFC"></chart>
</div>
</div>
</card-list>
......@@ -113,15 +113,15 @@
<script>
import cardList from '../components/cardList'
import energyTotalCharts from '../components/energyTotalCharts'
// import energyTotalCharts from '../components/energyTotalCharts'
import myPies from '../components/myPies'
import chart from './chart'
// import CardList from './compontents/cardList.vue';
import chart from '@/pages/components/chart.vue'
export default {
name: 'home',
components: {
cardList,
energyTotalCharts,
// energyTotalCharts,
myPies,
chart
},
......@@ -181,6 +181,14 @@ export default {
// value: "05",
// 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