正文

学会echarts地图散点图搭配时间轴，轻松实现数据可视化展示

/0 浏览量
1022

在当今数据驱动的世界中，数据可视化成为了展示和分析数据的重要手段。ECharts 是一个使用 JavaScript 实现的开源可视化库，它可以帮助我们轻松创建交互式的图表。本文将带你一步步学会如何使用 ECharts 创建地图散点图并搭配时间轴，实现数据可视化展示。

一、准备工作

在开始之前，请确保你的开发环境中已经安装了 ECharts。你可以通过以下命令来安装：

npm install echarts --save

或者，如果你不使用 npm，可以下载 ECharts 的静态资源文件，并将其添加到你的项目中。

二、创建基本的地图散点图

  1. 引入 ECharts 库：在你的 HTML 文件中引入 ECharts 的 CSS 和 JS 文件。
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.2/echarts.min.js"></script>
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.2/echarts.min.css">
  1. 初始化图表：在 HTML 中创建一个用于显示图表的容器。
<div id="main" style="width: 600px;height:400px;"></div>
  1. 配置图表：编写 JavaScript 代码来配置图表。
var myChart = echarts.init(document.getElementById('main'));

var option = {
    title: {
        text: '地图散点图示例'
    },
    tooltip: {
        trigger: 'item'
    },
    legend: {
        orient: 'vertical',
        left: 'left',
        data: ['散点']
    },
    geo: {
        map: 'china',
        label: {
            emphasis: {
                show: false
            }
        },
        roam: true,
        itemStyle: {
            normal: {
                areaColor: '#323c48',
                borderColor: '#111'
            },
            emphasis: {
                areaColor: '#2a333d'
            }
        }
    },
    series: [
        {
            name: '散点',
            type: 'scatter',
            coordinateSystem: 'geo',
            data: [
                {name: '北京', value: [116.46, 39.92]},
                {name: '上海', value: [121.47, 31.23]},
                {name: '广州', value: [113.23, 23.16]},
                {name: '深圳', value: [114.07, 22.62]}
            ],
            symbolSize: function (val) {
                return val[2] / 10;
            },
            emphasis: {
                label: {
                    show: true,
                    formatter: '{b}: {c}',
                    position: 'top'
                }
            },
            itemStyle: {
                normal: {
                    color: '#f4e925',
                    shadowBlur: 10,
                    shadowColor: 'rgba(100, 100, 100, 0.5)'
                }
            }
        }
    ]
};

myChart.setOption(option);

三、添加时间轴

为了展示随时间变化的数据，我们可以添加一个时间轴组件。

  1. 修改 series 配置：将 type 属性从 'scatter' 改为 'lines'，并添加 markLine 属性。
series: [
    {
        name: '散点',
        type: 'lines',
        coordinateSystem: 'geo',
        zlevel: 1,
        effect: {
            show: true,
            period: 6,
            trailLength: 0.7,
            color: '#fff',
            symbolSize: 3
        },
        markLine: {
            silent: false,
            symbol: ['none', 'arrow'],
            symbolSize: 10,
            effect: {
                show: true,
                period: 6,
                trailLength: 0,
                color: '#fff'
            },
            data: [
                [{name: '北京'}, {name: '上海'}],
                [{name: '上海'}, {name: '广州'}],
                [{name: '广州'}, {name: '深圳'}],
                [{name: '深圳'}, {name: '北京'}]
            ]
        },
        data: [
            [{name: '北京', value: [116.46, 39.92]}, {name: '上海', value: [121.47, 31.23]}],
            [{name: '上海', value: [121.47, 31.23]}, {name: '广州', value: [113.23, 23.16]}],
            [{name: '广州', value: [113.23, 23.16]}, {name: '深圳', value: [114.07, 22.62]}],
            [{name: '深圳', value: [114.07, 22.62]}, {name: '北京', value: [116.46, 39.92]}]
        ],
        lineStyle: {
            curveness: 0.2,
            width: 1,
            opacity: 0.6,
            color: '#f4e925'
        }
    }
]
  1. 添加时间轴：在 xAxis 中添加 type: 'time' 和 boundaryGap: false。
xAxis: {
    type: 'time',
    boundaryGap: false,
    axisLabel: {
        formatter: function (value) {
            return echarts.format.formatTime('MM-dd', value);
        }
    },
    data: [
        '2021-01-01 00:00:00',
        '2021-01-02 00:00:00',
        '2021-01-03 00:00:00',
        '2021-01-04 00:00:00'
    ]
}

四、总结

通过以上步骤，你已经学会了如何使用 ECharts 创建地图散点图并搭配时间轴进行数据可视化展示。你可以根据自己的需求调整图表的样式和配置，以便更好地展示你的数据。希望这篇文章能帮助你入门 ECharts 数据可视化，让你在数据的世界中游刃有余。

-- 展开阅读全文 --