43ECharts：ECG結果

一、心电图效果之单线条
`` `HTML：実行
<！DOCTYPE HTML> 
<HTML LANG = "EN"> 
<HEAD> 
    <メタ文字コード= "UTF-8"> 
    <タイトル> Echarts实现心电图效果</ TITLE> 
    <スクリプトSRC = "https://cdn.bootcss.com/echarts/3.7.1/echarts.js"> </ SCRIPT> 
</ HEAD> 
<BODY> 
の<divのid = "totalFlowRate"スタイル= "高さ：300ピクセル; "> </ div> 
</ BODY> 
</ HTML> 
ます。<script type =" text / javascriptの"> 
    VAR totalFlowRate = echarts.init（のdocument.getElementById（ 'totalFlowRate'））; 
    VAR xAxisData = []; 
    VAR yAxisData = []; 
    { - （I; I> 0 VAR I = 500）についての
        xAxisData.push（I +」



    } 
    VARのtotalFlowRateOption = { 
        アニメーション：偽、
        タイトル：{ 
            テキストは： '总流量（kbps単位）' / *、
             左： "110px" * / 
        }、
        ツールチップ：{ 
            トリガ： '軸'、
            axisPointerを：{ 
                タイプ： '断面' 
            } 
        }、
        グリッド：{ 
            左：50 / * "は50px" * /、
            右：15 / * "15ピクセル" * / 
        }、
        凡例：{ 
            データ：[ '当前流量'] 
        }、
        x軸：{ 
            boundaryGap：偽、
            データ：xAxisData 
        }、
        Y軸：{
            boundaryGap：falseに
        }、
        {：シリーズ
            記号： "なし"、/ *小さなドットを削除* / 
            名： '電流の流れ'、
            タイプ： '行'、
            ItemStyle：{ 
                ノーマル：{ 
                    をlineStyle：{ 
                        幅：2、//幅ポリラインの
                        色： "＃FF0000の" //色のポリライン
                    } 
                } 
            }、
            データ：yAxisData / *、
             スムーズ：//真のデジタル真か偽か、滑らかな曲線を示し、0-1間* / 
        } 
    }; 
    totalFlowRate .setOption（totalFlowRateOption）; 
    たsetInterval（関数（）{
        yAxisData.push（恐らくMath.round（Math.random（）* 1000））; 
        yAxisData.shift（）; 
        totalFlowRate.setOption（totalFlowRateOption）; 
    }、100）; 
    / *のsetInterval（関数（）{ 
        yAxisData.push（数学。ラウンド（Math.random（）* 1000））; 
        yAxisData.shift（）; 
        VARのmyselfOptionのtotalFlowRate.getOption =（）; 
        myselfOption.series [0] = yAxisData .DATA; 
        totalFlowRate.setOption（myselfOption）; 
    }、100）。 * / 
</ SCRIPT> 
`` ` 
第二に、ラインのシェーディングの単一ECG効果がある
` `` HTML：RUN 
<！DOCTYPE HTML> 
<HTML LANG = "EN"> 
<HEAD> 
    <METAのcharset = "UTF-8" > 
    ECGを達成し、<タイトル> Echarts効果</ TITLE>
    <スクリプトSRC = "https://cdn.bootcss.com/echarts/3.7.1/echarts.js"> </ SCRIPT> 
</ HEAD> 
<BODY> 
の<divのid = "totalFlowRate"スタイル= "高さ：300ピクセル; "> </ div> 
</ BODY> 
</ HTML> 
ます。<script type =" text / javascriptの"> 
    VAR totalFlowRate = echarts.init（のdocument.getElementById（ 'totalFlowRate'））; 
    VAR xAxisData = []; 
    VAR yAxisData = []; 
    用（VAR I = 100; I> 0; I - ）{ 
        xAxisData.pushは（iは"秒前" +）。
    } 
    {式（I ++; iが101 <I = 1）のための
        yAxisData.push（恐らくMath.round（Math.random（）* 1000））。
    } 
    のsetInterval（関数（）{ 
        yAxisData.push（恐らくMath.round（Math.random（）* 1000））。
        yAxisData.shift（）; 
        総流量オプション= {
            アニメーション：偽の
            タイトル：{ 
                テキスト： '総流量（kbps単位）' / *は、
                 左： "110px" * / 
            } 
            ヒント：{ 
                トリガ： '軸'、
                axisPointer：{ 
                    タイプ： '断面' 
                } 
            }、
            グリッド。 { 
                左：50 / * "は50px" * /、
                右：15 / * "15ピクセル" * / 
            }、
            凡例：{ 
                データ：[ '現在の交通']、
                TEXTSTYLE：{色： "＃1 66b3ff"} / *凡例（凡例）/ *テキストの色を記載し
            、} 
            XAXISました：{ 
                boundaryGap：偽、
                データ：xAxisData、
                分割線：ショー{：} trueに/ *グリッド* / 
            }、
            YAXIS：{ 
                boundaryGap：偽への
                分割線：ショー{：} trueに/ *グリッド* / 
            }、
            シリーズ：{ 
              / * ItemStyle： {ノーマル：{AreaStyle：{タイプ： 'デフォルト'}}} * / 
              ItemStyle：{ 
                ノーマル：{ 
                  をlineStyle：{ 
                    色： '＃92c2ff' / *ポリラインカラー* / 
                  }、
                  色： "＃1 66b3ff" / *色凡例（凡例）、テキストの色が凡例ではない* / 
                } 
              }、
              AreaStyle：{ノーマル：{
                色：新しい新しいecharts.graphic.LinearGradient（
                  0、0、0、。1、
                  [ 
                    {オフセット：0、色： '＃1 66b3ff'} 
                   / *オフセット{：0.5、色： '＃1 c4e1ff'}、* / 
                    {オフセット：1、色： '＃のecf5ff'} 
                  ] 
                ）
              }}、
              記号： "なし"、/ *小さなドットを削除* / 
              名： '電流の流れ'、
              タイプ： '行'、
              データ：yAxisData / *、
               スムーズ：真// * /滑らかな曲線として表示
            } 
        ;} 
        ; totalFlowRate.setOption（totalFlowRateOption）
    ）}、100; 
</ SCRIPT> 
`` `
プッシュ（私は "秒前" +）;     }     のための（i = 1; iは7501 <; iは++）{




















        yAxisData.push（恐らくMath.round（Math.random（）* 1000））; 
    } 
    VARのtotalFlowRateOption = { 
        アニメーション：偽、
        タイトル：{ 
            テキストは： '总流量（kbps単位）' / *、
             左： "110px" * / 
        }、
        ツールチップ：{ 
            トリガ： '軸'、
            axisPointerを：{ 
                タイプ： '断面' 
            } 
        }、
        グリッド：{ 
            左：50 / * "は50px" * /、
            右：15 / * "15ピクセル" * / 
        }、
        凡例：{ 
            データ：[ '当前流量'] 
        }、
        x軸：{ 
            boundaryGap：偽、

        }、
        YAXIS：{ 
            boundaryGap：falseに
        }、
        シリーズ：{ 
            記号： "なし"、/ *小さなドットを削除* / 
            名： '電流の流れ'、
            タイプ： '行'、
            データ：yAxisData / *、
             スムーズ：trueに/ / * /滑らかな曲線として示されている
        } 
    }; 
    totalFlowRate.setOption（totalFlowRateOption）; 
    たsetInterval（関数（）{ 
        yAxisData.push（恐らくMath.round（Math.random（）* 1000））; 
        yAxisData.shift（）; 
        totalFlowRate。 setOptionを（totalFlowRateOption）; 
    }、100）; 
    / *のsetInterval（関数（）{ 
     yAxisData.push（恐らくMath.round（Math.random（）* 1000））; 
     yAxisData.shift（）。
     VAR myselfOption = totalFlowRate.getOption（）。
     myselfOption.series [0] .DATA = yAxisData。
     totalFlowRate.setOption（myselfOption）。
     }、100）; * / 
</スクリプト> 
`` `
おすすめ
