2017_11_23 学习echarts之饼状、柱状、gl(三维柱状)、map地图
1.在html中引入需要的js文件，例如，简单的处理只需要引入即可，gl图需要在引入echarts.min.js的基础上，再引入
js文件，map地图需要
js文件。
2.为图形准备容器
<div id="main" style="width: 1000px;height:800px;"></div>
3.基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
4.定义option
5.使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
饼状图代码如下：
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<!-- 引入 echarts.js -->
<script src="echarts.min.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b}: {c} ({d}%)"
},
legend: {
orient: 'vertical',
x: 'left',
data:['直达','营销广告','搜索引擎','邮件营销','联盟广告','视频广告','百度','谷歌','必应','其他']
},
series: [
{
name:'访问来源',
type:'pie',
selectedMode: 'single',
radius: [0, '30%'],
label: {
normal: {
position: 'inner'
}
},
labelLine: {
normal: {
show: false
}
},
data:[
{value:335, name:'直达', selected:true},
{value:679, name:'营销广告'},
{value:1548, name:'搜索引擎'}
]
},
{
name:'访问来源',
type:'pie',
radius: ['40%', '55%'],
label: {
normal: {
formatter: '{a|{a}}{abg|}\n{hr|}\n {b|{b}：}{c} {per|{d}%} ',
backgroundColor: '#eee',
borderColor: '#aaa',
borderWidth: 1,
borderRadius: 4,
// shadowBlur:3,
// shadowOffsetX: 2,
// shadowOffsetY: 2,
// shadowColor: '#999',
// padding: [0, 7],
rich: {
a: {
color: '#999',
lineHeight: 22,
align: 'center'
},
// abg: {
// backgroundColor: '#333',
// width: '100%',
// align: 'right',
// height: 22,
// borderRadius: [4, 4, 0, 0]
// },
hr: {
borderColor: '#aaa',
width: '100%',
borderWidth: 0.5,
height: 0
},
b: {
fontSize: 16,
lineHeight: 33
},
per: {
color: '#eee',
backgroundColor: '#334455',
padding: [2, 4],
borderRadius: 2
}
}
}
},
data:[
{value:335, name:'直达'},
{value:310, name:'邮件营销'},
{value:234, name:'联盟广告'},
{value:135, name:'视频广告'},
{value:1048, name:'百度'},
{value:251, name:'谷歌'},
{value:147, name:'必应'},
{value:102, name:'其他'}
]
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>
柱状图代码如下：
<html>
<head>
<title>stacked_column_chart.html</title>
<meta name="keywords" content="keyword1,keyword2,keyword3">
<meta name="description" content="this is my page">
<meta name="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<!-- 引入 echarts.js -->
<script src="echarts.min.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
tooltip : {
trigger : 'axis',
axisPointer : { // 坐标轴指示器，坐标轴触发有效
type : 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},
legend : {
data : [ '直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎', '百度', '谷歌',
'必应', '其他' ]
},
grid : {
left : '3%',
right : '4%',
bottom : '3%',
containLabel : true
},
xAxis : [ {
type : 'category',
data : [ '周一', '周二', '周三', '周四', '周五', '周六', '周日' ]
} ],
yAxis : [ {
type : 'value'
} ],
series : [ {
name : '直接访问',
type : 'bar',
data : [ 320, 332, 301, 334, 390, 330, 320 ]
}, {
name : '邮件营销',
type : 'bar',
stack : '广告',
data : [ 120, 132, 101, 134, 90, 230, 210 ]
}, {
name : '联盟广告',
type : 'bar',
stack : '广告',
data : [ 220, 182, 191, 234, 290, 330, 310 ]
}, {
name : '视频广告',
type : 'bar',
stack : '广告',
data : [ 150, 232, 201, 154, 190, 330, 410 ]
}, {
name : '搜索引擎',
type : 'bar',
data : [ 862, 1018, 964, 1026, 1679, 1600, 1570 ],
markLine : {
lineStyle : {
normal : {
type : 'dashed'
}
},
data : [ [ {
type : 'min'
}, {
type : 'max'
} ] ]
}
}, {
name : '百度',
type : 'bar',
barWidth : 5,
stack : '搜索引擎',
data : [ 620, 732, 701, 734, 1090, 1130, 1120 ]
}, {
name : '谷歌',
type : 'bar',
stack : '搜索引擎',
data : [ 120, 132, 101, 134, 290, 230, 220 ]
}, {
name : '必应',
type : 'bar',
stack : '搜索引擎',
data : [ 60, 72, 71, 74, 190, 130, 110 ]
}, {
name : '其他',
type : 'bar',
stack : '搜索引擎',
data : [ 62, 82, 91, 84, 109, 110, 120 ]
} ]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>
gl(三维柱状图)代码如下：
<html>
<head>
<title>three_dimensional.html</title>
<meta name="keywords" content="keyword1,keyword2,keyword3">
<meta name="description" content="this is my page">
<meta name="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<script src="echarts.min.js"></script>
<script src="echarts-gl.min.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 1000px;height:800px;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
var hours = [ '12a', '1a', '2a', '3a', '4a', '5a', '6a', '7a', '8a',
'9a', '10a', '11a', '12p', '1p', '2p', '3p', '4p', '5p', '6p',
'7p', '8p', '9p', '10p', '11p' ];
var days = [ 'Saturday', 'Friday', 'Thursday', 'Wednesday', 'Tuesday',
'Monday', 'Sunday' ];
var data = [ [ 0, 0, 5 ], [ 0, 1, 1 ], [ 0, 2, 0 ], [ 0, 3, 0 ],
[ 0, 4, 0 ], [ 0, 5, 0 ], [ 0, 6, 0 ], [ 0, 7, 0 ],
[ 0, 8, 0 ], [ 0, 9, 0 ], [ 0, 10, 0 ], [ 0, 11, 2 ],
[ 0, 12, 4 ], [ 0, 13, 1 ], [ 0, 14, 1 ], [ 0, 15, 3 ],
[ 0, 16, 4 ], [ 0, 17, 6 ], [ 0, 18, 4 ], [ 0, 19, 4 ],
[ 0, 20, 3 ], [ 0, 21, 3 ], [ 0, 22, 2 ], [ 0, 23, 5 ],
[ 1, 0, 7 ], [ 1, 1, 0 ], [ 1, 2, 0 ], [ 1, 3, 0 ],
[ 1, 4, 0 ], [ 1, 5, 0 ], [ 1, 6, 0 ], [ 1, 7, 0 ],
[ 1, 8, 0 ], [ 1, 9, 0 ], [ 1, 10, 5 ], [ 1, 11, 2 ],
[ 1, 12, 2 ], [ 1, 13, 6 ], [ 1, 14, 9 ], [ 1, 15, 11 ],
[ 1, 16, 6 ], [ 1, 17, 7 ], [ 1, 18, 8 ], [ 1, 19, 12 ],
[ 1, 20, 5 ], [ 1, 21, 5 ], [ 1, 22, 7 ], [ 1, 23, 2 ],
[ 2, 0, 1 ], [ 2, 1, 1 ], [ 2, 2, 0 ], [ 2, 3, 0 ],
[ 2, 4, 0 ], [ 2, 5, 0 ], [ 2, 6, 0 ], [ 2, 7, 0 ],
[ 2, 8, 0 ], [ 2, 9, 0 ], [ 2, 10, 3 ], [ 2, 11, 2 ],
[ 2, 12, 1 ], [ 2, 13, 9 ], [ 2, 14, 8 ], [ 2, 15, 10 ],
[ 2, 16, 6 ], [ 2, 17, 5 ], [ 2, 18, 5 ], [ 2, 19, 5 ],
[ 2, 20, 7 ], [ 2, 21, 4 ], [ 2, 22, 2 ], [ 2, 23, 4 ],
[ 3, 0, 7 ], [ 3, 1, 3 ], [ 3, 2, 0 ], [ 3, 3, 0 ],
[ 3, 4, 0 ], [ 3, 5, 0 ], [ 3, 6, 0 ], [ 3, 7, 0 ],
[ 3, 8, 1 ], [ 3, 9, 0 ], [ 3, 10, 5 ], [ 3, 11, 4 ],
[ 3, 12, 7 ], [ 3, 13, 14 ], [ 3, 14, 13 ], [ 3, 15, 12 ],
[ 3, 16, 9 ], [ 3, 17, 5 ], [ 3, 18, 5 ], [ 3, 19, 10 ],
[ 3, 20, 6 ], [ 3, 21, 4 ], [ 3, 22, 4 ], [ 3, 23, 1 ],
[ 4, 0, 1 ], [ 4, 1, 3 ], [ 4, 2, 0 ], [ 4, 3, 0 ],
[ 4, 4, 0 ], [ 4, 5, 1 ], [ 4, 6, 0 ], [ 4, 7, 0 ],
[ 4, 8, 0 ], [ 4, 9, 2 ], [ 4, 10, 4 ], [ 4, 11, 4 ],
[ 4, 12, 2 ], [ 4, 13, 4 ], [ 4, 14, 4 ], [ 4, 15, 14 ],
[ 4, 16, 12 ], [ 4, 17, 1 ], [ 4, 18, 8 ], [ 4, 19, 5 ],
[ 4, 20, 3 ], [ 4, 21, 7 ], [ 4, 22, 3 ], [ 4, 23, 0 ],
[ 5, 0, 2 ], [ 5, 1, 1 ], [ 5, 2, 0 ], [ 5, 3, 3 ],
[ 5, 4, 0 ], [ 5, 5, 0 ], [ 5, 6, 0 ], [ 5, 7, 0 ],
[ 5, 8, 2 ], [ 5, 9, 0 ], [ 5, 10, 4 ], [ 5, 11, 1 ],
[ 5, 12, 5 ], [ 5, 13, 10 ], [ 5, 14, 5 ], [ 5, 15, 7 ],
[ 5, 16, 11 ], [ 5, 17, 6 ], [ 5, 18, 0 ], [ 5, 19, 5 ],
[ 5, 20, 3 ], [ 5, 21, 4 ], [ 5, 22, 2 ], [ 5, 23, 0 ],
[ 6, 0, 1 ], [ 6, 1, 0 ], [ 6, 2, 0 ], [ 6, 3, 0 ],
[ 6, 4, 0 ], [ 6, 5, 0 ], [ 6, 6, 0 ], [ 6, 7, 0 ],
[ 6, 8, 0 ], [ 6, 9, 0 ], [ 6, 10, 1 ], [ 6, 11, 0 ],
[ 6, 12, 2 ], [ 6, 13, 1 ], [ 6, 14, 3 ], [ 6, 15, 4 ],
[ 6, 16, 0 ], [ 6, 17, 0 ], [ 6, 18, 0 ], [ 6, 19, 0 ],
[ 6, 20, 1 ], [ 6, 21, 2 ], [ 6, 22, 2 ], [ 6, 23, 6 ] ];
var option = {
tooltip : {},
visualMap : {
max : 20,
inRange : {
color : [ '#313695', '#4575b4', '#74add1', '#abd9e9',
'#e0f3f8', '#ffffbf', '#fee090', '#fdae61',
'#f46d43', '#d73027', '#a50026' ]
}
},
xAxis3D : {
type : 'category',
data : hours
},
yAxis3D : {
type : 'category',
data : days
},
zAxis3D : {
type : 'value'
},
grid3D : {
boxWidth : 200,
boxDepth : 80,
light : {
main : {
intensity : 1.2
},
ambient : {
intensity : 0.3
}
}
},
series : [ {
type : 'bar3D',
data : data.map(function(item) {
return {
value : [ item[1], item[0], item[2] ]
}
}),
shading : 'color',
label : {
show : false,
textStyle : {
fontSize : 16,
borderWidth : 1
}
},
itemStyle : {
opacity : 0.4
},
emphasis : {
label : {
textStyle : {
fontSize : 20,
color : '#900'
}
},
itemStyle : {
color : '#900'
}
}
} ]
}
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>
map中国地图代码如下：
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=EDGE">
<title>ECharts</title>
<link rel="stylesheet" type="text/css" href="css/main.css" />
<script src="jquery-1.9.1.min.js"></script>
<script src="echarts.min.js"></script>
<script src="china.js"></script>
<style>
#china-map {
width: 1000px;
height: 1000px;
margin: auto;
}
</style>
</head>
<body>
<div id="china-map"></div>
<script>
var myChart = echarts.init(document.getElementById('china-map'));
var data = [ {
name : '海门',
value : 9
}, {
name : '鄂尔多斯',
value : 12
}, {
name : '招远',
value : 12
}, {
name : '舟山',
value : 12
}, {
name : '齐齐哈尔',
value : 14
}, {
name : '盐城',
value : 15
}, {
name : '赤峰',
value : 16
}, {
name : '青岛',
value : 18
}, {
name : '乳山',
value : 18
}, {
name : '金昌',
value : 19
}, {
name : '泉州',
value : 21
}, {
name : '南通',
value : 23
}, {
name : '拉萨',
value : 24
}, {
name : '云浮',
value : 24
}, {
name : '上海',
value : 25
}, {
name : '攀枝花',
value : 25
}, {
name : '承德',
value : 25
}, {
name : '汕尾',
value : 26
}, {
name : '丹东',
value : 27
}, {
name : '瓦房店',
value : 30
}, {
name : '延安',
value : 38
}, {
name : '咸阳',
value : 43
}, {
name : '南昌',
value : 54
}, {
name : '柳州',
value : 54
}, {
name : '三亚',
value : 54
}, {
name : '泸州',
value : 57
}, {
name : '克拉玛依',
value : 72
} ];
var geoCoordMap = {
'海门' : [ 121.15, 31.89 ],
'鄂尔多斯' : [ 109.781327, 39.608266 ],
'招远' : [ 120.38, 37.35 ],
'舟山' : [ 122.207216, 29.985295 ],
'齐齐哈尔' : [ 123.97, 47.33 ],
'盐城' : [ 120.13, 33.38 ],
'赤峰' : [ 118.87, 42.28 ],
'青岛' : [ 120.33, 36.07 ],
'乳山' : [ 121.52, 36.89 ],
'金昌' : [ 102.188043, 38.520089 ],
'泉州' : [ 118.58, 24.93 ],
'莱西' : [ 120.53, 36.86 ],
'日照' : [ 119.46, 35.42 ],
'胶南' : [ 119.97, 35.88 ],
'南通' : [ 121.05, 32.08 ],
'拉萨' : [ 91.11, 29.97 ],
'云浮' : [ 112.02, 22.93 ],
'梅州' : [ 116.1, 24.55 ],
'文登' : [ 122.05, 37.2 ],
'上海' : [ 121.48, 31.22 ],
'攀枝花' : [ 101.718637, 26.582347 ],
'威海' : [ 122.1, 37.5 ],
'承德' : [ 117.93, 40.97 ],
'厦门' : [ 118.1, 24.46 ],
'汕尾' : [ 115.375279, 22.786211 ],
'潮州' : [ 116.63, 23.68 ],
'丹东' : [ 124.37, 40.13 ],
'太仓' : [ 121.1, 31.45 ],
'曲靖' : [ 103.79, 25.51 ],
'烟台' : [ 121.39, 37.52 ],
'福州' : [ 119.3, 26.08 ],
'瓦房店' : [ 121.979603, 39.627114 ],
'即墨' : [ 120.45, 36.38 ],
'抚顺' : [ 123.97, 41.97 ],
'玉溪' : [ 102.52, 24.35 ],
'张家口' : [ 114.87, 40.82 ],
'阳泉' : [ 113.57, 37.85 ],
'莱州' : [ 119.942327, 37.177017 ],
'湖州' : [ 120.1, 30.86 ],
'汕头' : [ 116.69, 23.39 ],
'昆山' : [ 120.95, 31.39 ],
'宁波' : [ 121.56, 29.86 ],
'湛江' : [ 110.359377, 21.270708 ],
'揭阳' : [ 116.35, 23.55 ],
'荣成' : [ 122.41, 37.16 ],
'连云港' : [ 119.16, 34.59 ],
'葫芦岛' : [ 120.836932, 40.711052 ],
'常熟' : [ 120.74, 31.64 ],
'东莞' : [ 113.75, 23.04 ],
'河源' : [ 114.68, 23.73 ],
'淮安' : [ 119.15, 33.5 ],
'泰州' : [ 119.9, 32.49 ],
'南宁' : [ 108.33, 22.84 ],
'营口' : [ 122.18, 40.65 ],
'惠州' : [ 114.4, 23.09 ],
'江阴' : [ 120.26, 31.91 ],
'蓬莱' : [ 120.75, 37.8 ],
'韶关' : [ 113.62, 24.84 ],
'嘉峪关' : [ 98.289152, 39.77313 ],
'广州' : [ 113.23, 23.16 ],
'延安' : [ 109.47, 36.6 ],
'太原' : [ 112.53, 37.87 ],
'清远' : [ 113.01, 23.7 ],
'中山' : [ 113.38, 22.52 ],
'昆明' : [ 102.73, 25.04 ],
'寿光' : [ 118.73, 36.86 ],
'盘锦' : [ 122.070714, 41.119997 ],
'长治' : [ 113.08, 36.18 ],
'深圳' : [ 114.07, 22.62 ],
'珠海' : [ 113.52, 22.3 ],
'宿迁' : [ 118.3, 33.96 ],
'咸阳' : [ 108.72, 34.36 ],
'铜川' : [ 109.11, 35.09 ],
'平度' : [ 119.97, 36.77 ],
'佛山' : [ 113.11, 23.05 ],
'海口' : [ 110.35, 20.02 ],
'江门' : [ 113.06, 22.61 ],
'章丘' : [ 117.53, 36.72 ],
'肇庆' : [ 112.44, 23.05 ],
'大连' : [ 121.62, 38.92 ],
'临汾' : [ 111.5, 36.08 ],
'吴江' : [ 120.63, 31.16 ],
'石嘴山' : [ 106.39, 39.04 ],
'沈阳' : [ 123.38, 41.8 ],
'苏州' : [ 120.62, 31.32 ],
'茂名' : [ 110.88, 21.68 ],
'嘉兴' : [ 120.76, 30.77 ],
'长春' : [ 125.35, 43.88 ],
'胶州' : [ 120.03336, 36.264622 ],
'银川' : [ 106.27, 38.47 ],
'张家港' : [ 120.555821, 31.875428 ],
'三门峡' : [ 111.19, 34.76 ],
'锦州' : [ 121.15, 41.13 ],
'南昌' : [ 115.89, 28.68 ],
'柳州' : [ 109.4, 24.33 ],
'三亚' : [ 109.511909, 18.252847 ],
'自贡' : [ 104.778442, 29.33903 ],
'吉林' : [ 126.57, 43.87 ],
'阳江' : [ 111.95, 21.85 ],
'泸州' : [ 105.39, 28.91 ],
'西宁' : [ 101.74, 36.56 ],
'宜宾' : [ 104.56, 29.77 ],
'呼和浩特' : [ 111.65, 40.82 ],
'成都' : [ 104.06, 30.67 ],
'大同' : [ 113.3, 40.12 ],
'镇江' : [ 119.44, 32.2 ],
'桂林' : [ 110.28, 25.29 ],
'张家界' : [ 110.479191, 29.117096 ],
'宜兴' : [ 119.82, 31.36 ],
'北海' : [ 109.12, 21.49 ],
'西安' : [ 108.95, 34.27 ],
'金坛' : [ 119.56, 31.74 ],
'东营' : [ 118.49, 37.46 ],
'牡丹江' : [ 129.58, 44.6 ],
'遵义' : [ 106.9, 27.7 ],
'绍兴' : [ 120.58, 30.01 ],
'扬州' : [ 119.42, 32.39 ],
'常州' : [ 119.95, 31.79 ],
'潍坊' : [ 119.1, 36.62 ],
'重庆' : [ 106.54, 29.59 ],
'台州' : [ 121.420757, 28.656386 ],
'南京' : [ 118.78, 32.04 ],
'滨州' : [ 118.03, 37.36 ],
'贵阳' : [ 106.71, 26.57 ],
'无锡' : [ 120.29, 31.59 ],
'本溪' : [ 123.73, 41.3 ],
'克拉玛依' : [ 84.77, 45.59 ],
'渭南' : [ 109.5, 34.52 ],
'马鞍山' : [ 118.48, 31.56 ],
'宝鸡' : [ 107.15, 34.38 ],
'焦作' : [ 113.21, 35.24 ],
'句容' : [ 119.16, 31.95 ],
'北京' : [ 116.46, 39.92 ],
'徐州' : [ 117.2, 34.26 ],
'衡水' : [ 115.72, 37.72 ],
'包头' : [ 110, 40.58 ],
'绵阳' : [ 104.73, 31.48 ],
'乌鲁木齐' : [ 87.68, 43.77 ],
'枣庄' : [ 117.57, 34.86 ],
'杭州' : [ 120.19, 30.26 ],
'淄博' : [ 118.05, 36.78 ],
'鞍山' : [ 122.85, 41.12 ],
'溧阳' : [ 119.48, 31.43 ],
'库尔勒' : [ 86.06, 41.68 ],
'安阳' : [ 114.35, 36.1 ],
'开封' : [ 114.35, 34.79 ],
'济南' : [ 117, 36.65 ],
'德阳' : [ 104.37, 31.13 ],
'温州' : [ 120.65, 28.01 ],
'九江' : [ 115.97, 29.71 ],
'邯郸' : [ 114.47, 36.6 ],
'临安' : [ 119.72, 30.23 ],
'兰州' : [ 103.73, 36.03 ],
'沧州' : [ 116.83, 38.33 ],
'临沂' : [ 118.35, 35.05 ],
'南充' : [ 106.110698, 30.837793 ],
'天津' : [ 117.2, 39.13 ],
'富阳' : [ 119.95, 30.07 ],
'泰安' : [ 117.13, 36.18 ],
'诸暨' : [ 120.23, 29.71 ],
'郑州' : [ 113.65, 34.76 ],
'哈尔滨' : [ 126.63, 45.75 ],
'聊城' : [ 115.97, 36.45 ],
'芜湖' : [ 118.38, 31.33 ],
'唐山' : [ 118.02, 39.63 ],
'平顶山' : [ 113.29, 33.75 ],
'邢台' : [ 114.48, 37.05 ],
'德州' : [ 116.29, 37.45 ],
'济宁' : [ 116.59, 35.38 ],
'荆州' : [ 112.239741, 30.335165 ],
'宜昌' : [ 111.3, 30.7 ],
'义乌' : [ 120.06, 29.32 ],
'丽水' : [ 119.92, 28.45 ],
'洛阳' : [ 112.44, 34.7 ],
'秦皇岛' : [ 119.57, 39.95 ],
'株洲' : [ 113.16, 27.83 ],
'石家庄' : [ 114.48, 38.03 ],
'莱芜' : [ 117.67, 36.19 ],
'常德' : [ 111.69, 29.05 ],
'保定' : [ 115.48, 38.85 ],
'湘潭' : [ 112.91, 27.87 ],
'金华' : [ 119.64, 29.12 ],
'岳阳' : [ 113.09, 29.37 ],
'长沙' : [ 113, 28.21 ],
'衢州' : [ 118.88, 28.97 ],
'廊坊' : [ 116.7, 39.53 ],
'菏泽' : [ 115.480656, 35.23375 ],
'合肥' : [ 117.27, 31.86 ],
'武汉' : [ 114.31, 30.52 ],
'大庆' : [ 125.03, 46.58 ]
};
function convertData(data) {
var res = [];
for (var i = 0; i < data.length; i++) {
var geoCoord = geoCoordMap[data[i].name];
if (geoCoord) {
res.push({
name : data[i].name,
value : geoCoord.concat(data[i].value)
});
}
}
return res;
};
function randomValue() {
return Math.round(Math.random() * 1000);
}
var option = {
tooltip : {},
visualMap : {
min : 0,
max : 1500,
left : 'left',
top : 'bottom',
text : [ 'High', 'Low' ],
seriesIndex : [ 1 ],
inRange : {
color : [ '#83f883', '#11bfc6' ]
},
calculable : true
},
geo : {
map : 'china',
roam : true,
label : {
normal : {
show : true,
textStyle : {
color : 'rgba(0,0,0,0.0)'
}
}
},
itemStyle : {
normal : {
borderColor : '#fff'
},
emphasis : {
areaColor : null,
shadowOffsetX : 0,
shadowOffsetY : 0,
shadowBlur : 20,
borderWidth : 0,
shadowColor : 'rgba(0, 0, 0, 0.5)'
}
}
},
series : [
{
type : 'scatter',
coordinateSystem : 'geo',
data : convertData(data),
symbolSize : 1,
symbol : 'path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z',
symbolRotate : 35,
label : {
normal : {
formatter : '{b}',
position : 'right',
show : false
},
emphasis : {
show : false
}
},
itemStyle : {
normal : {
color : '#fff'
}
}
}, {
name : 'categoryA',
type : 'map',
geoIndex : 0,
// tooltip: {show: false},
data : [ {
name : '北京',
value : randomValue()
}, {
name : '天津',
value : randomValue()
}, {
name : '上海',
value : randomValue()
}, {
name : '重庆',
value : randomValue()
}, {
name : '河北',
value : randomValue()
}, {
name : '河南',
value : randomValue()
}, {
name : '云南',
value : randomValue()
}, {
name : '辽宁',
value : randomValue()
}, {
name : '黑龙江',
value : randomValue()
}, {
name : '湖南',
value : randomValue()
}, {
name : '安徽',
value : randomValue()
}, {
name : '山东',
value : randomValue()
}, {
name : '新疆',
value : randomValue()
}, {
name : '江苏',
value : randomValue()
}, {
name : '浙江',
value : randomValue()
}, {
name : '江西',
value : randomValue()
}, {
name : '湖北',
value : randomValue()
}, {
name : '广西',
value : randomValue()
}, {
name : '甘肃',
value : randomValue()
}, {
name : '山西',
value : randomValue()
}, {
name : '内蒙古',
value : randomValue()
}, {
name : '陕西',
value : randomValue()
}, {
name : '吉林',
value : randomValue()
}, {
name : '福建',
value : randomValue()
}, {
name : '贵州',
value : randomValue()
}, {
name : '广东',
value : randomValue()
}, {
name : '青海',
value : randomValue()
}, {
name : '西藏',
value : randomValue()
}, {
name : '四川',
value : randomValue()
}, {
name : '宁夏',
value : randomValue()
}, {
name : '海南',
value : randomValue()
}, {
name : '台湾',
value : randomValue()
}, {
name : '香港',
value : randomValue()
}, {
name : '澳门',
value : randomValue()
} ]
} ]
};
myChart.setOption(option);
myChart.on('mouseover', function(params) {
var dataIndex = params.dataIndex;
console.log(params);
});
</script>
</body>
</html>
2017_11_23 学习echarts之饼状、柱状、gl(三维柱状)、map地图相关推荐
- echarts制作饼状图如何设置不同类别之间有一定间隔？
解决echarts饼状图不同类之间有一定间隔 用echarts制作饼状图时,为了有利于区分不同类别,一般通过设置不同的颜色代表不同的类别即可,但为了进一步体现不同类别之间的区分,可通过设置不同类别之间 ...
- 计算机电子表格三维簇状柱形图怎么设置,Excel中怎么制作柱形对比图【excel表格数据生成柱形图】...
怎么创建Excel簇状柱形图并设置图表的格 第一步:插入---图表----选择"簇状柱形图" 在图表区域右击---选择数据-----点击" "号-----选择系 ...
- 柱状山地图（我的世界风地图）（100种制图法4）
柱状山地图(我的世界风地图) 一.问题 制作一幅柱状山(我的世界)风格的地图 二.操作步骤 1.加载数据 加载数据结果图 2.环境设置 环境设置参数设置 3.投影栅格 投影栅格参数设置 投影栅格结果图 ...
- 【HZHE004】黄子涵学习Echarts
概念篇 数据集 数据集(dataset)是专门用来管理数据的组件.虽然每个系列都可以在 series.data 中设置数据,但是从 ECharts4 支持 数据集 开始,更推荐使用 数据集 来管理数据 ...
- 计算机电子表格三维簇状柱形图怎么设置,excel怎么制作三维簇状柱形图 excel三维簇状柱形图如何添加标题...
在我们使用excel表格统计数据时,可以制作各种各样的图形来统计,比如说饼图.折线图.瀑布图等等,近日很多用户比较常用三维簇状柱形图,看到它的名字就知道不简单,那么excel怎么制作三维簇状柱形图呢? ...
- Aspose.Cells绘制三维簇状柱形图
Aspose.Cells 绘制Excel三维簇状柱形图 数据 创建工作簿 创建图表 一般设置 保存 数据 创建工作簿 var book = new Workbook(); book.Worksheet ...
- R语言层次聚类（hierarchical clustering）：使用scale函数进行特征缩放、hclust包层次聚类（创建距离矩阵、聚类、绘制树状图dendrogram，在树状图上绘制红色矩形框）
R语言层次聚类(hierarchical clustering):使用scale函数进行特征缩放.hclust包层次聚类(创建距离矩阵.聚类.绘制树状图dendrogram,在树状图上绘制红色矩形框) ...
- HDU 3584 Cube （三维树状数组）
Problem Description Given an N*N*N cube A, whose elements are either 0 or 1. A[i, j, k] means the nu ...
- Python：利用python编程实现三维图像绘制展示(六面体旋转、三维球柱状体、下雪场景等)
Python:利用python编程实现三维图像绘制展示(六面体旋转.三维球柱状体.下雪场景等) 目录 利用python编程实现三维图像绘制展示(六面体旋转.三维球柱状体.下雪场景等) 1.实现六面体旋 ...
- 26.27.28.29.极区图（南丁格尔玫瑰图）、维恩图 （Venn diagram）、面状图（Area chart）、树地图
26.极区图(南丁格尔玫瑰图) 27.维恩图 (Venn diagram) 28.面状图(Area chart) 29.树地图 26.极区图(南丁格尔玫瑰图) 极区图(又名南丁格尔玫瑰图)呈放射延伸状 ...
最新文章
- cad监控摄像头图例_家庭护卫兵：乐橙 TP2 智能摄像头
- struts的国际化
- python实现五大基本算法_算法基础：五大排序算法Python实战教程
- C++学习之路 | PTA乙级—— 1009 说反话 (20分)（精简）
- dedecms如何快速删除跳转的文章(记得清空内容回收站)
- html5与之前版本,IT兄弟连HTML5教程HTML5做到了与之前版本的兼容
- 【收藏干货】axios配置大全
- forEach、for...in、for...of
- 调用微信公众号API，实现主动给粉丝发送消息
- 数据分析的 5 种归纳方法
- 计算机cmd管理员,cmd获取管理员权限的命令是什么
- java读文件换行_java读取文本文件txt时候的换行问题
- 【FINAL】NOI
- 猫推荐算法大赛Top 9团队
- 爆爆爆！！Deep Mind与Google Brain合并，成立 Google DeepMind 新部门
- java 整数除法（不用*和/以及%）
- 程序员必备狂拽炫酷吊炸天的动效神器
- 中国人工智能学会通讯——当巧妇遇到“大米”——机器翻译启示录
- Linux服务器下搭建SFTP服务
- 蛋白质结构与功能的预测方法总结和资料汇总