From d805339695bf1d25a333977445e1821508654d13 Mon Sep 17 00:00:00 2001
From: TreeWish <1131093754@qq.com>
Date: 星期二, 28 二月 2023 10:09:30 +0800
Subject: [PATCH] 解决分屏切换2D显示不全
---
src/components/chart/projectState.vue | 301 ++++++++++++++++++++++++-------------------------
1 files changed, 148 insertions(+), 153 deletions(-)
diff --git a/src/components/chart/projectState.vue b/src/components/chart/projectState.vue
index b8bc6ce..b227a68 100644
--- a/src/components/chart/projectState.vue
+++ b/src/components/chart/projectState.vue
@@ -1,169 +1,164 @@
<template>
- <div class="projectState" ref="chart"></div>
+ <div class="projectState" ref="chart"></div>
</template>
-
+
<script>
import * as echarts from "echarts"
import { GetServicesVisitsCount } from "@/api/screen.js"
export default {
- data() {
- return {
- option: {},
+ data() {
+ return {
+ option: {},
+ }
+ },
+ mounted() {
+ // const option = this.initData()
+ this.initChart()
+ },
+ methods: {
+ initChart() {
+ // const res = await GetServicesVisitsCount()
+
+ // console.log(res.result);
+
+ // if (res.code == 200) {
+ // }
+ // let xAxis = []
+ // let yAxis = []
+
+ // res.result.forEach(item => {
+ // xAxis.push(item.type)
+ // yAxis.push(item.count)
+ // })
+
+ // let data = [220, 182, 191, 234, 290, 330, 310]
+ // const sideData = data.map(item => {
+ // return {
+ // name: item.name,
+ // value: item.number,
+ // }
+ // })
+
+ var XName = ["绔嬮」", "鍚姩", "寤鸿", "瀹屾垚"]
+ var data1 = [
+ [100, 100, 100, 100],
+ [
+ 100,
+ 100,
+ {
+ value: 100,
+ symbol:
+ "image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADoAAAA6CAMAAADWZboaAAAAZlBMVEUAAABe3uVe3+Vf3uVf3+Zf3uVg3+Zg3+Zf3+Vi4OZh4OZg3+Z86/Bh3+Zi4Odj4Odi4OZ86/B76/B86/Bj4ed56+9x5+xn4umB7/N87PB36e+A7/N+7fF/7vJ/7vJ+7fGA7/OB7/PReX+lAAAAIXRSTlMABQkVDREmIhk3MR10LEFFPHh7cUprXE35h2XnqMLAp+mHAG9cAAAB5ElEQVRIx83WjU7CMBQFYIoiKMqU/XUboHv/l/Tce7t2XamDNSacETEmX86tlK2rx4py150o+MstMBLwWRfHKo6JCVxLnvmFGBjFQ58oF1//sUZhGy/ClSTWObgnL4O+bkeN4nY2okfNMbkRt9/vtxz8InoTsWplJSCzFxPmO8+GpSIByX3YQAuGDWtRKhKjCnxDXhF6Z4yxnZ20Wgko7BMRDmxtSGVaI4kdTIgb+zTYoJQlIMlDlmUFgrcDWWC201qSayqlTkiCddWWeV62VU0YlnpRi9VOKaSUsiyq/N0krwq2Ugt7lVpZl5BfHNiytjagMi+XYp0kCR45hMlivVQrE/uU5pXSrCB5bM6d1t2lOZItMqmliT3q5uVxqxzyW/ccfYLNKx7ZTeykMvNyac2yt2Fbc61MHLSC0rwoxbiNdlQ3GBm1NLHQsHUrtEXppR/ljNpW6DbSCoqlFiVoN6YdaFlgsSFVPs1BdT8OaB5QyQzVcaqWDows/zepxR8ObLglTrdtCRVuRNj4Rrxh+//0ke2f8KVL+Kon3GCSbmsJN9OUW3j6g0Ns+LgCij2u0h+Sghc8mlMPBMgdx5DFh59VmOVHrvmDnoNxCz3J7MFWsMuaLyR089xz/xhlfijvwutR8gv3zk6BLUUeCgAAAABJRU5ErkJggg==",
+ symbolSize: [50, 50],
+ },
+ ],
+ ]
+ var Line = ["绾�1", "绾�2"]
+ var color = ["#256589", "#3F88E9"]
+
+ //鏁版嵁澶勭悊
+ var datas = []
+ Line.map((item, index) => {
+ if (index == 0) {
+ datas.push({
+ symbolSize: 10,
+ symbol: "circle",
+ hoverAnimation: false,
+ name: item,
+ type: "line",
+ data: data1[index],
+ itemStyle: {
+ normal: {
+ borderWidth: 5,
+ color: color[index],
+ },
+ },
+ })
+ } else {
+ datas.push({
+ symbolSize: 10,
+ symbol: "circle",
+ hoverAnimation: false,
+ name: item,
+ type: "line",
+ data: data1[index],
+ itemStyle: {
+ normal: {
+ borderWidth: 5,
+ color: color[index],
+ },
+ },
+ })
}
- },
- mounted() {
- // const option = this.initData()
- this.initChart()
- },
- methods: {
- initChart() {
- // const res = await GetServicesVisitsCount()
+ })
- // console.log(res.result);
-
- // if (res.code == 200) {
- // }
- // let xAxis = []
- // let yAxis = []
-
- // res.result.forEach(item => {
- // xAxis.push(item.type)
- // yAxis.push(item.count)
- // })
-
- // let data = [220, 182, 191, 234, 290, 330, 310]
- // const sideData = data.map(item => {
- // return {
- // name: item.name,
- // value: item.number,
- // }
- // })
-
- var XName = ["绔嬮」", "鍚姩", "寤鸿", "瀹屾垚"]
- var data1 = [
- [100, 100, 100, 100],
- [100, 100, {
- value: 100, symbol:
- 'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADoAAAA6CAMAAADWZboaAAAAZlBMVEUAAABe3uVe3+Vf3uVf3+Zf3uVg3+Zg3+Zf3+Vi4OZh4OZg3+Z86/Bh3+Zi4Odj4Odi4OZ86/B76/B86/Bj4ed56+9x5+xn4umB7/N87PB36e+A7/N+7fF/7vJ/7vJ+7fGA7/OB7/PReX+lAAAAIXRSTlMABQkVDREmIhk3MR10LEFFPHh7cUprXE35h2XnqMLAp+mHAG9cAAAB5ElEQVRIx83WjU7CMBQFYIoiKMqU/XUboHv/l/Tce7t2XamDNSacETEmX86tlK2rx4py150o+MstMBLwWRfHKo6JCVxLnvmFGBjFQ58oF1//sUZhGy/ClSTWObgnL4O+bkeN4nY2okfNMbkRt9/vtxz8InoTsWplJSCzFxPmO8+GpSIByX3YQAuGDWtRKhKjCnxDXhF6Z4yxnZ20Wgko7BMRDmxtSGVaI4kdTIgb+zTYoJQlIMlDlmUFgrcDWWC201qSayqlTkiCddWWeV62VU0YlnpRi9VOKaSUsiyq/N0krwq2Ugt7lVpZl5BfHNiytjagMi+XYp0kCR45hMlivVQrE/uU5pXSrCB5bM6d1t2lOZItMqmliT3q5uVxqxzyW/ccfYLNKx7ZTeykMvNyac2yt2Fbc61MHLSC0rwoxbiNdlQ3GBm1NLHQsHUrtEXppR/ljNpW6DbSCoqlFiVoN6YdaFlgsSFVPs1BdT8OaB5QyQzVcaqWDows/zepxR8ObLglTrdtCRVuRNj4Rrxh+//0ke2f8KVL+Kon3GCSbmsJN9OUW3j6g0Ns+LgCij2u0h+Sghc8mlMPBMgdx5DFh59VmOVHrvmDnoNxCz3J7MFWsMuaLyR089xz/xhlfijvwutR8gv3zk6BLUUeCgAAAABJRU5ErkJggg==',
- symbolSize: [50, 50],
- }]
- ]
- var Line = ["绾�1", "绾�2"];
- var color = ['#256589', '#3F88E9'];
-
- //鏁版嵁澶勭悊
- var datas = [];
- Line.map((item, index) => {
- if (index == 0) {
- datas.push(
- {
- symbolSize: 10,
- symbol: 'circle',
- hoverAnimation: false,
- name: item,
- type: "line",
- data: data1[index],
- itemStyle: {
- normal: {
- borderWidth: 5,
- color: color[index],
- }
- }
- }
- )
-
- } else {
- datas.push(
- {
- symbolSize: 10,
- symbol: 'circle',
- hoverAnimation: false,
- name: item,
- type: "line",
- data: data1[index],
- itemStyle: {
- normal: {
- borderWidth: 5,
- color: color[index],
- }
- }
- }
- )
-
- }
-
- })
-
- let option = {
- grid: {
- left: '5%',
- top: '30%',
- bottom: '30%',
- right: '5%',
- },
- yAxis: [
- {
- type: 'value',
- position: 'right',
- max: 100,
- splitLine: {
- show: false
- }
- ,
- axisLine: {
- show: false
- },
- axisTick: {
- show: false
- },
- axisLabel: {
- show: false
- }
- }
- ],
- xAxis: [
- {
- type: 'category',
- axisTick: {
- show: false
- },
- axisLine: {
- show: false,
- lineStyle: {
- color: '#6A989E',
- }
- },
- axisLabel: {
- inside: true,
- show: true,
- textStyle: {
- color: '#90deff',// x杞撮鑹�
- fontWeight: 'normal',
- fontSize: '12',
- lineHeight: 20
- }
-
- },
- data: XName,
- }
- ],
- series: datas,
- };
- const chart = echarts.init(this.$refs.chart)
-
- chart.setOption(option)
- window.addEventListener("resize", function () {
- chart.resize()
- })
+ let option = {
+ grid: {
+ left: "5%",
+ top: "30%",
+ bottom: "30%",
+ right: "5%",
},
+ yAxis: [
+ {
+ type: "value",
+ position: "right",
+ max: 100,
+ splitLine: {
+ show: false,
+ },
+ axisLine: {
+ show: false,
+ },
+ axisTick: {
+ show: false,
+ },
+ axisLabel: {
+ show: false,
+ },
+ },
+ ],
+ xAxis: [
+ {
+ type: "category",
+ axisTick: {
+ show: false,
+ },
+ axisLine: {
+ show: false,
+ lineStyle: {
+ color: "#6A989E",
+ },
+ },
+ axisLabel: {
+ inside: true,
+ show: true,
+ textStyle: {
+ color: "#90deff", // x杞撮鑹�
+ fontWeight: "normal",
+ fontSize: "12",
+ lineHeight: 20,
+ },
+ },
+ data: XName,
+ },
+ ],
+ series: datas,
+ }
+ const chart = echarts.init(this.$refs.chart)
+
+ chart.setOption(option)
+ window.addEventListener("resize", function () {
+ chart.resize()
+ })
},
+ },
}
</script>
-
+
<style lang="scss" scoped>
.projectState {
- width: 100%;
- height: calc(100% - 30px);
+ width: 100%;
+ height: calc(100% - 30px);
}
</style>
-
\ No newline at end of file
--
Gitblit v1.9.3