From d74fefdd5b3b86f97df7ce659b42bf138667323c Mon Sep 17 00:00:00 2001
From: zhangshuaibao <15731629597@163.com>
Date: 星期二, 30 三月 2021 17:29:05 +0800
Subject: [PATCH] 弹窗中折线统计图基本布局
---
src/components/BaseNav/PublicBounced/GasComponents/GasECharts.vue | 145 +++++++++++++++++++++++++++++++++++++++--------
1 files changed, 119 insertions(+), 26 deletions(-)
diff --git a/src/components/BaseNav/PublicBounced/GasComponents/GasECharts.vue b/src/components/BaseNav/PublicBounced/GasComponents/GasECharts.vue
index d6e3909..5d557e0 100644
--- a/src/components/BaseNav/PublicBounced/GasComponents/GasECharts.vue
+++ b/src/components/BaseNav/PublicBounced/GasComponents/GasECharts.vue
@@ -1,5 +1,11 @@
<template>
- <div id="echarts" style="width:300px;height:222px" ref="main"></div>
+ <div class="ShowEcharts">
+ <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>
</template>
<script>
@@ -10,18 +16,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: ['閭欢钀ラ攢', '鑱旂洘骞垮憡', '瑙嗛骞垮憡', '鐩存帴璁块棶', '鎼滅储寮曟搸']
+ data: ['姘哀鍖栫墿', '浜屾哀鍖栫～', '鐑熷皹', '搴熸皵娴侀噺']
+ // pageTextStyle: {
+ // color: '#fff'
+ // }
},
grid: {
left: '3%',
- right: '4%',
+ right: '3%',
bottom: '3%',
containLabel: true
},
@@ -30,63 +45,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]
@@ -103,5 +153,48 @@
</script>
<style scoped lang="less">
-
+ .ShowEcharts{
+ position: relative;
+ display: inline-block;
+ border: 1px solid #0B89B5;
+ background: #243a55;
+ margin: 10px;
+ }
+ .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;
+ }
+ #echarts{
+ width: 600px;
+ height: 260px;
+ }
</style>
--
Gitblit v1.8.0