EChartタイトルスタイルを見出し、x軸、y軸はディスプレイ座標などがグラフの位置を調整します

一般的な作業の例としては、より複雑なクエリチュートリアルすることができ、十分に良いです。

正式タイトル解説：http://echarts.baidu.com/option.html#titleは

、関連座標：X軸：http://echarts.baidu.com/option.html#xAxis

座標関連：Y軸：HTTP：// echarts.baidu.com/option.html#yAxisの

一部を形成する：http://echarts.baidu.com/option.html#grid

<SCRIPT>
     関数getChartsLine（）{ 

        VAR myChart = echarts.init（のdocument.getElementById（ '進歩'）、 'マカロン）; 

        VARのオプション= { 
            タイトル：{ 
                テキスト： '工学線グラフ」、       // メインタイトル
                TEXTSTYLE。 { 
                    色： '＃の0DB9F2'、         // 色 
                    のfontStyle： '標準'、      // スタイル 
                    たfontWeight： '標準'、     // 厚さ 
                    のfontFamily： '微軟雅黒で'、    // フォント 
                    のfontSize：14、     //サイズ 
                    ALIGN =左：行く'    // 水平配向
                }、
                言外の意味： 'サブタイトル'、       @ 字幕 
                subtextStyle：{           // 対応するスタイル 
                    色： '＃1 F27CDE' 、
                    のfontSize： 14 
                }、
                itemGap： 7 
            }、
            グリッド：{           // 現在のキャンバスのグラフ表示データの座標軸 
                50：X 、
                Y： 55 、
                X2： 50 、
                Y2を： 60、
                BorderWidth： 1 
            }、
            ヒント：{ 
                トリガ： '軸' 
            }、
            凡例：{ 
                データ：[ "完了する予定"、 "実際の完了" ] 
            }、
            ツールボックス：{ 
                表示：trueに、
                特徴：{ 
                    saveAsImage：{} 
                } 
            } 、
            XAXIS：{ 
                タイプ： 'カテゴリ' 、
                boundaryGap：falseに、
                データ：[関数（値）{
                         戻り値。
                    }

                
                }  
            }、
            シリーズ：[ 
                { 
                    名： "計画" 、
                    タイプ： ''線、
                    データ：[ 2.6、5.9、9.0、26.4、28.7、70.7、175.6、182.2、48.7、18.8、300、2.3 ]、
                    markPoint：{ 
                        データ： [ 
                            {タイプ： '最大'、名称： '最大' }、
                            {タイプ： '分'、名前： '分' } 
                        ] 
                    }、
                    マークライン：{ 
                        データ：[ 
                            {タイプ： '平均'、名称： '平均'}、
                            [{ 
                                記号： 'なし' 、
                                X： '90％」、
                                Y軸： '最大' 
                            }、{ 
                                記号： '円' 、
                                ラベル：{ 
                                    正常：{ 
                                        位置： '開始' 、
                                        フォーマッタ：「最大」
                                    } 
                                }、
                                タイプ：'最大' 、
                                名称： '最高' 
                            }] 
                        ] 
                    } 
                }、
                { 
                    名： "実際の" 、
                    タイプ： ''線、
                    データ：[ 0、0、37、0、0、15、3036、5572、0、 0、0、0 ]、
                    markPoint：{ 
                        データ：[ 
                            {タイプ： '最大'、名称： '最大' '分'、名称： '最小'} 
                        ]}、
                            {タイプ： 
                                    正常：{
                    }、
                    マークライン：{ 
                        データ：[ 
                            {タイプ： '平均'、名称： '平均值' }、
                            [{ 
                                記号： 'なし' 、
                                X： '90％ ' 
                                Y軸： '最大' 
                            }、{ 
                                記号： '円" 、
                                ラベル：{ 
                                        位置： ''を開始、
                                        フォーマッタ： '最大' 
                                    } 
                                }、
                                タイプ： '最大' 、
                                名称： '最高' 
                            }] 
                        ] 
                    } 
                } 
            ] 
        }; 
        myChart.setOption（オプション）; 
    } 

    getChartsLine（）;
 </ SCRIPT >

 

更新：