使用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”等错误,原因就是因为引入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
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值