<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<!--Step:1 Import a module loader, such as esl.js or require.js-->
<!--Step:1 引入一个模块加载器,如esl.js或者require.js-->
<script src="js/esl.js"></script>
</head>
<body>
<!--Step:2 为ECharts准备一个具备大小(宽高)的Dom
在body标记中,form标记之外,添加一个div,用来做图表渲染的容器
-->
<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">
//为模块加载器配置echarts的路径,这里主要是配置map图表的路径,其他的图表跟map的配置还不太一样,下边也会做另一种类型的图表事例。
// 这里引用的主要是echarts文件夹下的echarts-map文件,而其他类型的图表引用的都是echarts文件夹下的echarts文件。
require.config({
paths : {
echarts : './js/echarts',
'echarts/chart/map' : './js/echarts-map'
}
});
//动态加载echarts,在回掉函数中使用,要注意保持按需加载结构定义图表路径
require(
[
'echarts',
'echarts/chart/map'
],
function(ec) {
var myChart = ec.init(document.getElementById('main'));
//option主要是图标的一些设置,这不是这篇文章的重点,关于具体的设置可以参考官方的文档说明文档
option = {
title : {
text : 'iphone销量',
subtext : '纯属虚构',
x : 'center'
},
tooltip : {
trigger : 'item'
},
legend : {
orient : 'vertical',
x : 'left',
data : [ 'iphone3', 'iphone4', 'iphone5' ]
},
dataRange : {
min : 0,
max : 2500,
text : [ '高', '低' ], // 文本,默认为数值文本
calculable : true,
textStyle : {
color : 'orange'
}
},
toolbox : {
show : true,
orient : 'vertical',
x : 'right',
y : 'center',
feature : {
mark : true,
dataView : {
readOnly : false
},
restore : true,
saveAsImage : true
}
},
series : [ {
name : 'iphone3',
type : 'map',
mapType : 'china',
selectedMode : 'single',
itemStyle : {
normal : {
label : {
show : true
},
color : '#ffd700'
},// for legend
emphasis : {
label : {
show : true
}
}
},
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)
}, {
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)
}, {
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 : 'iphone4',
type : 'map',
mapType : 'china',
itemStyle : {
normal : {
label : {
show : true
},
color : '#ff8c00'
},// for legend
emphasis : {
label : {
show : true
}
}
},
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)
}, {
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 : 'iphone5',
type : 'map',
mapType : 'china',
itemStyle : {
normal : {
label : {
show : true
},
color : '#da70d6'
},// for legend
emphasis : {
label : {
show : true
}
}
},
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)
} ]
} ]
};
//以下的这段代码主要是用来处理用户的选择,应用场景是可以做地图的交互,比如点击地图上的某一个省,获取相应的省的指标变化等。
//需要特别注意的是,如果需要点击某一省作地图的操作交互的话,还需要为series属性的每一项添加一个selectedMode属性,这里的属性值为 'single'即单选,也可多选
//事件命名统一挂载到require('echarts/config').EVENT(非模块化为echarts.config.EVENT)命名空间下,建议使用此命名空间作为事件名引用。
var ecConfig = require('echarts/config');
myChart.on(ecConfig.EVENT.MAP_SELECTED, function(param) {
var selected = param.selected;
var mapSeries = option.series[0];
var name;
for(var p = 0, len = mapSeries.data.length; p < len; p++) {
name = mapSeries.data[p].name;
mapSeries.data[p].selected = selected[name];
if (selected[name]) {
alert(name); //这里只是简单的做一个事例说明,弹出用户所选的省,如需做其他的扩展,可以在这里边添加相应的操作
}
}
});
myChart.setOption(option);
});
</script>
</body>
</html>
遇到的小问题:1.
require.config({
paths : {
echarts : './js/echarts',
'echarts/chart/map' : './js/echarts-map'
}
});
<script src="js/esl.js"></script> 一开始直接拷贝例子,这两个位置不一样 耽误了几分钟。。。
2. 打印选中省份时 series 里selectedMode : 'single' 忘了设 。默认值时null,无法打印,目测null时无法触发选中事件 。