マップを使用して ECharts にデータを表示する方法-jsチュートリアル-php.cn

マップを使用して ECharts にデータを表示する方法

WBOY

リリース： 2023-12-18 16:09:34

オリジナル

1588 人が閲覧しました

マップを使用して ECharts にデータを表示する方法

ECharts は、折れ線グラフ、棒グラフ、円グラフなど、さまざまな種類のグラフをサポートする強力なデータ視覚化ツールです。チャートなどその中でも、マップチャートは ECharts の重要なコンポーネントであり、さまざまな地域のデータ分布を表示するために使用できます。この記事では、ECharts でのマップ関数の使用方法と詳細なコード例を紹介します。

始める前に、次のファイルを準備する必要があります:

echarts.min.js: ECharts のコアライブラリファイル。
china.js: ECharts で事前定義された中国地図データファイル。中国地図の描画に使用されます。
データファイル: 独自に用意したJSON形式のデータファイルには地域ごとのデータが含まれています。

まず、必要なファイルを HTML ファイルに記述します:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>ECharts地图展示数据示例</title>
    <script src="echarts.min.js"></script>
    <script src="china.js"></script>
</head>
<body>
    <div id="map" style="width: 800px; height: 600px;"></div>
</body>
</html>

ログイン後にコピー

次に、JavaScript ファイルにコードを記述します:

// 创建地图实例
var myChart = echarts.init(document.getElementById('map'));

// 设置地图参数
var option = {
    title: {
        text: '全国各省份数据分布',
        left: 'center'
    },
    tooltip: {
        trigger: 'item'
    },
    visualMap: {
        min: 0,
        max: 1000,
        left: 'left',
        top: 'bottom',
        text: ['高', '低'],           // 文本，默认为数值文本
        calculable: true,
        inRange: {
            color: ['#e0ffff', '#006edd']
        }
    },
    series: [
        {
            name: '数据',
            type: 'map',
            mapType: 'china',
            roam: false,         // 禁止缩放平移
            label: {
                normal: {
                    show: true
                },
                emphasis: {
                    show: true
                }
            },
            data: [
                {name: '北京', value: 500},
                {name: '上海', value: 300},
                {name: '广东', value: 800},
                // 这里填充自己的数据
            ]
        }
    ]
};

// 使用刚指定的配置项和数据显示图表
myChart.setOption(option);

ログイン後にコピー

上記のコードでは、最初に echarts.init メソッドを渡してマップインスタンスを作成し、それを指定された DOM 要素にバインドします。次に、option パラメーターを設定して、マップのスタイルとデータを構成します。 series では、マップタイプを map に設定し、マップデータを指定します。

最後に、myChart.setOption(option) を使用して構成アイテムをマップインスタンスに適用し、マップを表示します。

コードではデータの一部のみを提供していることに注意してください。実際の状況に応じてデータを入力し、関連する構成を調整する必要があります。同時に、china.js ファイル内の地図データを変更することで、他の地域の地図を表示できます。

これまでに、マップを使用して EChart にデータを表示する操作が完了しました。慎重な設定とデータの入力により、より豊かで多様な地図表示効果を実現できます。この記事があなたの学習や実践に役立つことを願っています。

以上がマップを使用して ECharts にデータを表示する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。