<％@ページ言語= "javaの" contentTypeの= "text / htmlの;のcharset = UTF-8" pageEncodingは= "UTF-8" ％> <！DOCTYPE HTML> <HTML> <HEAD> <メタのcharset = "UTF-8 "> <タイトル>ここで挿入タイトル</ TITLE>
<！ -这些都是需要导入的瓶包- > <スクリプトSRC =" JS / echarts.min.js "> </ SCRIPT> <スクリプトSRC =" JS / china.js "> </ SCRIPT> <スクリプトSRC =" JS /州/ anhui.js "> </ SCRIPT> <スクリプトSRC =" JS /州/ aomen.js "> </ SCRIPT> <スクリプトSRC = "JS /州/ beijing.js"> </ SCRIPT> <スクリプトSRC = "JS /州/ chongqing.js"> </ SCRIPT> <スクリプトSRC = "JS /州/ fujian.js"> </ SCRIPT> <スクリプトSRC = "JS /州/ gansu.js"> </ SCRIPT> <スクリプトSRC = "JS /州/ guangdong.js"> < /スクリプト> <スクリプトSRC = "JS /州/ guangxi.js"> </ SCRIPT> <スクリプトSRC = "JS /州/ hainan.js"> </ SCRIPT> <スクリプトSRC = "JS /州/ hebei.js"> </スクリプト> <スクリプトSRC = "JS /州/ heilongjiang.js"> </ SCRIPT> <スクリプトSRC = "JS /州/ henan.js"> </ SCRIPT> <スクリプトSRC = "JS /州/湖北.js "> </ SCRIPT> <スクリプトSRC =" JS /州/ hunan.js "> </ SCRIPT> <スクリプトSRC =" JS /州/ jiangsu.js "> </ SCRIPT> <スクリプトSRC =" JS /province/jiangxi.js "> </ SCRIPT> <スクリプトSRC =" JS /州/ jilin.js "> </ SCRIPT> <スクリプトSRC =" JS /州/ liaoning.js "></スクリプト> <スクリプトSRC = "JS /州/ neimenggu.js"> </ SCRIPT> <スクリプトSRC = "JS /州/ ningxia.js"> </ SCRIPT> <SCRIPT SRC = "JS /州/青海.js "> </ SCRIPT> <スクリプトSRC = "JS /州/ shandong.js"> </ SCRIPT> <スクリプトSRC = "JS /州/上海.js "> </ SCRIPT> <スクリプトSRC = "JS /州/ shanxi.js"> </ SCRIPT> <スクリプトSRC = "JS /州/ shanxi1.js"> </スクリプト> <スクリプトSRC = "JS /州/ sichuan.js"> </ SCRIPT> <スクリプトSRC = "JS /州/ taiwan.js"> </ SCRIPT> <スクリプトSRC = "JS /州/天津.js "> </ SCRIPT> <スクリプトSRC =" JS /州/ xianggang.js "> </ SCRIPT> <スクリプトSRC =" JS /州/ xinjiang.js "> </ SCRIPT> <スクリプトSRC =" JS /province/xizang.js "> </ SCRIPT> <スクリプトSRC =" JS /州/ yunnan.js "> </ SCRIPT> <SCRIPT SRC =" JS /州/ zhejiang.js」> </ SCRIPT> <スクリプトSRC = "JS / jqueryの-1.12.1.js"> </ SCRIPT> </ HEAD> <BODY> の<divのid = "メイン"スタイル= "幅：800ピクセル、高さ600PX。 「> </ div> < - - EChartsを準備することはドムのサイズ（幅と高さ）の含まれています！> <スクリプトは、タイプ= "テキスト/ JavaScriptを"> initChina（）; //この関数は、によって行われますマップをロードする中国 initChina関数（）{ VAR myChart = echarts.init（document.querySelector（ '＃主'）） //は、例えばecharts.init echartsによって初期化方法 myChart.setOption（{ //指定された、簡単な方法のsetOptionメソッドによって生成されたマップをCIデータとグラフ タイトル：{ テキスト： '2月19日流行プロファイル'、 }、//タイトル の//背景色 のbackgroundColor： '＃1 f9f9f9'、 visualMap：[{//着色マップ タイプを'連続' //連続カラー 片：//色分けされた値に従って {GT：100}、 {GT：10、LTE：99}、 {GT：0、LTE :. 9} ] }]、visiualMap @ シリーズ： { タイプ： 'マップ'、//チャートタイプ マップ：「中国の、中国//マップの ラベル：{ //セットカバー ショー：trueに }、// Lable } //シリーズ }）// myChart.setOption myChart.on（ 'クリック'、機能（パラメータ）{ //alert(param.name） //マウスクリックイベントで、あなたが各マップのアイデンティティーをロードすることができるように、パラメータは州の名前ですparam.name市（）関数を実行します VAR str_p = param.nameを; コンテンツ// paramパラメータが含まれています： 値//param.name:X、軸 値//param.data:Y軸 値を//param.value:Yは、軸の クリックイベントです：//param.typeはクリック //param.seriesName:legend名 //param.seriesIndex：シリアル番号（いくつかの現在のパターンのシリーズは、いくつかのパターンである） //param.dataIndex：数値配列（現在の点Xは、軸は、いくつかの最初のものですポイント） シティ（str_p）; }） } </ SCRIPT>真 } <スクリプトタイプ=「テキスト/ javascriptの「> 非同期AJAX //街検索機能 機能市（省）{ //console.log(cities） VAR myChart = echarts.init（document.querySelector（ '＃メイン'）） myChart.setOption（{ {：タイトル テキスト：省+ 「セグメントデータ」、 言外の意味：「ネットワーク・データ・ソース」、 左：行く' }、//タイトル の//背景色 のbackgroundColor：「＃1 f7f7f7」、 シリーズ：{ タイプ：「マップ」、//チャートタイプ マップ：州、//省は、マップ のラベルを：{ カバーする//セット ショー：trueに } //シリーズ }）// myChart。setOptionを myChart.on（ 'クリック'、機能（パラメータ）{ initChina（）; // initChinaマウスクリックすることで、この機能を実行し、あなたは再び中国のマップをロードすることができます
}） } //関数の市 </ SCRIPT> </ BODY> < / HTML>
（コンテナのレンダリングechartsなど）DOMノードを準備するには、上記の例ではechartsを作成することができます。排他的echarts DOMノードの各インスタンス。直列型でechartsは（series.type）チャートタイプです。シリーズタイプ（series.type）は、少なくとも：ライン（折れ線グラフ）、バー（棒グラフ）、PIE（円グラフ）、散布（散布図）、グラフ（図）、木（木）、マップ（マップ）、中echartsは、関連するコンポーネントの公式サイトで詳細に説明されています