vue3+vite+echarts で大画面効果を実現

プロジェクトのシナリオ:

vue3+vite+echarts を使用して大画面効果を実現します

。視覚的な大画面ではないため、プロジェクトをアダプティブにすることはできません。以前にアダプティブを実行することを考えていて、レイアウトに flex+100% を使用しました。

---

1: フォーム選択時にエコーを表示しません。

問題の説明: フォームを使用して左上隅に書き込みましたが、クリックしてもドロップダウンの選択が表示されず、選択内容もエコーされません。

理由: 背景画像のウェイトが高すぎるため、クリックしてもドロップダウンが表示されません。これは、フォーム内の参照値とモデル値が同じであることが原因です。

解決策: 背景画像のウェイトを変更してから、参照とモデルを変更します。これらを同じにすることはできません。

2: 父と子の通信、子コンポーネントは値を受け取ることができません。

問題の説明: 親コンポーネントは子コンポーネントに値を渡しますが、子コンポーネントは空のデータを取得します。

理由: 親コンポーネントと子コンポーネントが同時にデータを取得するため、子コンポーネントがパラメータを受け取る前にページが読み込まれます。

解決策: 親コンポーネントのロゴを使用して判断し、最初に親コンポーネントを完成させ、次に子コンポーネントを完成させます。

ここでは判定にフラグのブール値を使用し、インターフェースがデータを取得した後、フラグの値を true に変更してサブコンポーネントが値を取得するようにしています。

新たな問題が発生します。2 つの統計グラフのデータが変化すると、親コンポーネントはその値を子コンポーネントに渡します。親コンポーネントの値が更新されて子コンポーネントのメソッドが呼び出されるとき、古い値が取得されたままになります。したがって、選択するときは、需要将flag变为false，然后再调方法。

3: for ループでは、2 つの値を 1 行に表示する必要があります。

解決：

const monthly = (items,i)=>{
    
    
        let arryy = [];
        let oldarr = items;
        for(let y = i; y < oldarr?.length; y++) {
    
    
            if (arryy?.length < 2) {
    
    
                arryy.push(items[y]);
            } else {
    
    
                break;
            }
        }
        return arryy;
}

効果：

このメソッドは直接使用することも、必要に応じて変更することもできます。

4: スクロールバーのスタイルを変更する

参考：https://www.jianshu.com/p/fd4f143cc3e3

解決策: スクロールバー.css ファイルを作成し、コードをそこに直接貼り付けて、使用する特定のファイルに入れます。具体的には、個々のニーズと微調整によって異なります。

/*css主要部分的样式*/
/*定义滚动条宽高及背景，宽高分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar {
    
    
    width: 6px; /*对垂直流动条有效*/
    height: 6px; /*对水平流动条有效*/
}

/*定义滚动条的轨道颜色、内阴影及圆角*/
::-webkit-scrollbar-track{
    
    
    border-radius: 4px;
    /* -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3); */
    /* background-color: rosybrown; */
}

/*定义滑块颜色、内阴影及圆角*/
::-webkit-scrollbar-thumb{
    
    
    border-radius: 8px;
    background-color: #DDDEE0;
    /* -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3); */
}

/*定义滑块悬停变化颜色、内阴影及圆角*/
::-webkit-scrollbar-thumb:hover{
    
    
    background-color: #C7C9CC;
}

/*定义两端按钮的样式*/
::-webkit-scrollbar-button {
    
    
    /* background-color: cyan; */
}

/*定义右下角汇合处的样式*/
::-webkit-scrollbar-corner {
    
    
    /* background: khaki; */
}

/* 隐藏滚动条 */
/* ::-webkit-scrollbar {
    display: none;
} */

計算の歪みの問題を解決できる非常に役立つことをお話しましょう。Mathjs は加算、減算、乗算、除算の演算を実行できます。npm から mathjs をダウンロードします

import * as $math from 'mathjs'
export const math = {
    
    
    // +
    add () {
    
    
        return comp('add', arguments)
    },
    // -
    subtract () {
    
    
        return comp('subtract', arguments)
    },
    // x
    multiply () {
    
    
        return comp('multiply', arguments)
    },
    // ÷
    divide () {
    
    
        return comp('divide', arguments)
    }
}

function comp (_func, args) {
    
    
    let t = $math.chain($math.bignumber(args[0]))
    for (let i = 1; i < args.length; i++) {
    
    
        t = t[_func]($math.bignumber(args[i]))
    }
    // 防止超过6位使用科学计数法
    return parseFloat(t.done())
}

1. 使用する必要があるページは、「@/utils/math」から {math} をインポートします。
2. 使用: math.divide(処理する値, value) これで問題ありません。
   例: 値を 100 で割る必要があります math.divide(Number(ruleForm.value.outHousePrice),100)