ECharts官网标准地图实现

最新推荐文章于 2025-03-14 10:05:50 发布

Bo年再无木小白

最新推荐文章于 2025-03-14 10:05:50 发布

阅读量5.2k

点赞数

分类专栏： ECharts 文章标签： ECharts

本文链接：https://blog.youkuaiyun.com/u012079603/article/details/43229337

版权

本文将展示如何利用ECharts官方提供的标准地图实现一个交互式的地图展示效果。内容包括配置地图数据、设置交互功能和调整视觉样式等步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>echart学习</title>
</head>
<body>
	<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="height:400px"></div>
    <script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
    <script type="text/javascript" src="dataJson.js"></script>
    <script type="text/javascript">
        // 路径配置
        require.config({
            paths: {
                echarts: 'http://echarts.baidu.com/build/dist'
            }
        });

        //使用
        require(
        	[
        		'echarts',
        		'echarts/chart/bar', // 使用柱状图就加载bar模块，按需加载
        		'echarts/chart/line',
        		'echarts/chart/map',
        		'echarts/chart/scatter',
        		'echarts/chart/k',
        		'echarts/chart/pie',
        		'echarts/chart/radar',
        		'echarts/chart/chord',
        		'echarts/chart/force',
 ],
        	function(ec){
        		 // 基于准备好的dom，初始化echarts图表
                var myChart = ec.init(document.getElementById('main')); 
                // 过渡---------------------
               /* myChart.showLoading({
                    text: '正在努力的读取数据中...',    //loading话术
                });
                var dataJ = new Array;
                var dataH = new Array;
                var dataL = new Array; 
                for (var i = 0; i < data.dj.length; i++) {
                	dataJ.push(data.dj[i].month);
                	dataH.push(data.dj[i].high);
                	dataL.push(data.dj[i].low);
                };