使用Echarts-X.js实现3D地球完美解决“myChart is not function”或者“define is not function”错误

最新推荐文章于 2024-06-19 15:10:02 发布

冯小东

最新推荐文章于 2024-06-19 15:10:02 发布

阅读量1w

点赞数

分类专栏： JavaScript 工具文章标签： echarts echarts-x 3D地球

本文链接：https://blog.csdn.net/baidu_25343343/article/details/80941496

版权

JavaScript 同时被 2 个专栏收录

29 篇文章 1 订阅

订阅专栏

工具

13 篇文章 0 订阅

订阅专栏

很久没更博了，最近在项目上需要展示数据可视化.所以用到了Echarts组件，进而研究了Echarts-X，具体介绍请看官网：http://echarts.baidu.com/echarts2/x/doc/index.html

根据官网的介绍，如果直接下载DEMO运行会一直报类似“define is not function”或者“myChart is not function”等错误，原因就是因为引入echarts和echarts-X时的问题，我们除了引入echarts和echarts-X外还分别需要依赖它们的map模块和map3d模块。

以下是正确引入js，完美解决类似错误的解决办法（假设前提是把echats和echarts-X放到dep文件夹下）：

        <script src="dep/jquery.min.js"></script>
	<!-- ECharts单文件引入 -->
	<script src="dep/echarts/echarts.js"></script>
	<script src="dep/echarts/chart/map.js"></script>
	<!-- 引入 ECharts-X 主文件 -->
	<script src="dep/echarts-x/echarts-x.js"></script>
	<script src="dep/echarts-x/chart/map3d.js"></script>

以下是正确配置require，完美解决类似错误的解决办法（假设前提是把echats和echarts-X放到dep文件夹下，index.html放到dep文件夹外）：

             // 路径配置
		require.config({
			paths: {
				'echarts': 'dep/echarts',
				'echarts-x': 'dep/echarts-x'
			}
		});

		// 然后就可以动态加载图表进行绘制啦  
		require([
			'echarts',
			'echarts-x',
			// ECharts-X 中 map3d 的地图绘制基于 ECharts 中的 map。  
			'echarts/chart/map',
			'echarts-x/chart/map3d'
		], function(ec) {
			// 基于准备好的dom，初始化echarts图表
			var myChart = ec.init(document.getElementById('main'));
                        var option={}...

完整的代码：

<!DOCTYPE html>

<head>
	<meta charset="utf-8">
	<title>ECharts</title>
</head>

<body>
	<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
	<div style="background:url(background.jpg)">
		<div id="main" style="height: 800px;width:100%"></div>
	</div>

	<script src="dep/jquery.min.js"></script>
	<!-- ECharts单文件引入 -->
	<script src="dep/echarts/echarts.js"></script>
	<script src="dep/echarts/chart/map.js"></script>
	<!-- 引入 ECharts-X 主文件 -->
	<script src="dep/echarts-x/echarts-x.js"></script>
	<script src="dep/echarts-x/chart/map3d.js"></script>
	<script type="text/javascript">
		// 路径配置
		require.config({
			paths: {
				'echarts': 'dep/echarts',
				'echarts-x': 'dep/echarts-x'
			}
		});

		// 然后就可以动态加载图表进行绘制啦  
		require([
			'echarts',
			'echarts-x',
			// ECharts-X 中 map3d 的地图绘制基于 ECharts 中的 map。  
			'echarts/chart/map',
			'echarts-x/chart/map3d'
		], function(ec) {
			// 基于准备好的dom，初始化echarts图表
			var myChart = ec.init(document.getElementById('main'));

			myChart.showLoading();

			$.ajax({
				url:'population.json',
				success: function(data) {

					var max = -Infinity;
					var min = Infinity;
					data = data.map(function(dataItem) {
						max = Math.max(dataItem[2], max);
						min = Math.min(dataItem[2], min);
						return {
							geoCoord: dataItem.slice(0, 2),
							value: dataItem[2],
							distance: Math.random()
						}
					});

					data.forEach(function(dataItem) {
						// Map symbol size to 2 - 20
						dataItem.symbolSize = (dataItem.value - min) / (max - min) * 18 + 2;
					});
					myChart.setOption({
						title: {
							text: '',
							subtext: '',
							sublink: '',
							x: 'center',
							y: 'top',
							textStyle: {
								color: 'white'
							}
						},
						dataRange: {
							min: 0,
							max: max,
							text: ['High', 'Low'],
							realtime: false,
							calculable: true,
							color: ['#33CCFF', '#00FF33', 'lightskyblue']
						},
						flat: false,  //是否使用平面地图
						series: [{
							name: 'World Population',
							type: 'map3d',
							mapType: 'world',
							baseLayer: { //底层地图
								backgroundColor: '',
								backgroundImage: 'earth.jpg',
								quality: 'high',
							},

							surfaceLayers: [{  //云层
								type: 'texture',
								distance: 3,
								image: 'clouds.png'
							}],

							show: true,
							
							clickable: false,
							
							hoverable: false,

							autoRotate: true, //自动旋转

							focus: 'China', //初始化时停留在中国上空

							autoRotate: 1, //在鼠标未操作地球一段时间后会开启自动旋转，autoRotate: true时有效。默认为3s。

							quality: 'high', //底图贴图质量，'high'(4096 x 4096)，'medium'(2048 x 2048)，'low'(1024 x 1024)

							selectedMode: false, //区域选择模式，可以是多选'mutiple'，单选'single'

							// hoverable: false,

							itemStyle: {
								normal: {
									borderColor: '#777',
									areaStyle: {
										color: "#000011"
									}
								}
							},
							markPoint: {
								large: true,
								effect: {
									show: true,
									shadowBlur: 0.4
								},
								data: data
							}
						}]
					});

					myChart.hideLoading();

				}
			});

		});
	</script>
</body>

效果截图：

可以看到没有在报“myChart is not defined”等错误。

注意几点：

Echarts-X需要较高的浏览器支持才能显示，具体看官网截图

需要源码的可以到我上传的地址下载：https://download.csdn.net/download/baidu_25343343/10525054

冯小东

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
4
评论
使用Echarts-X.js实现3D地球完美解决“myChart is not function”或者“define is not function”错误

很久没更博了，最近在项目上需要展示数据可视化.所以用到了Echarts组件，进而研究了Echarts-X，具体介绍请看官网：http://echarts.baidu.com/echarts2/x/doc/index.html 根据官网的介绍，如果直接下载DEMO运行会一直报类似“define is not function”或者“myChart is not function”等错误，原因就是因为...
复制链接

扫一扫

专栏目录