From 9185072c775eaf1cd3df53d06bc81dc5bfc8264b Mon Sep 17 00:00:00 2001
From: chenyibo <p-honggang.li@pcitc.com>
Date: 星期二, 30 三月 2021 16:31:58 +0800
Subject: [PATCH] Merge branch 'develop' of http://xearth.cn:6600/r/wuyushui/SewerAndRainNetwork into develop
---
src/components/BaseNav/PublicBounced/GasComponents/GasECharts.vue | 164 ++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 164 insertions(+), 0 deletions(-)
diff --git a/src/components/BaseNav/PublicBounced/GasComponents/GasECharts.vue b/src/components/BaseNav/PublicBounced/GasComponents/GasECharts.vue
new file mode 100644
index 0000000..9084a18
--- /dev/null
+++ b/src/components/BaseNav/PublicBounced/GasComponents/GasECharts.vue
@@ -0,0 +1,164 @@
+<template>
+ <!-- 妗� -->
+ <div class="win">
+ <!-- 鍥涗釜瑙掔殑杈规鏁堟灉 -->
+ <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 class="main">
+ <div class="main-echarts">
+ <div id="echarts" style="width:100%;height:100%" ref="main"></div>
+ </div>
+ </div>
+ </div>
+</template>
+
+<script>
+export default {
+ name: 'GasECharts',
+ methods: {
+ drawChart: function () {
+ const myChart = this.$echarts.init(this.$refs.main)
+ const option = {
+ title: {
+ text: '鎶樼嚎鍥惧爢鍙�'
+ },
+ // color: '#fff',
+ tooltip: {
+ trigger: 'axis'
+ },
+ // legend: {
+ // data: ['閭欢钀ラ攢', '鑱旂洘骞垮憡', '瑙嗛骞垮憡', '鐩存帴璁块棶', '鎼滅储寮曟搸']
+ // },
+ grid: {
+ left: '3%',
+ right: '4%',
+ bottom: '3%',
+ containLabel: true
+ },
+ toolbox: {
+ feature: {
+ saveAsImage: {}
+ }
+ },
+ xAxis: {
+ type: 'category',
+ boundaryGap: false,
+ data: ['鍛ㄤ竴', '鍛ㄤ簩', '鍛ㄤ笁', '鍛ㄥ洓', '鍛ㄤ簲', '鍛ㄥ叚', '鍛ㄦ棩'],
+ axisLabel: {
+ textStyle: {
+ color: '#7edae8' // 鍧愭爣鐨勫瓧浣撻鑹�
+ }
+ },
+ axisLine: {
+ show: false, // 闅愯棌鍧愭爣杞�
+ lineStyle: {
+ color: '#00eeff' // 鍧愭爣杞寸殑棰滆壊
+ }
+ }
+ },
+ yAxis: [{
+ type: 'value',
+ axisLabel: {
+ textStyle: {
+ color: '#7edae8' // 鍧愭爣鐨勫瓧浣撻鑹�
+ }
+ },
+ axisLine: {
+ show: false, // 闅愯棌鍧愭爣杞�
+ lineStyle: {
+ color: '#00eeff' // 鍧愭爣杞寸殑棰滆壊
+ }
+ }
+ }],
+ series: [
+ {
+ 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: '瑙嗛骞垮憡',
+ type: 'line',
+ stack: '鎬婚噺',
+ data: [150, 232, 201, 154, 190, 330, 410]
+ },
+ {
+ name: '鐩存帴璁块棶',
+ type: 'line',
+ stack: '鎬婚噺',
+ data: [320, 332, 301, 334, 390, 330, 320]
+ },
+ {
+ name: '鎼滅储寮曟搸',
+ type: 'line',
+ stack: '鎬婚噺',
+ data: [820, 932, 901, 934, 1290, 1330, 1320]
+ }
+ ]
+ }
+ myChart.setOption(option)
+ }
+ },
+ mounted () {
+ this.drawChart()
+ }
+}
+</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;
+ }
+}
+</style>
--
Gitblit v1.8.0