实现中国地图
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>echarts.js插件实现中国地图省份选择效果</title>
<style>
*{margin:0;padding:0;}
</style>
</head>
<body>
<div id="main" style="height:500px"></div>
<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<script src="http://echarts.baidu.com/build/dist/echarts.min.js"></script>
<script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
<script>
// 路径配置
require.config({
paths: {
echarts: 'dist'
}
});
// 使用
require(['echarts','echarts/chart/map'],
function (ch) {
// 基于准备好的dom,初始化echarts图表
var myChart = ch.init(document.getElementById('main'));
option = {
tooltip : {
trigger: 'item',
formatter: '{b}'
},
series : [{
name: '中国',
type: 'map',
mapType: 'china',
selectedMode : 'single',//multiple多选
itemStyle:{
normal:{
label:{
show:true,
textStyle: {
color: "#231816"
}
},
areaStyle:{color:'#B1D0EC'},
color:'#B1D0EC',
borderColor:'#dadfde'//区块的边框颜色
},
emphasis:{//鼠标hover样式
label:{
show:true,
textStyle:{
color:'#fa4f04'
}
}
}
},
data:[
{name:'四川',selected:true}
]
}]
};
var ecConfig = require('echarts/config');
myChart.on(ecConfig.EVENT.MAP_SELECTED, function (param){
var selected = param.selected;
var urlArr = ['http://www.baidu.com','http://http://www.cnblogs.com/sapho'];
for (var p in selected) {
if (selected[p]) {
switch(p){
case '河南':
location.href = urlArr[0];
break;
case '重庆':
location.href = urlArr[1];
break;
default:
break;
}
}
}
});
// 为echarts对象加载数据
myChart.setOption(option);
});
</script>
</body>
</html>
}
});
// 为echarts对象加载数据
myChart.setOption(option);
});
</script>
</body>
</html>
echarts实现环形图
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>AzzanTest</title>
<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<script src="http://echarts.baidu.com/dist/echarts.min.js"></script>
</head>
<body>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>AzzanTest</title>
<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<script src="http://echarts.baidu.com/dist/echarts.min.js"></script>
</head>
<body>
<div id="main2" style="width: 250px;height:200px;"></div>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('main2'));
// 指定图表的配置项和数据
//2.设置Option
var option={
tooltip:{
trigger:'item',
formatter:"{a}<br/>{b}:{c}({d}%)"
} ,
legend:{
orient:'vertical' ,
x:'left' ,
data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
} ,
series: [
{
name: '访问来源',
type: 'pie',
radius: ['50%', '70%'],
avoidLabelOverlap: false,
label: {
normal: {
show: false,
position: 'center'
},
emphasis: {
show: true,
textStyle: {
fontSize: '30',
fontWeight: 'bold'
}
}
} ,
labelLine: {
normal: {
show: false
}
},
data: [
{value: 335, name: '直接访问'},
{value: 310, name: '邮件营销'},
{value: 234, name: '联盟广告'},
{value: 135, name: '视频广告'},
{value: 1548, name: '搜索引擎'}
]
}
]
} ;
//3.配置百度Echarts的Option
myChart.setOption(option) ;
</script>
</div>
</div>
</body>
</html>