解决分屏切换2D显示不全

TreeWish

2023-02-28 d805339695bf1d25a333977445e1821508654d13

 src/components/chart/projectState.vue

@@ -42,23 +42,27 @@
            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==',
        [
          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 Line = ["线1", "线2"]
      var color = ["#256589", "#3F88E9"]

            //数据处理
            var datas = [];
      var datas = []
            Line.map((item, index) => {
                if (index == 0) {
                    datas.push(
                        {
          datas.push({
                            symbolSize: 10,
                            symbol: 'circle',
            symbol: "circle",
                            hoverAnimation: false,
                            name: item,
                            type: "line",
@@ -67,16 +71,13 @@
                                normal: {
                                    borderWidth: 5,
                                    color: color[index],
                                }
                            }
                        }
                    )

              },
            },
          })
                } else {
                    datas.push(
                        {
          datas.push({
                            symbolSize: 10,
                            symbol: 'circle',
            symbol: "circle",
                            hoverAnimation: false,
                            name: item,
                            type: "line",
@@ -85,70 +86,65 @@
                                normal: {
                                    borderWidth: 5,
                                    color: color[index],
              },
            },
          })
                                }
                            }
                        }
                    )

                }

            })

        let     option = {
                grid: {
                    left: '5%',
                    top: '30%',
                    bottom: '30%',
                    right: '5%',
          left: "5%",
          top: "30%",
          bottom: "30%",
          right: "5%",
                },
                yAxis: [
                    {
                        type: 'value',
                        position: 'right',
            type: "value",
            position: "right",
                        max: 100,
                        splitLine: {
                            show: false
                        }
                        ,
              show: false,
            },
                        axisLine: {
                            show: false
              show: false,
                        },
                        axisTick: {
                            show: false
              show: false,
                        },
                        axisLabel: {
                            show: false
                        }
                    }
              show: false,
            },
          },
                ],
                xAxis: [
                    {
                        type: 'category',
            type: "category",
                        axisTick: {
                            show: false
              show: false,
                        },
                        axisLine: {
                            show: false,
                            lineStyle: {
                                color: '#6A989E',
                            }
                color: "#6A989E",
              },
                        },
                        axisLabel: {
                            inside: true,
                            show: true,
                            textStyle: {
                                color: '#90deff',// x轴颜色
                                fontWeight: 'normal',
                                fontSize: '12',
                                lineHeight: 20
                            }

                color: "#90deff", // x轴颜色
                fontWeight: "normal",
                fontSize: "12",
                lineHeight: 20,
              },
                        },
                        data: XName,
                    }
          },
                ],
                series: datas,
            };
      }
            const chart = echarts.init(this.$refs.chart)

            chart.setOption(option)
@@ -166,4 +162,3 @@
    height: calc(100% - 30px);
}
</style>