Skip to content

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

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

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