From 1250621ab9ea6ea93911be0f283c3bfcdceb0667 Mon Sep 17 00:00:00 2001
From: chenyibo <p-honggang.li@pcitc.com>
Date: 星期二, 30 三月 2021 18:03:59 +0800
Subject: [PATCH] Merge branch 'develop' of http://xearth.cn:6600/r/wuyushui/SewerAndRainNetwork into develop
---
src/components/BaseNav/PublicBounced/GasComponents/GasECharts.vue | 194 +++++++++++++++++++++++++++++------------------
1 files changed, 119 insertions(+), 75 deletions(-)
diff --git a/src/components/BaseNav/PublicBounced/GasComponents/GasECharts.vue b/src/components/BaseNav/PublicBounced/GasComponents/GasECharts.vue
index 9084a18..675b787 100644
--- a/src/components/BaseNav/PublicBounced/GasComponents/GasECharts.vue
+++ b/src/components/BaseNav/PublicBounced/GasComponents/GasECharts.vue
@@ -7,10 +7,12 @@
<div class="border_corner border_corner_left_bottom"></div>
<div class="border_corner border_corner_right_bottom"></div>
<div class="main">
- <div class="main-echarts">
- <div id="echarts" style="width:100%;height:100%" ref="main"></div>
+ <div id="echarts" ref="main"></div>
+ <div class="border_corner border_corner_left_top"></div>
+ <div class="border_corner border_corner_right_top"></div>
+ <div class="border_corner border_corner_left_bottom"></div>
+ <div class="border_corner border_corner_right_bottom"></div>
</div>
- </div>
</div>
</template>
@@ -22,18 +24,27 @@
const myChart = this.$echarts.init(this.$refs.main)
const option = {
title: {
- text: '鎶樼嚎鍥惧爢鍙�'
+ // text: '鎶樼嚎鍥惧爢鍙�'
},
- // color: '#fff',
+ color: ['#5470c6', '#91CC75', '#EE6666', '#FF0087'],
tooltip: {
- trigger: 'axis'
+ trigger: 'axis',
+ axisPointer: {
+ type: 'cross',
+ label: {
+ color: '#1a4245'
+ }
+ }
},
- // legend: {
- // data: ['閭欢钀ラ攢', '鑱旂洘骞垮憡', '瑙嗛骞垮憡', '鐩存帴璁块棶', '鎼滅储寮曟搸']
- // },
+ legend: {
+ data: ['姘哀鍖栫墿', '浜屾哀鍖栫～', '鐑熷皹', '搴熸皵娴侀噺']
+ // pageTextStyle: {
+ // color: '#fff'
+ // }
+ },
grid: {
left: '3%',
- right: '4%',
+ right: '3%',
bottom: '3%',
containLabel: true
},
@@ -42,63 +53,98 @@
saveAsImage: {}
}
},
+ // 鍥炬爣缂╂斁璁剧疆
+ dataZoom: [{
+ type: 'inside',
+ start: 0,
+ end: 100
+ }, {
+ start: 0,
+ end: 100,
+ show: false,
+ // handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
+ handleSize: '80%',
+ handleStyle: {
+ color: '#fff',
+ shadowBlur: 3,
+ shadowColor: 'rgba(0, 0, 0, 0.6)',
+ shadowOffsetX: 2,
+ shadowOffsetY: 2
+ }
+ }],
+ // x杞寸殑璁剧疆
xAxis: {
type: 'category',
boundaryGap: false,
- data: ['鍛ㄤ竴', '鍛ㄤ簩', '鍛ㄤ笁', '鍛ㄥ洓', '鍛ㄤ簲', '鍛ㄥ叚', '鍛ㄦ棩'],
- axisLabel: {
+ data: ['12:00:01', '12:00:02', '12:00:03', '12:00:04', '12:00:05', '12:00:06', '12:00:07'],
+ axisLabel: { // x杞村叏閮ㄦ樉绀�
+ rotate: 20,
+ interval: 0,
textStyle: {
- color: '#7edae8' // 鍧愭爣鐨勫瓧浣撻鑹�
+ color: '#fff'
}
},
- axisLine: {
- show: false, // 闅愯棌鍧愭爣杞�
+ splitLine: { // 缃戞牸鍨傜洿绾夸负铏氱嚎
+ show: true,
lineStyle: {
- color: '#00eeff' // 鍧愭爣杞寸殑棰滆壊
+ type: 'dashed'
+ }
+ },
+ axisTick: { // x 杞村埢搴︽樉绀�
+ show: false
+ },
+ axisLine: {
+ lineStyle: {
+ color: '#FFFFFF',
+ width: 1 // 杩欓噷鏄负浜嗙獊鍑烘樉绀哄姞涓婄殑
}
}
},
+ // Y 杞寸殑璁剧疆
yAxis: [{
type: 'value',
+ // name: yname, // 鍚庢湡鍥炬爣Y杞存樉绀哄崟浣�
+ name: '娴撳害(mg/m鲁)',
axisLabel: {
+ formatter: '{value}',
textStyle: {
- color: '#7edae8' // 鍧愭爣鐨勫瓧浣撻鑹�
+ color: '#fff' // 鍧愭爣鐨勫瓧浣撻鑹�
}
},
+ axisPointer: {
+ snap: true // 鑷姩鍚搁檮鏈�杩戠殑鐐�
+ },
+ splitLine: {
+ show: false // y杞� 缃戞牸绾夸笉鏄剧ず
+ },
axisLine: {
- show: false, // 闅愯棌鍧愭爣杞�
lineStyle: {
- color: '#00eeff' // 鍧愭爣杞寸殑棰滆壊
+ color: '#ffffff', // 鍧愭爣杞寸殑棰滆壊
+ width: 1
}
}
}],
series: [
{
- name: '閭欢钀ラ攢',
+ name: '姘哀鍖栫墿',
type: 'line',
stack: '鎬婚噺',
data: [120, 132, 101, 134, 90, 230, 210]
},
{
- name: '鑱旂洘骞垮憡',
- type: 'line',
- stack: '鎬婚噺',
- data: [220, 182, 191, 234, 290, 330, 310]
- },
- {
- name: '瑙嗛骞垮憡',
+ name: '浜屾哀鍖栫～',
type: 'line',
stack: '鎬婚噺',
data: [150, 232, 201, 154, 190, 330, 410]
},
{
- name: '鐩存帴璁块棶',
+ name: '鐑熷皹',
type: 'line',
stack: '鎬婚噺',
data: [320, 332, 301, 334, 390, 330, 320]
},
{
- name: '鎼滅储寮曟搸',
+ name: '搴熸皵娴侀噺',
type: 'line',
stack: '鎬婚噺',
data: [820, 932, 901, 934, 1290, 1330, 1320]
@@ -115,50 +161,48 @@
</script>
<style scoped lang="less">
-.win {
- width: 100%;
- height: 100%;
- position: relative;
- //display: inline-block;
- background-color: rgba(33, 41, 69,0.9);
-}
-.border_corner{
- z-index: 2500;
- position: absolute;
- width: 10px;
- height: 10px;
- background: rgba(0,0,0,0);
- border: 1.5px solid #47d5ea;
-}
-.border_corner_left_top{
- top: 0;
- left: 0;
- border-right: none;
- border-bottom: none;
-}
-.border_corner_right_top{
- top: 0;
- right: 0;
- border-left: none;
- border-bottom: none;
-}
-.border_corner_left_bottom{
- bottom: 0;
- left: 0;
- border-right: none;
- border-top: none;
-}
-.border_corner_right_bottom{
- bottom: 0;
- right: 0;
- border-left: none;
- border-top: none;
-}
-.main {
- width: 100%;
- height: 100%;
- .main-echarts{
- border: 1px solid #396d83;
- }
-}
+ .win {
+ /*width: 100%;*/
+ /*height: 100%;*/
+ position: relative;
+ //display: inline-block;
+ background-color: rgba(33, 41, 69,0.9);
+ }
+ #echarts{
+ width: 600px;
+ height: 260px;
+ }
+ .border_corner{
+ z-index: 2500;
+ position: absolute;
+ width: 14px;
+ height: 14px;
+ background: rgba(0,0,0,0);
+ border: 2px solid #47d5ea;
+ }
+ .border_corner_left_top{
+ top: 0;
+ left: 0;
+ border-right: none;
+ border-bottom: none;
+ }
+ .border_corner_right_top{
+ top: 0;
+ right: 0;
+ border-left: none;
+ border-bottom: none;
+ }
+ .border_corner_left_bottom{
+ bottom: 0;
+ left: 0;
+ border-right: none;
+ border-top: none;
+ border-bottom-left-radius: 4px;
+ }
+ .border_corner_right_bottom{
+ bottom: 0;
+ right: 0;
+ border-left: none;
+ border-top: none;
+ }
</style>
--
Gitblit v1.8.0