Skip to content

Z
ZiBoYingJI
Commit 2d860405 authored by xinzhedeai's avatar xinzhedeai
Browse files
Options

大屏详情页，图表缩放功能处理

parent 6c9e4708
Expand all Show whitespace changes
Inline Side-by-side
Showing with 1107 additions and 217 deletions
public/datav/detail/humidity-monitor.html
View file @ 2d860405
...@@ -254,7 +254,7 @@ ...@@ -254,7 +254,7 @@
yAxis: [{ yAxis: [{
type:'value', type:'value',
name: '单位(%RH)', name: '单位(%RH)',
position:'right', position:'left',
show: true, // 显示 Y 轴 show: true, // 显示 Y 轴
splitLine: { show: false }, splitLine: { show: false },
nameTextStyle: { color: '#fff' }, nameTextStyle: { color: '#fff' },
...@@ -266,49 +266,46 @@ ...@@ -266,49 +266,46 @@
show: true show: true
}, },
axisTick: { show: true }, axisTick: { show: true },
min: 0, // min: 0,
max: 100, // max: 100,
title: { title: {
text: 'Precipitation', // 这是你的 Y 轴标题 text: 'Precipitation', // 这是你的 Y 轴标题
color: '#a3e4f5' // 这里设置你的颜色，你可以使用十六进制颜色代码，如 '#FF0000'，或者 RGB 等 color: '#a3e4f5' // 这里设置你的颜色，你可以使用十六进制颜色代码，如 '#FF0000'，或者 RGB 等
} }
}, {
type:'value',
name: '单位(%RH)',
nameTextStyle: { color: '#fff' },
position:'left',
show: true, // 显示 Y 轴
splitLine: { show: false },
axisLabel: {
show: true, // 显示刻度标签
textStyle: {
color: '#fff'
} }
}, // , {
axisLine: { // 轴线 // type:'value',
show: true // name: '单位(%RH)',
}, // nameTextStyle: { color: '#fff' },
axisTick: { show: true }, // position:'right',
min: 0, // show: true, // 显示 Y 轴
max: 100, // splitLine: { show: false },
}], // axisLabel: {
// show: true, // 显示刻度标签
// textStyle: {
// color: '#fff'
// }
// },
// axisLine: { // 轴线
// show: true
// },
// axisTick: { show: true },
// // min: 0,
// // max: 100,
// }
],
grid: { right: 45, top: 40, left: 40, bottom: 25 }, grid: { right: 45, top: 40, left: 40, bottom: 25 },
dataZoom: [ dataZoom: [
{ {
type: "slider", type: 'inside',
show: false, //orient: 'vertical',
startValue: 14,
endValue: 23, // 一次性展示9个
textStyle: { color: "#ffffff" },
height: 0,
zoomLock: true, // 是否只平移不缩放
}, },
{ {
type: "inside", //内置型数据区域缩放组件 start: 0,
moveOnMouseMove: true // 开启鼠标移动窗口平移 end: 100,
} show: false,
], }], // 区域缩放
series: [yAxisOption] series: [yAxisOption]
} }
var loading = this.$loading({ var loading = this.$loading({
...@@ -329,15 +326,15 @@ console.log('this.createTime', this.createTime.join(',')) ...@@ -329,15 +326,15 @@ console.log('this.createTime', this.createTime.join(','))
}).then(res => { }).then(res => {
const result = res.data.body; const result = res.data.body;
if (result) { if (result) {
const max = result.max // const max = result.max
const min = result.min // const min = result.min
if(max){ // if(max){
chartsOption.yAxis[0].max = max // chartsOption.yAxis[0].max = max
chartsOption.yAxis[0].min = min || 0 // chartsOption.yAxis[0].min = min || 0
chartsOption.yAxis[1].max = max // chartsOption.yAxis[1].max = max
chartsOption.yAxis[1].min = min || 0 // chartsOption.yAxis[1].min = min || 0
} // }
chartsOption.xAxis.data = result.xData.data chartsOption.xAxis.data = result.xData.data
chartsOption.series = result.yData.map((item, index) => { chartsOption.series = result.yData.map((item, index) => {
var tempObj = JSON.parse(JSON.stringify(yAxisOption)); var tempObj = JSON.parse(JSON.stringify(yAxisOption));
...@@ -347,7 +344,7 @@ console.log('this.createTime', this.createTime.join(',')) ...@@ -347,7 +344,7 @@ console.log('this.createTime', this.createTime.join(','))
return tempObj return tempObj
}) })
console.log('chartsOption', chartsOption) // console.log('chartsOption', chartsOption)
// 基于准备好的dom，初始化echarts实例 // 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById("line")); var myChart = echarts.init(document.getElementById("line"));
......
public/datav/detail/shape-monitor copy.html 0 → 100644
View file @ 2d860405
This diff is collapsed.
public/datav/detail/shape-monitor.html
View file @ 2d860405
...@@ -267,29 +267,16 @@ ...@@ -267,29 +267,16 @@
}, },
getChartsData() { getChartsData() {
// console.log('getChartsData ________________ ', 1111111111);
console.log('getChartsData ________________ ', 1111111111);
const yAxisOption = { const yAxisOption = {
name: "人数", name: "人数",
type: "line", type: "line",
smooth: true,
data: [], data: [],
itemStyle: { itemStyle: {
color: '#6dd1b9' color: '#6dd1b9'
}, },
emphasis: {
focus: 'series'
},
label: {
show: true,
position: 'top'
},
markLine: { markLine: {
//silent: true,
data: [ data: [
{ name: '最高值', yAxis: 400 }, { name: '最高值', yAxis: 400 },
{ name: '最低值', yAxis: -50 } { name: '最低值', yAxis: -50 }
...@@ -301,8 +288,8 @@ ...@@ -301,8 +288,8 @@
symbol: 'none' // 移除箭头 symbol: 'none' // 移除箭头
} }
} }
var chartsOption = { var chartsOption = {
legend: { legend: {
textStyle: { textStyle: {
color: '#fff', // 设置字体颜色 color: '#fff', // 设置字体颜色
...@@ -340,45 +327,42 @@ ...@@ -340,45 +327,42 @@
show: true show: true
}, },
axisTick: { show: true }, axisTick: { show: true },
min: 0, // min: 0,
max: 100, // max: 100,
}, {
type:'value',
name: '单位(mm)',
nameTextStyle: { color: '#fff' },
position:'right',
show: true, // 显示 Y 轴
splitLine: { show: false },
axisLabel: {
show: true, // 显示刻度标签
textStyle: {
color: '#fff'
}
}, },
axisLine: { // 轴线 // {
show: true // type:'value',
}, // name: '单位(mm)',
axisTick: { show: true }, // nameTextStyle: { color: '#fff' },
min: 0, // position:'right',
max: 100, // show: true, // 显示 Y 轴
}], // splitLine: { show: false },
grid: { right: 45, top: 40, left: 40, bottom: 25 }, // axisLabel: {
// show: true, // 显示刻度标签
// textStyle: {
// color: '#fff'
// }
// },
// axisLine: { // 轴线
// show: true
// },
// axisTick: { show: true },
// // min: 0,
// // max: 100,
// }
],
grid: { right: 45, top: 40, left: 60, bottom: 25 },
dataZoom: [ dataZoom: [
{ {
type: "slider", type: 'inside',
show: false, //orient: 'vertical',
startValue: 14,
endValue: 23, // 一次性展示9个
textStyle: { color: "#ffffff" },
height: 0,
zoomLock: true, // 是否只平移不缩放
}, },
{ {
type: "inside", //内置型数据区域缩放组件 start: 0,
moveOnMouseMove: true // 开启鼠标移动窗口平移 end: 100,
} show: false,
], }], // 区域缩放
series: [yAxisOption] series: [yAxisOption]
} }
var loading = this.$loading({ var loading = this.$loading({
...@@ -398,15 +382,15 @@ ...@@ -398,15 +382,15 @@
}).then(res => { }).then(res => {
const result = res.data.body; const result = res.data.body;
if (result) { if (result) {
const max = result.max // const max = result.max
const min = result.min // const min = result.min
if(max){ // if(max){
chartsOption.yAxis[0].max = max // chartsOption.yAxis[0].max = max
chartsOption.yAxis[0].min = min || -5 // chartsOption.yAxis[0].min = min || -5
chartsOption.yAxis[1].max = max // chartsOption.yAxis[1].max = max
chartsOption.yAxis[1].min = min || -5 // chartsOption.yAxis[1].min = min || -5
} // }
chartsOption.xAxis.data = result.xData.data chartsOption.xAxis.data = result.xData.data
var colors = ['#7CB5EC', '#90ED7D', '#F7A35C', '#8085E9']; var colors = ['#7CB5EC', '#90ED7D', '#F7A35C', '#8085E9'];
...@@ -429,7 +413,7 @@ ...@@ -429,7 +413,7 @@
return tempObj return tempObj
}) })
console.log('chartsOption', chartsOption) // console.log('chartsOption', chartsOption)
// 基于准备好的dom，初始化echarts实例 // 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById("line")); var myChart = echarts.init(document.getElementById("line"));
......
public/datav/detail/static/js/public-detail.js
View file @ 2d860405
...@@ -55,8 +55,10 @@ var gemhoUtil = { ...@@ -55,8 +55,10 @@ var gemhoUtil = {
const today = new Date(); const today = new Date();
// 获取前七天的日期 // 获取前七天的日期
const sevenDaysAgo = new Date(); const sevenDaysAgo = new Date()
sevenDaysAgo.setDate(today.getDate()); // const sevenDaysAgo = new Date('2019-12-17')// new Date('2019-01-01');
sevenDaysAgo.setDate(sevenDaysAgo.getDate());
// 格式化日期为 YYYY-MM-DD HH:mm:ss // 格式化日期为 YYYY-MM-DD HH:mm:ss
const formatDate = (date) => { const formatDate = (date) => {
...@@ -129,6 +131,28 @@ var gemhoUtil = { ...@@ -129,6 +131,28 @@ var gemhoUtil = {
// window.open(item.url) // window.open(item.url)
location.href = item.url location.href = item.url
}, },
// legendChange(chartEle, fn){
// // 添加图例点击事件监听
// chartEle.on('legendselectchanged', (params) => {
// // this.getTableList(JSON.stringify(params.selected))
// fn && fn(JSON.stringify(params.selected))
// // alert('ssss')
// // console.log('被点击的图例:', params.name);
// console.log('图例的选择状态:', params.selected); // {实时雨量: true, 累计雨量: false}
// const max = Math.floor(Math.random() * 90)
// const min = -Math.floor(Math.random() * 70)
// console.log(max, '->', min)
// chartEle.setOption({
// yAxis: {
// max,
// min
// }
// });
// });
// // this.getTableList(JSON.stringify(params.selected))
// }
} }
} }
} }
......
public/datav/detail/temperature-monitor.html
View file @ 2d860405
...@@ -251,28 +251,30 @@ ...@@ -251,28 +251,30 @@
axisLine: { lineStyle: { color: '#a3e4f5' } }, axisLine: { lineStyle: { color: '#a3e4f5' } },
axisTick: { show: false } axisTick: { show: false }
}, },
yAxis: [{ yAxis: [
type:'value', // {
name: '单位(mm)', // type:'value',
position:'right', // name: '单位(mm)',
show: true, // 显示 Y 轴 // position:'right',
splitLine: { show: false }, // show: true, // 显示 Y 轴
nameTextStyle: { color: '#fff' }, // splitLine: { show: false },
axisLabel: { // nameTextStyle: { color: '#fff' },
show: true, // 显示刻度标签 // axisLabel: {
textStyle: { color: '#fff' } // show: true, // 显示刻度标签
}, // textStyle: { color: '#fff' }
axisLine: { // 轴线 // },
show: true // axisLine: { // 轴线
}, // show: true
axisTick: { show: true }, // },
// min: -20, // axisTick: { show: true },
max: 50, // // min: -20,
title: { // max: 50,
text: 'Precipitation', // 这是你的 Y 轴标题 // title: {
color: '#a3e4f5' // 这里设置你的颜色，你可以使用十六进制颜色代码，如 '#FF0000'，或者 RGB 等 // text: 'Precipitation', // 这是你的 Y 轴标题
} // color: '#a3e4f5' // 这里设置你的颜色，你可以使用十六进制颜色代码，如 '#FF0000'，或者 RGB 等
}, { // }
// },
{
type:'value', type:'value',
name: '单位(mm)', name: '单位(mm)',
nameTextStyle: { color: '#fff' }, nameTextStyle: { color: '#fff' },
...@@ -291,24 +293,18 @@ ...@@ -291,24 +293,18 @@
}, },
axisTick: { show: true }, axisTick: { show: true },
// min: -20, // min: -20,
max: 50, // max: 50,
}], }],
grid: { right: 45, top: 10, left: 40, bottom: 25 }, grid: { right: 45, top: 10, left: 40, bottom: 25 },
dataZoom: [ dataZoom: [{
{ type: 'inside',
type: "slider", //orient: 'vertical',
show: false,
startValue: 14,
endValue: 23, // 一次性展示9个
textStyle: { color: "#ffffff" },
height: 0,
zoomLock: true, // 是否只平移不缩放
}, },
{ {
type: "inside", //内置型数据区域缩放组件 start: 0,
moveOnMouseMove: true // 开启鼠标移动窗口平移 end: 100,
} show: false,
], }], // 区域缩放
series: [yAxisOption] series: [yAxisOption]
} }
var loading = this.$loading({ var loading = this.$loading({
...@@ -330,14 +326,14 @@ ...@@ -330,14 +326,14 @@
const result = res.data.body; const result = res.data.body;
if (result) { if (result) {
const max = result.max // 必返 // const max = result.max // 必返
const min = result.min // 必返 // const min = result.min // 必返
if(max){ // if(max){
chartsOption.yAxis[0].max = max // chartsOption.yAxis[0].max = max
chartsOption.yAxis[0].min = min || -5 // chartsOption.yAxis[0].min = min || -5
chartsOption.yAxis[1].max = max // chartsOption.yAxis[1].max = max
chartsOption.yAxis[1].min = min || -5 // chartsOption.yAxis[1].min = min || -5
} // }
chartsOption.xAxis.data = result.xData.data chartsOption.xAxis.data = result.xData.data
...@@ -357,7 +353,7 @@ ...@@ -357,7 +353,7 @@
return tempObj return tempObj
}) })
console.log('chartsOption', chartsOption) // console.log('chartsOption', chartsOption)
// 基于准备好的dom，初始化echarts实例 // 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById("line")); var myChart = echarts.init(document.getElementById("line"));
......
public/datav/detail/water-monitor copy.html 0 → 100644
View file @ 2d860405
This diff is collapsed.
public/datav/detail/water-monitor.html
View file @ 2d860405
...@@ -238,6 +238,24 @@ ...@@ -238,6 +238,24 @@
data: [] data: []
} }
var chartsOption = { var chartsOption = {
dataZoom: [
{
type: 'inside',
//orient: 'vertical',
},
{
start: 0,
end: 100,
show: false,
}], // 区域缩放
// toolbox: {
// feature: {
// dataZoom: {
// // yAxisIndex: 'none'
// },
// restore: {}
// }
// },
legend: { legend: {
textStyle: { textStyle: {
color: '#fff', // 设置字体颜色 color: '#fff', // 设置字体颜色
...@@ -273,8 +291,8 @@ ...@@ -273,8 +291,8 @@
show: true show: true
}, },
axisTick: { show: true }, axisTick: { show: true },
min: 0, // min: 0,
max: 100, // max: 100,
title: { title: {
text: 'Precipitation', // 这是你的 Y 轴标题 text: 'Precipitation', // 这是你的 Y 轴标题
color: '#a3e4f5' // 这里设置你的颜色，你可以使用十六进制颜色代码，如 '#FF0000'，或者 RGB 等 color: '#a3e4f5' // 这里设置你的颜色，你可以使用十六进制颜色代码，如 '#FF0000'，或者 RGB 等
...@@ -297,25 +315,25 @@ ...@@ -297,25 +315,25 @@
show: true show: true
}, },
axisTick: { show: true }, axisTick: { show: true },
min: 0, // min: 0,
max: 100, // max: 100,
}], }],
grid: { right: 45, top: 40, left: 40, bottom: 25 }, grid: { right: 45, top: 40, left: 40, bottom: 25 },
dataZoom: [ // dataZoom: [
{ // {
type: "slider", // type: "slider",
show: false, // show: false,
startValue: 14, // startValue: 14,
endValue: 23, // 一次性展示9个 // endValue: 23, // 一次性展示9个
textStyle: { color: "#ffffff" }, // textStyle: { color: "#ffffff" },
height: 0, // height: 0,
zoomLock: true, // 是否只平移不缩放 // zoomLock: true, // 是否只平移不缩放
}, // },
{ // {
type: "inside", //内置型数据区域缩放组件 // type: "inside", //内置型数据区域缩放组件
moveOnMouseMove: true // 开启鼠标移动窗口平移 // moveOnMouseMove: true // 开启鼠标移动窗口平移
} // }
], // ],
series: [yAxisOption, yAxisOption1] series: [yAxisOption, yAxisOption1]
} }
var loading = this.$loading({ var loading = this.$loading({
...@@ -334,12 +352,12 @@ ...@@ -334,12 +352,12 @@
const result = res.data.body; const result = res.data.body;
if (result) { if (result) {
const max = result.max // 必返 // const max = result.max // 必返
const min = result.min // 必返 // const min = result.min // 必返
if(max){ // if(max){
chartsOption.yAxis[0].max = max // chartsOption.yAxis[0].max = max
chartsOption.yAxis[1].max = max // chartsOption.yAxis[1].max = max
} // }
chartsOption.xAxis.data = result.xData.data chartsOption.xAxis.data = result.xData.data
chartsOption.series = result.yData.map((item, index) => { chartsOption.series = result.yData.map((item, index) => {
......
public/datav/detail/wind-monitor.html
View file @ 2d860405
...@@ -245,26 +245,28 @@ ...@@ -245,26 +245,28 @@
axisLine: { lineStyle: { color: '#a3e4f5' } }, axisLine: { lineStyle: { color: '#a3e4f5' } },
axisTick: { show: false } axisTick: { show: false }
}, },
yAxis: [{ yAxis: [
type:'value', // {
name: '单位(m/s)', // type:'value',
position:'right', // name: '单位(m/s)',
show: true, // 显示 Y 轴 // position:'right',
splitLine: { show: false }, // show: true, // 显示 Y 轴
nameTextStyle: { color: '#fff' }, // splitLine: { show: false },
axisLabel: { // nameTextStyle: { color: '#fff' },
show: true, // 显示刻度标签 // axisLabel: {
textStyle: { color: '#fff' } // show: true, // 显示刻度标签
}, // textStyle: { color: '#fff' }
axisLine: { // 轴线 // },
show: true // axisLine: { // 轴线
}, // show: true
axisTick: { show: true }, // },
title: { // axisTick: { show: true },
text: 'Precipitation', // 这是你的 Y 轴标题 // title: {
color: '#a3e4f5' // 这里设置你的颜色，你可以使用十六进制颜色代码，如 '#FF0000'，或者 RGB 等 // text: 'Precipitation', // 这是你的 Y 轴标题
} // color: '#a3e4f5' // 这里设置你的颜色，你可以使用十六进制颜色代码，如 '#FF0000'，或者 RGB 等
}, { // }
// },
{
type:'value', type:'value',
name: '单位(m/s)', name: '单位(m/s)',
nameTextStyle: { color: '#fff' }, nameTextStyle: { color: '#fff' },
...@@ -286,19 +288,14 @@ ...@@ -286,19 +288,14 @@
grid: { right: 45, top: 40, left: 40, bottom: 25 }, grid: { right: 45, top: 40, left: 40, bottom: 25 },
dataZoom: [ dataZoom: [
{ {
type: "slider", type: 'inside',
show: false, //orient: 'vertical',
startValue: 14,
endValue: 23, // 一次性展示9个
textStyle: { color: "#ffffff" },
height: 0,
zoomLock: true, // 是否只平移不缩放
}, },
{ {
type: "inside", //内置型数据区域缩放组件 start: 0,
moveOnMouseMove: true // 开启鼠标移动窗口平移 end: 100,
} show: false,
], }], // 区域缩放
series: [yAxisOption] series: [yAxisOption]
} }
var loading = this.$loading({ var loading = this.$loading({
...@@ -320,13 +317,13 @@ ...@@ -320,13 +317,13 @@
const result = res.data.body; const result = res.data.body;
if (result) { if (result) {
const max = result.max // const max = result.max
if(max){ // if(max){
chartsOption.yAxis[0].max = max // chartsOption.yAxis[0].max = max
chartsOption.yAxis[0].min = 0 // chartsOption.yAxis[0].min = 0
chartsOption.yAxis[1].max = max // chartsOption.yAxis[1].max = max
chartsOption.yAxis[1].min = 0 // chartsOption.yAxis[1].min = 0
} // }
chartsOption.xAxis.data = result.xData.data chartsOption.xAxis.data = result.xData.data
...@@ -348,7 +345,7 @@ ...@@ -348,7 +345,7 @@
return tempObj return tempObj
}) })
console.log('chartsOption', chartsOption) // console.log('chartsOption', chartsOption)
// 基于准备好的dom，初始化echarts实例 // 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById("line")); var myChart = echarts.init(document.getElementById("line"));
......
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