ECharts map学习心得之一（ 导入ECharts）
2014-10-29 09:29
393 查看
基本导入步骤如下：
<代码中蓝色粗体部分标出了导入的基本步骤>
上面是进行导入的基本步骤，下面是我自己写的一个实例，方便帮助理解：
从ECharts网站下载的源码太多，我们使用只需要导入特定的即可：
echarts\build文件夹下已经生成了不同组合的多个单文件见下，根据你的需求场景只需要使用其中一个即可：
echarts.js : 经过压缩，包含除地图外的全部图表
echarts-original.js : 未压缩，可用于调试，包含除地图外的全部图表
echarts-map.js : 经过压缩，全图表，包含world，china以及34个省市级地图数据
echarts-original-map.js : 未压缩，可用于调试，全图表，包含world，china以及34个省市级地图数据
例如使用地图的文件结构如下，只需要导入esl.js加载器文件和echarts-map.js包含地图的图形库文件即可
运行效果图如下：
<代码中蓝色粗体部分标出了导入的基本步骤>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>ECharts</title>
<span style="color:#000099;"><strong> <!--Step:1 Import a module loader, such as esl.js or require.js-->
<!--Step:1 引入一个模块加载器，如esl.js或者require.js--></strong></span>
<script src="js/esl.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"></head>
<body>
<strong><span style="color:#000099;"> <!--Step:2 Prepare a dom for ECharts which (must) has size (width & hight)-->
<!--Step:2 为ECharts准备一个具备大小（宽高）的Dom--></span></strong>
<div id="main" style="height:500px;border:1px solid #ccc;padding:10px;"></div>
<div id="mainMap" style="height:500px;border:1px solid #ccc;padding:10px;"></div>
<script type="text/javascript">
<strong><span style="color:#000099;"><!--Step:3 conifg ECharts's path, link to echarts.js from current page.-->
<!--<span style="font-family: Arial, Helvetica, sans-serif;">Step:3 为模块加载器配置echarts的路径，从当前页面链接到echarts.js，定义所需图表路径 --></span></span></strong>require.config({
paths:{
echarts:'./js/echarts-map',
'echarts/chart/bar' : './js/echarts-map',
'echarts/chart/line': './js/echarts-map',
'echarts/chart/map' : './js/echarts-map'
}
});
<span style="color:#000099;"><strong> // Step:4 require echarts and use it in the callback.
// Step:4 动态加载echarts然后在回调函数中开始使用，注意保持按需加载结构定义图表路径</strong></span>
require(
[
'echarts',
'echarts/chart/bar',
'echarts/chart/line',
'echarts/chart/map'
],
function (ec) {
//--- 折柱 ---
var myChart = ec.init(document.getElementById('main'));
myChart.setOption({
tooltip : {
trigger: 'axis'
},
legend: {
data:['蒸发量','降水量']
},
toolbox: {
show : true,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
magicType : {show: true, type: ['line', 'bar']},
restore : {show: true},
saveAsImage : {show: true}
}
},
calculable : true,
xAxis : [
{
type : 'category',
data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
}
],
yAxis : [
{
type : 'value',
splitArea : {show : true}
}
],
series : [
{
name:'蒸发量',
type:'bar',
data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
},
{
name:'降水量',
type:'bar',
data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
}
]
});
// --- 地图 ---
var myChart2 = ec.init(document.getElementById('mainMap'));
myChart2.setOption({
tooltip : {
trigger: 'item',
formatter: '{b}'
},
series : [
{
name: '中国',
type: 'map',
mapType: 'china',
selectedMode : 'multiple',
itemStyle:{
normal:{label:{show:true}},
emphasis:{label:{show:true}}
},
data:[
{name:'广东',selected:true}
]
}
]
});
}
);
</script>
</body>
</html>上面是进行导入的基本步骤，下面是我自己写的一个实例，方便帮助理解：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="ECharts">
<meta name="author" content="weifei@hollycrm.com">
<title>ECharts · Example</title>
</head>
<body>
<!-- Fixed navbar -->
<div class="container featurette">
<div class="row">
<div id="graphic" class="col-md-12">
<div id="main" style="height:400px;width:600px"></div>
</div><!--/span-->
</div><!--/row-->
</div><!--/.fluid-container-->
<!-- Placed at the end of the document so the pages load faster -->
<script src="asset/js/esl/esl.js"></script>
<span style="font-size:18px;color:#000099;"><strong><!-- If put the <script type="text/javascript" src="build/echarts-map.js"></script> here then 'require.config' doesn`t needed any more--></strong></span><script type="text/javascript" src="build/echarts-map.js"></script>
<script type="text/javascript"><strong><span style="font-size:18px;color:#000099;background-color: rgb(255, 255, 255);">//如果上面进行了标签（echarts-map）的导入动作，那么下面的require.config就不需要再指定了</span></strong>
require.config({
paths:{
<span style="white-space:pre"> </span>echarts:'build/echarts-map',
<span style="white-space:pre"> </span> 'echarts/chart/bar' : 'build/echarts-map',
<span style="white-space:pre"> </span>'echarts/chart/line': 'build/echarts-map',
<span style="white-space:pre"> </span>'echarts/chart/map' : 'build/echarts-map'
}
});
var mapType = [
'大连市','朝阳市','丹东市','铁岭市','沈阳市','抚顺市','葫芦岛市','阜新市',
'锦州市','鞍山市','本溪市','营口市','辽阳市','盘锦市'
];
var option = {
title: {
text : '全省整体运营',
subtext : '辽宁省'
},
tooltip : {
trigger: 'item',
formatter: '点击查看本市运营信息<br/>{b}'
},
dataRange: {
min: 0,
max: 1000,
color:['red','yellow'],
//text:['高','低'],
splitNumber: 0
//calculable : true
},
series : [
{
name: '随机数据',
type: 'map',
mapType: '辽宁',
selectedMode : 'single',
itemStyle:{
normal:{label:{show:true,position:'outer'}},
emphasis:{label:{show:true,position:'outer'}}
},
data:[
{name: '大连市',value: Math.round(Math.random()*1000)},
{name: '朝阳市',value: Math.round(Math.random()*1000)},
{name: '丹东市',value: Math.round(Math.random()*1000)},
{name: '铁岭市',value: Math.round(Math.random()*1000)},
{name: '沈阳市',value: Math.round(Math.random()*1000)},
{name: '抚顺市',value: Math.round(Math.random()*1000)},
{name: '葫芦岛市',value: Math.round(Math.random()*1000)},
{name: '阜新市',value: Math.round(Math.random()*1000)},
{name: '锦州市',value: Math.round(Math.random()*1000)},
{name: '鞍山市',value: Math.round(Math.random()*1000)},
{name: '本溪市',value: Math.round(Math.random()*1000)},
{name: '营口市',value: Math.round(Math.random()*1000)},
{name: '辽阳市',value: Math.round(Math.random()*1000)},
{name: '盘锦市',value: Math.round(Math.random()*1000)},
]
}
]
};
require(
[
'echarts',
'echarts/chart/map',
],
function (ec) {
var myChart = ec.init(document.getElementById('main'));
var ecConfig = require('echarts/config');
myChart.on(ecConfig.EVENT.MAP_SELECTED, function (param){
var selected = param.selected;
var len = mapType.length;
for(var i = 0;i < len;i ++){
if(selected[mapType[i]]){
alert(mapType[i]);
}
}
myChart.setOption(option, true);
});
myChart.setOption(option);
}
)
</script>
</body>
</html>从ECharts网站下载的源码太多，我们使用只需要导入特定的即可：
echarts\build文件夹下已经生成了不同组合的多个单文件见下，根据你的需求场景只需要使用其中一个即可：
echarts.js : 经过压缩，包含除地图外的全部图表
echarts-original.js : 未压缩，可用于调试，包含除地图外的全部图表
echarts-map.js : 经过压缩，全图表，包含world，china以及34个省市级地图数据
echarts-original-map.js : 未压缩，可用于调试，全图表，包含world，china以及34个省市级地图数据
例如使用地图的文件结构如下，只需要导入esl.js加载器文件和echarts-map.js包含地图的图形库文件即可
运行效果图如下：
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- SET IDENTITY_INSERT 学习心得[转，今天导入数据用到了一下]
- echarts 学习心得
- [导入]Assembly学习心得
- Echarts的使用和学习心得体会
- threejs学习心得（场景的搭建+运动模型导入）
- web菜鸟学习心得--css导入方式
- java Excel导入学习心得
- sql必知会学习心得：mysql附带资源的导入
- Echarts学习1_ECharts使用心得
- [导入]WebService Behavior 学习心得
- Echarts的使用和学习心得体会（二）
- Struts1.2.4学习心得!(六)
- 学习Dnn心得
- WebService Behavior 学习心得
- Struts1.2.4学习心得!(四)
- 计算机科学与技术学习心得之计算机理论的一个核心问题--从数学谈起（转载）
- 关于OR－Mapping的学习心得体会
- Struts1.2.4学习心得!(五)
- [导入]3.学习篇(一)
- Struts1.2.4学习心得!(－)