很久没更博了,最近在项目上需要展示数据可视化.所以用到了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