From cc058b247905a8a273f1f04407515bf99a6c4337 Mon Sep 17 00:00:00 2001 From: zhangxiaoxu123456 <zxx19900626> Date: 星期三, 13 四月 2022 17:44:41 +0800 Subject: [PATCH] 细节样式 --- src/pages/show/jiuyeAndChuangye/jiuyeChildren/zhiyePeixun.vue | 117 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 files changed, 116 insertions(+), 1 deletions(-) diff --git a/src/pages/show/jiuyeAndChuangye/jiuyeChildren/zhiyePeixun.vue b/src/pages/show/jiuyeAndChuangye/jiuyeChildren/zhiyePeixun.vue index 3cff4c2..f66d23e 100644 --- a/src/pages/show/jiuyeAndChuangye/jiuyeChildren/zhiyePeixun.vue +++ b/src/pages/show/jiuyeAndChuangye/jiuyeChildren/zhiyePeixun.vue @@ -65,11 +65,12 @@ </el-table-column> </el-table-column> </el-table> - <div class="zhiyepeixun-echarts"></div> + <div class="zhiyepeixun-echarts" id="zhiyepeixunEcharts"></div> </div> </template> <script> + import nowSize from "../../../../libs/nowSize"; export default { name: "zhiyePeixun", data() { @@ -113,12 +114,126 @@ }] } }, + mounted() { + this.zhiyepeixunEcharts() + }, methods: { handleheader(data) { return { lineHeight: '0', } + }, + zhiyepeixunEcharts() { + let myEchart = this.$echarts.init(document.getElementById('zhiyepeixunEcharts')) + let option = { + tooltip: { + trigger: 'axis', + axisPointer: { + type: 'cross', + crossStyle: { + color: '#999' + } + } + }, + title: { + text:'鍘嗗勾鑱屼笟鍩硅鎯呭喌鍒嗘瀽鍥�', + left: 'center', + top:'3%', + textStyle: { + color: '#fff', + fontSize: nowSize(30) + } + }, + legend: { + right:'3%', + top:'3%', + textStyle: { + color:'#fff', + fontSize: nowSize(24) + } + }, + xAxis: [ + { + type: 'category', + data: ['2017骞�', '2018骞�', '2019骞�', '2020骞�', '2021骞�', '2022骞�', '2023骞�'], + axisPointer: { + type: 'shadow' + }, + axisLabel: { + textStyle: { + color: '#fff', + fontSize: nowSize(24) + } + }, + axisLine: { + lineStyle: { + color: "#999999", + width: 1, + type: "solid" + } + } + } + ], + yAxis: [ + { + type: 'value', + name: 'Precipitation', + min: 0, + max: 250, + interval: 50, + axisLabel: { + formatter: '{value} ml', + textStyle: { + color: '#fff', + fontSize: nowSize(24) + } + }, + axisLine: { + + } + }, + { + type: 'value', + name: 'Temperature', + min: 0, + max: 25, + interval: 5, + axisLabel: { + formatter: '{value} 掳C' + } + } + ], + series: [ + { + name: 'Evaporation', + type: 'bar', + tooltip: { + valueFormatter: function (value) { + return value + ' ml'; + } + }, + data: [ + 2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3 + ] + }, + { + name: 'Temperature', + type: 'line', + yAxisIndex: 1, + tooltip: { + valueFormatter: function (value) { + return value + ' 掳C'; + } + }, + data: [2.0, 4.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2] + } + ] + }; + myEchart.setOption(option) + window.addEventListener('resize',function () { + myEchart.resize() + }) } } } -- Gitblit v1.9.1