Skip to content

G
gassafety
Commit 8f884de5 authored by yaqizhang's avatar yaqizhang
Browse files
Options

折线图

parent bcbd6292
Hide whitespace changes
Inline Side-by-side
Showing with 66 additions and 5 deletions
gassafety-web/src/views/dataMonitoring/deviceAlarm/alarmdetail.vue
View file @ 8f884de5
...@@ -231,7 +231,7 @@ export default { ...@@ -231,7 +231,7 @@ export default {
// 绘制图表 // 绘制图表
myChart1.setOption({ myChart1.setOption({
title: { title: {
text: '折线图堆叠' text: '标况流量、工况流量'
}, },
tooltip: { tooltip: {
trigger: 'axis' trigger: 'axis'
...@@ -318,13 +318,22 @@ export default { ...@@ -318,13 +318,22 @@ export default {
}, },
drawPieChart(getData4, getData5, getData3) { drawPieChart(getData4, getData5, getData3) {
// 基于准备好的dom，初始化echarts实例 // 基于准备好的dom，初始化echarts实例
var myChart2 = echarts.init(document.getElementById('main2')); var myChart2 = echarts.init(document.getElementById('main2'));
// 绘制图表 // 绘制图表
myChart2.setOption({ myChart2.setOption({
// color:['rgb(8,252,7)','rgb(255,168,0)','rgb(0,121,254)','rgb(0,255,251)','rgb(3,120,251)','rgb(0,200,251)'], title: {
text: '标况累积量、工况累积量'
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['标况累积量', '工况累积量']
},
xAxis: { xAxis: {
type: 'category', type: 'category',
// data: this.dataX, // data: this.dataX,
...@@ -362,6 +371,7 @@ export default { ...@@ -362,6 +371,7 @@ export default {
series: [ series: [
{ {
// data: this.dataY, // data: this.dataY,
name: '标况累积量',
data: getData4, data: getData4,
type: 'line', type: 'line',
symbol: 'circle', //是否显示实心的折线圆点 symbol: 'circle', //是否显示实心的折线圆点
...@@ -379,6 +389,7 @@ export default { ...@@ -379,6 +389,7 @@ export default {
}, },
{ {
// data: this.dataY, // data: this.dataY,
name: '工况累积量',
data: getData5, data: getData5,
type: 'line', type: 'line',
symbol: 'circle', //是否显示实心的折线圆点 symbol: 'circle', //是否显示实心的折线圆点
...@@ -404,6 +415,15 @@ export default { ...@@ -404,6 +415,15 @@ export default {
// 绘制图表 // 绘制图表
myChart3.setOption({ myChart3.setOption({
title: {
text: '温度'
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['温度']
},
xAxis: { xAxis: {
type: 'category', type: 'category',
// data: this.dataX, // data: this.dataX,
...@@ -441,6 +461,7 @@ export default { ...@@ -441,6 +461,7 @@ export default {
series: [ series: [
{ {
// data: this.dataY, // data: this.dataY,
name: '温度',
data: getData6, data: getData6,
type: 'line', type: 'line',
symbol: 'circle', //是否显示实心的折线圆点 symbol: 'circle', //是否显示实心的折线圆点
...@@ -466,6 +487,15 @@ export default { ...@@ -466,6 +487,15 @@ export default {
// 绘制图表 // 绘制图表
myChart4.setOption({ myChart4.setOption({
title: {
text: '压力'
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['压力']
},
xAxis: { xAxis: {
type: 'category', type: 'category',
// data: this.dataX, // data: this.dataX,
...@@ -503,6 +533,7 @@ export default { ...@@ -503,6 +533,7 @@ export default {
series: [ series: [
{ {
// data: this.dataY, // data: this.dataY,
name: '压力',
data: getData7, data: getData7,
type: 'line', type: 'line',
symbol: 'circle', //是否显示实心的折线圆点 symbol: 'circle', //是否显示实心的折线圆点
...@@ -522,7 +553,7 @@ export default { ...@@ -522,7 +553,7 @@ export default {
}); });
}, },
// 点击按钮显示隐藏 // 点击按钮显示隐藏
changeDisplay(e){ changeDisplay(e){
this.isDisplay = !this.isDisplay this.isDisplay = !this.isDisplay
......
gassafety-web/src/views/dataMonitoring/realtimeData/realtimedetail.vue
View file @ 8f884de5
...@@ -193,7 +193,7 @@ ...@@ -193,7 +193,7 @@
// 绘制图表 // 绘制图表
myChart1.setOption({ myChart1.setOption({
title: { title: {
text: '折线图堆叠' text: '标况流量、工况流量'
}, },
tooltip: { tooltip: {
trigger: 'axis' trigger: 'axis'
...@@ -287,7 +287,15 @@ ...@@ -287,7 +287,15 @@
// 绘制图表 // 绘制图表
myChart2.setOption({ myChart2.setOption({
// color:['rgb(8,252,7)','rgb(255,168,0)','rgb(0,121,254)','rgb(0,255,251)','rgb(3,120,251)','rgb(0,200,251)'], title: {
text: '标况累积量、工况累积量'
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['标况累积量', '工况累积量']
},
xAxis: { xAxis: {
type: 'category', type: 'category',
// data: this.dataX, // data: this.dataX,
...@@ -325,6 +333,7 @@ ...@@ -325,6 +333,7 @@
series: [ series: [
{ {
// data: this.dataY, // data: this.dataY,
name: '标况累积量',
data: getData4, data: getData4,
type: 'line', type: 'line',
symbol: 'circle', //是否显示实心的折线圆点 symbol: 'circle', //是否显示实心的折线圆点
...@@ -342,6 +351,7 @@ ...@@ -342,6 +351,7 @@
}, },
{ {
// data: this.dataY, // data: this.dataY,
name: '工况累积量',
data: getData5, data: getData5,
type: 'line', type: 'line',
symbol: 'circle', //是否显示实心的折线圆点 symbol: 'circle', //是否显示实心的折线圆点
...@@ -367,6 +377,15 @@ ...@@ -367,6 +377,15 @@
// 绘制图表 // 绘制图表
myChart3.setOption({ myChart3.setOption({
title: {
text: '温度'
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['温度']
},
xAxis: { xAxis: {
type: 'category', type: 'category',
// data: this.dataX, // data: this.dataX,
...@@ -404,6 +423,7 @@ ...@@ -404,6 +423,7 @@
series: [ series: [
{ {
// data: this.dataY, // data: this.dataY,
name: '温度',
data: getData6, data: getData6,
type: 'line', type: 'line',
symbol: 'circle', //是否显示实心的折线圆点 symbol: 'circle', //是否显示实心的折线圆点
...@@ -429,6 +449,15 @@ ...@@ -429,6 +449,15 @@
// 绘制图表 // 绘制图表
myChart4.setOption({ myChart4.setOption({
title: {
text: '压力'
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['压力']
},
xAxis: { xAxis: {
type: 'category', type: 'category',
// data: this.dataX, // data: this.dataX,
...@@ -466,6 +495,7 @@ ...@@ -466,6 +495,7 @@
series: [ series: [
{ {
// data: this.dataY, // data: this.dataY,
name: '压力',
data: getData7, data: getData7,
type: 'line', type: 'line',
symbol: 'circle', //是否显示实心的折线圆点 symbol: 'circle', //是否显示实心的折线圆点
......
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