Skip to content

S
SmartAgricWeb
Commit 80c8b71c authored by zhanglw's avatar zhanglw
Browse files
Options

图表

parent 02fa658b
Show whitespace changes
Inline Side-by-side
Showing with 863 additions and 5 deletions
src/views/daping.vue
View file @ 80c8b71c
......@@ -219,6 +219,7 @@
</ul>
</div>
</div>
<div ref="chart1" style="width: 100%;height: 200px; overflow: hidden;"/>
</div>
</div>
</div>
......@@ -226,19 +227,19 @@
<div class="right">
<div class="box_div">
<div class="box_title"><span>室外气象站监测</span></div>
<div ref="myCharts" class="myCharts_div"/>
<div ref="chart2" class="chart_box"/>
</div>
<div class="box_div">
<div class="box_title"><span>土壤水分监测</span></div>
<div ref="myCharts2" class="myCharts_div charts-box"/>
<div ref="chart3" class="chart_box"/>
</div>
<div class="box_div">
<div class="box_title"><span>温湿度气象监测</span></div>
<div class="myCharts_div"/>
<div ref="chart4" class="chart_box"/>
</div>
<div class="box_div">
<div class="box_title"><span>二氧化碳室外气象监测</span></div>
<div class="myCharts_div"/>
<div ref="chart5" class="chart_box"/>
</div>
</div>
</div>
......@@ -247,7 +248,10 @@
<script>
import echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import * as utils from '@/utils'
import enterpriseImg from '@/assets/home/enterpriseImg.png'
import linePoint from '@/assets/home/point.png'
export default {
data() {
......@@ -289,13 +293,861 @@ export default {
{ name: '一号基地：种植农作物1' },
{ name: '一号基地：种植农作物1' }
]
}
},
chart1: null,
chart2: null,
chart3: null,
chart4: null,
chart5: null
}
},
mounted() {
this.$nextTick(() => {
this.loadData()
})
},
methods: {
loadData() {
this.initChart1()
this.initChart2()
this.initChart3()
this.initChart4()
this.initChart5()
},
initChart1() {
this.chart1 = echarts.init(this.$refs.chart1, 'macarons')
const count = 24
const axisLine = {
show: false,
lineStyle: {
color: '#666'
}
}
const dataX = []
for (let i = 0; i < count; i++) {
dataX.push(i < 10 ? '0' + i + '时' : i + '时')
}
const option = {
tooltip: {
trigger: 'axis',
formatter: (params, ticket, callback) => {
return params[0].value + '人'
}
},
grid: {
left: '0',
right: '0',
top: '8px',
bottom: '0',
containLabel: true
},
xAxis: {
type: 'category',
boundaryGap: false,
axisLine,
axisTick: {
show: false
},
axisLabel: {
interval: 2,
color: '#BFF7FF'
},
data: dataX
},
yAxis: {
type: 'value',
axisLine,
axisTick: {
show: false
},
axisLabel: {
color: '#BFF7FF'
},
splitLine: {
show: true,
lineStyle: {
color: '#ffffff33'
}
}
},
series: [
{
type: 'line',
smooth: true,
symbol: 'image://' + linePoint,
symbolSize: 4,
showSymbol: false,
itemStyle: {
normal: {
color: '#10B1FD',
lineStyle: {
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: '#0CF4FD'
},
{
offset: 1,
color: '#0954FD'
}
],
false
)
}
}
},
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: '#10b1fd4d'
},
{
offset: 1,
color: '#2bbffd00'
}
],
false
),
shadowColor: '#2BBFFD',
shadowBlur: 20
}
},
data: utils.randNum(2, 40, count, true)
}
]
}
this.chart1.setOption(option)
},
initChart2() {
this.chart2 = echarts.init(this.$refs.chart2, 'macarons')
const count = 24
const axisLine = {
show: false,
lineStyle: {
color: '#666'
}
}
const dataX = []
for (let i = 0; i < count; i++) {
dataX.push(i < 10 ? '0' + i + '时' : i + '时')
}
const option = {
tooltip: {
trigger: 'axis',
position: (point, params, dom, rect, size) => {
return [point[0], 10]
}
},
legend: {
textStyle: {
color: '#ffffff'
}
},
grid: {
left: '8px',
right: '8px',
top: '28px',
bottom: '8px',
containLabel: true
},
xAxis: {
type: 'category',
boundaryGap: false,
axisLine,
axisTick: {
show: false
},
axisLabel: {
interval: 2,
color: '#BFF7FF'
},
data: dataX
},
yAxis: {
type: 'value',
axisLine,
axisTick: {
show: false
},
axisLabel: {
color: '#BFF7FF'
},
splitLine: {
show: true,
lineStyle: {
color: '#ffffff33'
}
}
},
series: [
{
type: 'line',
name: '空气温度',
smooth: true,
symbol: 'circle',
symbolSize: 1,
showSymbol: false,
itemStyle: {
normal: {
color: '#FFEA00'
}
},
data: utils.randNum(0, 20, count, true)
},
{
type: 'line',
name: '空气湿度',
smooth: true,
symbol: 'circle',
symbolSize: 1,
showSymbol: false,
itemStyle: {
normal: {
color: '#00FC0C'
}
},
data: utils.randNum(40, 60, count, true)
},
{
type: 'line',
name: '光照',
smooth: true,
symbol: 'circle',
symbolSize: 1,
showSymbol: false,
itemStyle: {
normal: {
color: '#FF7534'
}
},
data: utils.randNum(20, 60, count, true)
},
{
type: 'line',
name: '风速',
smooth: true,
symbol: 'circle',
symbolSize: 1,
showSymbol: false,
itemStyle: {
normal: {
color: '#3BF6EC'
}
},
data: utils.randNum(0, 10, count, true)
},
{
type: 'line',
name: '雨雪',
smooth: true,
symbol: 'circle',
symbolSize: 1,
showSymbol: false,
itemStyle: {
normal: {
color: '#8ED1FC'
}
},
data: utils.randNum(10, 30, count, true)
}
]
}
this.chart2.setOption(option)
},
initChart3() {
this.chart3 = echarts.init(this.$refs.chart3)
const labels = ['周一', '周二', '周三', '周四', '周五', '周六', '周天']
const seriesData = [
{
label: '周一',
value: [32]
},
{
label: '周二',
value: [24]
},
{
label: '周三',
value: [42]
},
{
label: '周四',
value: [32]
},
{
label: '周五',
value: [24]
},
{
label: '周六',
value: [42]
},
{
label: '周天',
value: [20]
}
]
const colors = [
[
{ offset: 0, color: 'rgba(26, 132, 191, 1)' },
{ offset: 1, color: 'rgba(52, 163, 224, 0.08)' }
],
[
{ offset: 0, color: 'rgba(137, 163, 164, 1)' },
{ offset: 1, color: 'rgba(137, 163, 164, 0.08)' }
],
[
{ offset: 0, color: 'rgba(44, 166, 166, 1)' },
{ offset: 1, color: 'rgba(44, 166, 166, 0.08)' }
],
[
{ offset: 0, color: 'rgba(126, 132, 191, 1)' },
{ offset: 1, color: 'rgba(52, 163, 224, 0.08)' }
],
[
{ offset: 0, color: 'rgba(137, 163, 64, 1)' },
{ offset: 1, color: 'rgba(137, 163, 164, 0.08)' }
],
[
{ offset: 0, color: 'rgba(34, 66, 186, 1)' },
{ offset: 1, color: 'rgba(34, 66, 186, 0.08)' }
],
[
{ offset: 0, color: 'rgba(144, 66, 166, 1)' },
{ offset: 1, color: 'rgba(44, 166, 166, 0.08)' }
]
]
const option = {
tooltip: {
trigger: 'item',
formatter: (params, ticket, callback) => {
return params.value
}
},
grid: {
left: '8px',
right: '8px',
top: '8px',
bottom: '8px',
containLabel: true
},
xAxis: {
axisLine: {
show: false,
lineStyle: {
color: '#666'
}
},
axisTick: {
show: false
},
axisLabel: {
color: '#BFF7FF',
align: 'left'
},
splitLine: {
show: false
},
data: labels
},
yAxis: {
type: 'value',
axisLine: {
show: false,
lineStyle: {
color: '#666'
}
},
axisTick: {
show: false
},
axisLabel: {
color: '#BFF7FF'
},
splitLine: {
show: true,
lineStyle: {
color: '#ffffff33'
}
}
},
series: getSeriesData()
}
// 定义柱状图左侧图形元素
const leftRect = echarts.graphic.extendShape({
shape: {
x: 0,
y: 0,
width: 19, // 柱状图宽
zWidth: 8, // 阴影折角宽
zHeight: 4 // 阴影折角高
},
buildPath: function(ctx, shape) {
const api = shape.api
const xAxisPoint = api.coord([shape.xValue, 0])
const p0 = [shape.x - shape.width / 2, shape.y - shape.zHeight]
const p1 = [shape.x - shape.width / 2, shape.y - shape.zHeight]
const p2 = [xAxisPoint[0] - shape.width / 2, xAxisPoint[1]]
const p3 = [xAxisPoint[0] + shape.width / 2, xAxisPoint[1]]
const p4 = [shape.x + shape.width / 2, shape.y]
ctx.moveTo(p0[0], p0[1])
ctx.lineTo(p1[0], p1[1])
ctx.lineTo(p2[0], p2[1])
ctx.lineTo(p3[0], p3[1])
ctx.lineTo(p4[0], p4[1])
ctx.lineTo(p0[0], p0[1])
ctx.closePath()
}
})
// 定义柱状图右侧以及顶部图形元素
const rightRect = echarts.graphic.extendShape({
shape: {
x: 0,
y: 0,
width: 18,
zWidth: 15,
zHeight: 8
},
buildPath: function(ctx, shape) {
const api = shape.api
const xAxisPoint = api.coord([shape.xValue, 0])
const p1 = [shape.x - shape.width / 2, shape.y - shape.zHeight / 2]
const p3 = [xAxisPoint[0] + shape.width / 2, xAxisPoint[1]]
const p4 = [shape.x + shape.width / 2, shape.y]
const p5 = [xAxisPoint[0] + shape.width / 2 + shape.zWidth, xAxisPoint[1]]
const p6 = [
shape.x + shape.width / 2 + shape.zWidth,
shape.y - shape.zHeight / 2
]
const p7 = [
shape.x - shape.width / 2 + shape.zWidth,
shape.y - shape.zHeight
]
ctx.moveTo(p4[0], p4[1])
ctx.lineTo(p3[0], p3[1])
ctx.lineTo(p5[0], p5[1])
ctx.lineTo(p6[0], p6[1])
ctx.lineTo(p4[0], p4[1])
ctx.moveTo(p4[0], p4[1])
ctx.lineTo(p6[0], p6[1])
ctx.lineTo(p7[0], p7[1])
ctx.lineTo(p1[0], p1[1])
ctx.lineTo(p4[0], p4[1])
ctx.closePath()
}
})
// 注册图形元素
echarts.graphic.registerShape('leftRect', leftRect)
echarts.graphic.registerShape('rightRect', rightRect)
function getSeriesData() {
const data = []
seriesData.forEach((item, index) => {
data.push(
{
type: 'custom',
name: item.label,
renderItem: function(params, api) {
return getRenderItem(params, api)
},
data: item.value,
itemStyle: {
color: () => {
return new echarts.graphic.LinearGradient(0, 0, 0, 1, colors[index])
}
}
}
)
})
return data
}
function getRenderItem(params, api) {
const index = params.seriesIndex
const location = api.coord([api.value(0) + index, api.value(1)])
return {
type: 'group',
children: [
{
type: 'leftRect',
shape: {
api,
xValue: api.value(0) + index,
yValue: api.value(1),
x: location[0],
y: location[1]
},
style: api.style()
},
{
type: 'rightRect',
shape: {
api,
xValue: api.value(0) + index,
yValue: api.value(1),
x: location[0],
y: location[1]
},
style: api.style()
}
]
}
}
this.chart3.setOption(option)
},
initChart4() {
this.chart4 = echarts.init(this.$refs.chart4, 'macarons')
const count = 24
const axisLine = {
show: false,
lineStyle: {
color: '#666'
}
}
const dataX = []
for (let i = 0; i < count; i++) {
dataX.push(i < 10 ? '0' + i + '时' : i + '时')
}
const option = {
tooltip: {
trigger: 'axis',
position: (point, params, dom, rect, size) => {
return [point[0], 10]
}
},
legend: {
textStyle: {
color: '#ffffff'
}
},
grid: {
left: '8px',
right: '8px',
top: '28px',
bottom: '8px',
containLabel: true
},
xAxis: {
type: 'category',
boundaryGap: false,
axisLine,
axisTick: {
show: false
},
axisLabel: {
interval: 2,
color: '#BFF7FF'
},
data: dataX
},
yAxis: {
type: 'value',
axisLine,
axisTick: {
show: false
},
axisLabel: {
color: '#BFF7FF'
},
splitLine: {
show: true,
lineStyle: {
color: '#ffffff33'
}
}
},
series: [
{
type: 'line',
name: '温度',
smooth: true,
symbol: 'circle',
symbolSize: 1,
showSymbol: false,
itemStyle: {
normal: {
color: '#00B3DB'
}
},
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: '#10b1fd4d'
},
{
offset: 1,
color: '#2bbffd00'
}
],
false
),
shadowColor: '#00B3DB',
shadowBlur: 20
}
},
data: utils.randNum(0, 20, count, true)
},
{
type: 'line',
name: '湿度',
smooth: true,
symbol: 'circle',
symbolSize: 1,
showSymbol: false,
itemStyle: {
normal: {
color: '#9999FF'
}
},
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: '#10b1fd4d'
},
{
offset: 1,
color: '#2bbffd00'
}
],
false
),
shadowColor: '#9999FF',
shadowBlur: 20
}
},
data: utils.randNum(40, 60, count, true)
},
{
type: 'line',
name: '光照',
smooth: true,
symbol: 'circle',
symbolSize: 1,
showSymbol: false,
itemStyle: {
normal: {
color: '#3BF6EC'
}
},
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: '#10b1fd4d'
},
{
offset: 1,
color: '#2bbffd00'
}
],
false
),
shadowColor: '#3BF6EC',
shadowBlur: 20
}
},
data: utils.randNum(5, 20, count, true)
}
]
}
this.chart4.setOption(option)
},
initChart5() {
this.chart5 = echarts.init(this.$refs.chart5, 'macarons')
const count = 24
const axisLine = {
show: false,
lineStyle: {
color: '#666'
}
}
const dataX = []
for (let i = 0; i < count; i++) {
dataX.push(i < 10 ? '0' + i + '时' : i + '时')
}
const option = {
tooltip: {
trigger: 'axis',
position: (point, params, dom, rect, size) => {
return [point[0], 10]
}
},
legend: {
textStyle: {
color: '#ffffff'
}
},
grid: {
left: '8px',
right: '8px',
top: '28px',
bottom: '8px',
containLabel: true
},
xAxis: {
type: 'category',
boundaryGap: false,
axisLine,
axisTick: {
show: false
},
axisLabel: {
interval: 2,
color: '#BFF7FF'
},
data: dataX
},
yAxis: {
type: 'value',
axisLine,
axisTick: {
show: false
},
axisLabel: {
color: '#BFF7FF'
},
splitLine: {
show: true,
lineStyle: {
color: '#ffffff33'
}
}
},
series: [
{
type: 'line',
name: '二氧化碳',
smooth: true,
symbol: 'circle',
symbolSize: 1,
showSymbol: false,
itemStyle: {
normal: {
color: '#FFEA00'
}
},
data: utils.randNum(0, 6, count, true)
},
{
type: 'line',
name: '温度',
smooth: true,
symbol: 'circle',
symbolSize: 1,
showSymbol: false,
itemStyle: {
normal: {
color: '#F23593'
}
},
data: utils.randNum(5, 25, count, true)
},
{
type: 'line',
name: '湿度',
smooth: true,
symbol: 'circle',
symbolSize: 1,
showSymbol: false,
itemStyle: {
normal: {
color: '#00FC0C'
}
},
data: utils.randNum(40, 60, count, true)
},
{
type: 'line',
name: '光照',
smooth: true,
symbol: 'circle',
symbolSize: 1,
showSymbol: false,
itemStyle: {
normal: {
color: '#10B1FD',
lineStyle: {
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: '#0CF4FD'
},
{
offset: 1,
color: '#0954FD'
}
],
false
)
}
}
},
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: '#10b1fd4d'
},
{
offset: 1,
color: '#2bbffd00'
}
],
false
),
shadowColor: '#2BBFFD',
shadowBlur: 20
}
},
data: utils.randNum(35, 40, count, true)
}
]
}
this.chart5.setOption(option)
}
}
}
</script>
......@@ -319,6 +1171,11 @@ export default {
.touch {
cursor:pointer;
}
.chart_box {
width: 100%;
height: 170px;
overflow: hidden;
}
.ct-box-1 {
display: flex;
flex-direction: column;
......@@ -592,6 +1449,7 @@ export default {
.ct-box-5 {
display: flex;
flex-direction: column;
height:70px;
.ctn {
flex: 1;
position: relative;
......
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