VUEプロジェクトecharts属性の概要

<DIV ID = "echarts" スタイル= "幅:600PX;高さ:400ピクセル;マージントップ:100ピクセル;マージン左:100pxに"> </ div>

  JS機能:

 

。this.EchartsData =この$ echarts.init(のdocument.getElementById( 'echarts'));

オプション1 = {みよう

タイトル:{

テキスト:「私は折れ線グラフだった」、//タイトルの言外の意味:「私は福建省から来た」、//サブタイトル

X:、位置を設定することができる、そこが残っている//タイトル、「左」中央、右の3

TEXTSTYLE:{

色:「赤」、//タイトルのfontSizeの色設定:'18「//設定されたタイトルのフォントサイズを

}

}、

ツールチップ:{

トリガー:マウスは、軸が横軸の範囲内のすべてのノードについての情報の表示されている場合には、チャートを現在のノードの情報を表示するように移動させて「軸」、//デフォルトのアイテム、

  フォーマッタ: "{A} <BR/> {B}:{C}({D}%)"

 

  軸ポインタ:{

    タイプ:「断面」、//点線に移動するマウスは、このノードの横軸と縦軸の現在のノード識別子を有し、影が存在する設定情報内のすべてのノードは、現在、横軸の範囲を表示します

    ラベル:{

      backgroundColor://「赤」、現在のノードの横軸と縦軸の背景色を設定し、現在のノード座っ投影

     }

  }

}、

グリッド:{//周りのアイコンからの距離を設定

  X:50、

  および80、

  ×2:60、

  Y2:70、

  containLabel:真

}、

伝説: {

  データ:[「ポリライン」、「2本の折り線」、「3本の折り線」、「4本の折り線」、「ポリライン5」]、

//情報のそれぞれの内部に対応するシリーズ名から理解することがバインドされ、これは、この情報を表示するか否かを切り替えるために使用することができるされています

  X:「センター」、//伝説の位置を設定するために、そこに残され、中央、右

  TEXTSTYLE:{//

    色:「赤」、//色の凡例を設定します

    fontSize:'18「//凡例のフォントサイズを設定

  }

}、

dataZoom:[//スクロールバーの複数の下で実施することができる、その後の周りにスライドすることができます

{

  ショー:真、//スクロールバーを表示するかどうか

  リアルタイム:真、

  開始:開始位置に0を、//スクロールバー

  終了:80、//スクロールバーの終了位置

  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:{

    色:「#FFF」、//スライダーの色を変更

    shadowBlur:3、

    shadowColorは: 'RGBA(0、0、0、0.6)'、

    shadowOffsetX:2、// x軸は右に影にシフト

    shadowOffsetY:2つの// y軸は影をオフセット

  }、

  下: '0%'、

  高さ: '40'

  }

]、

ツールボックス:{

  左:「正しい」、//操作アイコンの場所のアイコンを設定します

  機能:{

    dataZoom:{

      yAxisIndex: 'なし'

  }、

  戻す: {}、

  saveAsImage:{}

  }

}、

X軸:[

{

  タイプ:「カテゴリ」、

  boundaryGap:左側にはfalse、//アイコン空白の場合は、falseが空白の真の、空白ではありません

  データ:[ '月曜日'、 '火曜日'、 '水曜日'、 '木曜日'、 '金曜日'、 '土曜日'、 '日曜日']、

  axisLine:{   

    記号:[ 'なし'、 '矢印'] //設定XまたはY軸の矢印  

    lineStyle:{

      色: '#のB5B5B5'

      幅:2、//ここで強調表示を追加します}

    } //内方または外方に拡張

  axisTick:{内部:真、長さ:1、}、

  分割線:{

  ショー:真、

  lineStyle:{

  タイプ:「固体」、

  色: '#のFCFCFC'、//グリッドの色

  }

}、

たAxisLabel:{// x軸調整lable //

  間隔:0、//スケール表示のx軸長の数に応じて、例えば:オリジナルスケール表示20、10×のでのみを示し軸、

  回転:0、x軸スケール効果回転識別を達成//

  TEXTSTYLE:{

  fontSize:10、//フォントを大きくします

  色: "#1 B5B5B5"

  }

}、

nameTextStyle:{

  色: "#1 B5B5B5"、

   verticalAlign: "下"、

   fontSize:'10' 、

   パディング:[35,50,10、-2] // x軸タイトルの位置を設定します

   }、

  boundaryGap:偽、

    }

   }

]、

Y軸:[

{

タイプ:「価値」、

名前:「高さ(ミリリットル)」、//ユニットインジケータの左上隅を設定します

たAxisLabel:{

フォーマッタ:「{値}ミリリットル」ユニットの// y軸座標が設けられています。

}、

}、

axisLine:{  

記号:[ 'なし'、 '矢印'] //設定XまたはY軸の矢印   

lineStyle:{

色: '#のB5B5B5'

幅:2、//ここで強調表示を追加します

}   

} //内方または外方に拡張

axisTick:{

内側:真、

長さ:1、

}、

分割線:{

ショー:真、

lineStyle:{

タイプ:「固体」、

色: '#のFCFCFC'、//グリッドの色

  }

}、

たAxisLabel:{// x軸調整lable

間隔:0、//スケール表示のx軸長の数に応じて、例えば:オリジナルスケール表示20、10×のでのみを示し軸、

回転:0、x軸スケール効果回転識別を達成//

TEXTSTYLE:{

fontSize:10、//フォントを大きくします

色: "#1 B5B5B5"

}

}、

nameTextStyle:{

色: "#1 B5B5B5"、

verticalAlign: "下"、

fontSize:'10' 、

パディング:[35,50,10、-2] // x軸タイトルの位置を設定します

}、

boundaryGap:偽、

}

]、プロパティの外側の//ラベル2は、内部に対応して設定されたオプションの直列に配置されてもよいです

ラベル:{//各列に対応するデータを修正します

  正常:{

  ショー:真、//データセットを表示するかどうか

  位置:「内側」は、//位置にディスプレイを設定し、内側、外側、上、下、

  TEXTSTYLE:{

    fontSize:15 // //設定されたフォントサイズ

    色:「赤」//上記のカラーデータ列を設定します

    }

  }

}、

シリーズ:[
{
  名: 'ポリライン'、
  タイプ: '行'、
  スタック: '合計'、
  AreaStyle:{
    ノーマル:{
      色: '赤' //塗りつぶし色を設定します
    }
  }、
  ラベル:{
    ノーマル:{
    ショー:真、に
    位置:「上部」、//内側または外側のディスプレイセット
    {:TEXTSTYLE
    のfontSize:15、//設定フォントサイズの
    色:カラーデータの上方に配置された「赤」//列を
    }
  }
}、
ItemStyle:{/ /色ポリライン設定
  ノーマル:{
    をlineStyle:{
    色: '赤'
    }
  }
}、
データ:[120、132、101、134、90、230、210]}、

  

  

おすすめ

転載: www.cnblogs.com/dinghaoran/p/11572312.html