シングル折れ線グラフの構成が優れているが、単なる言葉よりも、家主全体の午後は友人と難しいそれらを従事、シェア以下でした
VAR myChart = echarts.init（のdocument.getElementById（ 'シリーズチャート' ））; // 指定された構成とデータ・テーブル のvarオプション= { baseOption：{ // チャートの設定タイトル タイトル：{ テキスト： '販売' 、 TEXTSTYLE ：{ たfontSize： 12である、 たfontWeight： 400 、 カラー： '＃000000' }、 左： 5 、 トップ： -5 、 } // 構成メッセージ '軸' ツールチップ：{ トリガー：、 axisPointer：{ タイプ： '影' } }、 色：[ '＃1 FA660A'、 '＃0E76E4'、 '＃8923F1'、 '＃FF0000'、 "＃339966" ]、 凡例：{ ショー：真、 右： '15％」、 トップ： 12 、 幅： 300 、 高さ： 100 、 アイコン： 'RECT' 、 itemWidth： 10 、 itemHeight。4 、 TEXTSTYLE：{ 色： '＃1 1a1a1a' 、 のfontSize： 12である、 }、 []、データ // 凡例凡例は、動的に取得 }、 グリッド：{ トップ： 60 、 左： 55 、 右： 75 、 }、 // dataZoomは、スライダコントロールの下で、不必要な、あなたが設定することはできません。いいえカット アウト図 dataZoom：[{ // Y軸は固定されているので、スクロールの内容をその タイプ：「スライダー」、 表示：falseに、 xAxisIndex：[ 0]、 スタート： 1 、 終了： 50は、// X軸の目盛間隔（データの量を調節する）を設定 ：zoomLock trueに、// ロック禁止エリアズーム（ズームマウスはスクロールし、禁止されている） }、 { タイプ： '内側' 、 xAxisIndex：[ 0 ]、 スタート： 1 、 終了： 50 、 zoomLock：trueに、// 禁止エリアズームをロック }、{ スタート： 0、 終了： 10 、 showDetailは：falseに、 左：「センター」は、// アセンブリ離れコンテナの左側から、「右」、「センター」「左」、「％20」で 、右：「オート」、// アセンブリ容器の右側からの距離、'20％ ' 底： "8％" 、 高さ： 8 、 dataBackground：{ をlineStyle：{ 幅： 0.5 、 高さ： 0.5 、 色： '#CCCCCC' 、 タイプ：「固体」、 } }、 fillerColor： '＃ea6100' 、 handleIcon：「M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1、 8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13 .3,19.6H6.7v-1.4h6.6V19.6z ' handleSize： '50％' 、 handleStyle：{ 色：{ タイプ： 'リニア' 、 X： 0 、 Y： 0 、 X 2： 0 、 Y2： 1 、 colorStops：[{ オフセット： 0 、 カラー： '＃1 FA660A' // 0％の色 }、{ オフセット： 1 、 カラー： '＃ea6100' // 色100％で } ]、 グローバル：falseに // デフォルトはfalse }、 shadowBlur： 3 、 shadowColorは： 'RGBA（0、0、0、0.6）'、 ShadowOffsetX： 1 、 shadowOffsetY： 1 } } ]、 // Xは、軸 {：XAXIS 名： '時間'、// X軸プラスユニットに nameLocation： '終了'、// 時間の位置が生じ 'カテゴリー'：タイプ、 // X軸設定テキスト たAxisLabel：{ 表示：trueに、 内側：falseに、 ALIGN =左： '左'、 // マージン:. 4、 TEXTSTYLE：{ 色： '＃1 1a1a1a' 、 のfontSize： '10' } }、 axisTick：{ 表示：偽へ } // x軸目盛り削除 データ：[]、 axisLine：{ 表示：falseに、 長さ： 3 、 } }、 // Yは、軸 YAXISの：{ たAxisLabel：{ 表示： trueに、 TEXTSTYLE：{ 色： '＃の1a1a1a' 、 のfontSize： '10' } }、 axisLineは：{ 表示：falseに // Y軸の目盛りが表示されていない } }、 シリーズ：{ タイプ： "ライン" 、 名前： "" 、 データ：[]、 } } }; // 単に指定された構成データ項目を使用して、チャートを表示します。- > myChart.setOption（オプション）。
処理に続いてインターフェイス
I ++ ）{ VAR OBJ = 新しいオブジェクト（）; OBJ = item.month_data [I]。 VaRの月= obj.substring（5、7 ）; [i]はmonthData = 月。 } にconsole.log（monthData）。 VaRの凡例= []; // 设置图例文字 用（VAR I = 0、I <item.data.length; I ++ ）{ VAR OBJ = 新しいオブジェクト（）; obj.name = item.data [I] .nameの。 凡例[I] = OBJ。 } にconsole.log（凡例）。 VaRの名前= []; //设置图标每条线名称 ため（varが I = 0、I <item.data.length; I ++ ）{ VAR OBJ = 新しいオブジェクト（）; obj.name = item.data [I] .nameの。 名前[i]を = OBJ。 } にconsole.log（名）; // 销量 VAR saleData = []; ため（VAR iが= 0; I <item.data.length; I ++ ）{ VAR OBJ = 新しいオブジェクト（）; obj.sales_data = item.data [I] .sales_data。 saleData [I]= OBJ。 } にconsole.log（saleData）。 console.log（item.data）。 // 折线图数据需要重新プッシュ するvar S_DATA = []; 用（VARの J = 0; J <item.data.length; J ++ ）{ s_temp = { 名：item.data [J] .nameの、 タイプ： "行" 、 シンボル： 'なし' 、 データ：item.data [ J] .sales_data }。 s_data.push（s_temp） } VAR SrtHtml = "" ; // ヒストグラムアレイ必要の下降 myChart.setOption（{ XAXIS：{ データ：monthData.reverse（） }、 凡例：{ データ：レジェンド }、 シリーズ：S_DATA }）; }、 エラー：関数（ ）{ にconsole.log（ "要求が失敗しました" ）; } }）