インターネットで天気予報を読むと、中国の地図に各省の気温が表示されているはずで、気温に応じて異なる色で表示されたり、省ごとの新型肺炎の感染者数がわかったりします。異なる色で表示される画像の数を増やします。これらは echarts のマップを使用することで実現できます. 今日はヒートマップを実現しましょう. ヒートマップは、異なるデータに応じて異なる色を表示するマップです.
まず、画像をホストする要素を作成します。
<div id="heatmap"></div>
echarts インスタンスの初期化
const echartsInstance = echarts.init(document.getElementById('heatmap'));
次に、地図データを登録します. 地図データはjsonファイルです. jsonデータには, 各州の座標, 名称, 首都などの情報が含まれています. 使用する前にechartsに登録する必要があります.
echarts.registerMap('china'， 'china.json');
次に、データ構成を構成します.
関数を使用して、より多くのデータが生成されます.
function createData(){
return china.features.map(item => {
return {
name:item.properties.shortName,
value: Math.floor(Math.random() * 361)
}
})
}
const options = {
visualMap:{
type:'piecewise',
pieces:[{
min:0,
max:100,
color:'#10ff10'
},{
min:101,
max:190,
color:'#eeffaa'
},{
min:191,
max:360,
color:'#eeffff'
}]
},
series:[{
type:'map',
map:'china',
nameProperty:'shortName',
name:'shortName',
data:createData()
}]
};
geo フィールドでは、map 属性の値が登録したマップの名前であることがわかります。
nameProperty は、JSON データのフィールドに対応する表示フィールドです。
データのサイズに応じて地理上に異なる色を表示するには、データを対応するプリミティブ、つまり表示可能な画像情報にマップする visualMap を使用する必要があります。
ヒート マップが表示されるため、連続データを使用します。つまり、データは離散ではなく連続です。
データごとに表示する色を細かく設定できます。
シリーズでは、さまざまなデータを表示できるように、タイプをマップとして宣言する必要があります。
マップ グラフには map 属性があり、この属性の値は登録したマップの名前です。
nameProperty はマップに表示される値のフィールド名です。デフォルトは name で、値はマップ json データのフィールドに対応します。
次に、オプションを設定します
echartsInstance.setOption(options);
効果は図に示されています
このような効果が得られるマップ シリーズに加えて geo でも実現できますが、geo 自体はデータを表示できず、マップを表示するだけなので、他のシリーズではデータを表示する必要があり、マップ構成よりも面倒ですが、geoポイントデータとラインセットをサポートします。