echarts マップの異なる領域に異なる色を設定する

var myChart = ec.init(document.getElementById('main'));

let オプション = {

ツールチップ: {

トリガー: 'アイテム'、

}、

dataRange: {//左下隅のカラー ブロック。start: 範囲の開始値; end: 範囲の終了値; ラベル: 凡例名; color: カスタムカラー値

x: '左'、

y: '底'、

表示: false、

分割リスト: [

// ここでは、以下のデータの値に応じて異なる色が表示されます

{開始: 10、ラベル: 'ここでカスタム'、色: '#FFB956'}、

{開始: 8、終了: 10、ラベル: 'ここにカスタムの高さ'、色: '#E66C1B'}、

{開始: 5、終了: 8、ラベル: 'ここをカスタマイズ'、色: '#F19610'}、

{開始: 3、終了: 5、ラベル: 'カスタム最低値'、色: '#8A00E1'}、

{開始:0、終了: 3、ラベル: 'ここでカスタム'、色: '#403C6F'}

}、

シリーズ: [{

名前:「中国」、

タイプ: 'マップ'、

マップタイプ: '中国'、

selectedMode: false, //single は単一の選択を意味し、multiple は複数の選択を意味し、デフォルトのフラグは選択されていません

アイテムスタイル: {

普通: {

ラベル: {

show: false,//デフォルトで州名を表示するかどうか

}、

エリアスタイル: {

color: '#f3f3f3',//デフォルトのマッププレートの色

}、

境界幅:1、

ボーダーカラー:'#e1e1e1',

}、

強調: {

ラベル: {

show: true,//選択した州の州名を表示するかどうか

}、

エリアスタイル: {

color: '#90c31d',//選択状態のマッププレートの色

}、

}、

}、

//これは異なる色で表示する必要があるデータです

データ: [

{名前: '広東'、選択: true、値:10},

{名前: '广西'、選択: true、値:10},

{名前: '四川'、選択: true、値:10},

}]

};

おすすめ

転載: blog.csdn.net/ld395353765/article/details/129706701