BIGEMPA Js API示例中心
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8' />
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<!--
以下CSS地址请在安装软件了替换成本地的地址
CSS地址请使用:
http://localhost:9000/bigemap.js/v2.1.0/bigemap.css
软件下载地址 http://www.bigemap.com/reader/download/detail201802017.html
-->
<link href='http://www.bigemap.com:9000/bigemap.js/v2.1.0/bigemap.css' rel='stylesheet' />
<!--
JS地址请使用：
http://localhost:9000/bigemap.js/v2.1.0/bigemap.js
-->
<script src='http://www.bigemap.com:9000/bigemap.js/v2.1.0/bigemap.js'></script>
<script src="http://www.bigemap.com/Public/common/js/jquery.min.js"></script>
<script src="http://www.bigemap.com/Public/js/d3.min.js"></script>
<style>
body {
margin: 0;
padding: 0;
}
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
#left {
position: absolute;
z-index: 10;
height: 100%;
width: 300px;
background-color: black;
opacity: .5;
}
.d31 {
position: absolute;
z-index: 10;
height: 100%;
width: 0px;
background-color: white;
}
.d32 {
position: absolute;
z-index: 10;
height: 100%;
width: 0px;
background-color: white;
}
.toptitle {
position: absolute;
z-index: 10;
height: 72px;
left: 67px;
color: white;
}
.bottomtitle {
position: absolute;
z-index: 10;
height: 72px;
top: 313px;
left: 67px;
color: white;
}
.svg1 {
border-radius: 50%;
background-color: white;
opacity: .8;
}
</style>
<title>Google Map Streets</title>
</head>
<body>
<div id="left">
<div class="toptitle">
</div>
<div class="bottomtitle">
</div>
</div>
<div class="d31"></div>
<div class="d32"></div>
<div id='map'></div>
<script>
//软件配置信息地址，软件安装完成之后使用本地地址，如：http://localhost:9000
BM.Config.HTTP_URL = 'http://www.bigemap.com:9000';
// 在ID为map的元素中实例化一个地图，并设置地图的ID号为 bigemap.zhongkexingtu，ID号程序自动生成，无需手动配置，并设置地图的投影为百度地图 ，中心点，默认的级别和显示级别控件
var map = BM.map('map', 'bigemap.zhongkexingtu', { center: [30, 104], zoom: 4, zoomControl: true });
//标记数据
places = [{ "name": "甘肃", "position": [36.03, 103.73] }, { "name": "青海", "position": [36.56, 101.74] }, { "name": "四川", "position": [30.67, 104.06] }, { "name": "河北", "position": [38.03, 114.48] }, { "name": "云南", "position": [25.04, 102.73] }, { "name": "贵州", "position": [26.57, 106.71] }, { "name": "湖北", "position": [30.52, 114.31] }, { "name": "河南", "position": [34.76, 113.65] }, { "name": "山东", "position": [36.65, 117] }, { "name": "江苏", "position": [32.04, 118.78] }, { "name": "安徽", "position": [31.86, 117.27] }, { "name": "浙江", "position": [30.26, 120.19] }, { "name": "江西", "position": [28.68, 115.89] }, { "name": "福建", "position": [26.08, 119.3] }, { "name": "广东", "position": [23.16, 113.23] }, { "name": "湖南", "position": [28.21, 113] }, { "name": "海南", "position": [20.02, 110.35] }, { "name": "辽宁", "position": [41.8, 123.38] }, { "name": "吉林", "position": [43.88, 125.35] }, { "name": "黑龙江", "position": [45.75, 126.63] }, { "name": "山西", "position": [37.87, 112.53] }, { "name": "陕西", "position": [34.27, 108.95] }, { "name": "台湾", "position": [25.03, 121.3] }, { "name": "北京", "position": [39.92, 116.46] }, { "name": "上海", "position": [31.22, 121.48] }, { "name": "重庆", "position": [29.59, 106.54] }, { "name": "天津", "position": [39.13, 117.2] }, { "name": "内蒙古", "position": [40.82, 111.65] }, { "name": "广西", "position": [22.84, 108.33] }, { "name": "西藏", "position": [29.97, 91.11] }, { "name": "宁夏", "position": [38.47, 106.27] }, { "name": "新疆", "position": [43.77, 87.68] }, { "name": "香港", "position": [22.28, 114.17] }, { "name": "澳门", "position": [22.19, 113.54] }];
var data = []
var data2 = []
places.map((v, i) => {
var marker = BM.marker(v.position).addTo(map)
if (i == 1) {
draw(v);
}
//标记点击事件
marker.on('click', function () {
$('.toptitle').html("<h3>" + v.name + "水果数量饼状图</h3>")
$('.bottomtitle').html("<h3>" + v.name + "过去7天降水量</h3>")
data.length = 0
data2.length = 0
d3.selectAll('svg').remove()
var wid = $("#left").css('width')
if (wid == '0px') {
$('#left').animate({ width: 300 }, 500)
}
setTimeout(function () {
var height = 240
var width = 240
var svg = d3.select('.d31').append('svg').attr('height', height).attr('width', width).attr('transform', "translate(25,50)").attr('class', 'svg1')
var pieg = svg.append('g')
var fruit = ['苹果', '香蕉', '梨子', '葡萄', '火龙果']
//创建假数据
for (let index = 0; index < 5; index++) {
num = Math.random() * 100
if (num < 20) { num = num + 20 }
data.push(num.toFixed(2))
}
//画饼状图
//定义颜色比例尺
var colorScale = d3.scaleOrdinal()
.domain(d3.range(data.length))
.range(d3.schemeCategory10);
//处理数据
var pie = d3.pie();
//新建一个弧形生成器
var innerRadius = 0;//内半径
var outerRadius = 120;//外半径
var arc_generator = d3.arc()
.innerRadius(innerRadius)
.outerRadius(outerRadius);
//将原始数据变成可以绘制饼状图的数据，
var pieData = pie(data);
//打印出来查看转换后的数据
console.log(pieData);
// 每一个扇形及其对应的文字建立一个分组<g>
gs = pieg.selectAll(".g")
.data(pieData)
.enter()
.append("g")
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")")//位置信息
// 绘制扇形
gs.append("path")
.attr("d", function (d) {
return arc_generator(d);//往弧形生成器中出入数据
})
.attr("fill", function (d, i) {
return colorScale(i);//设置颜色
});
//绘制饼状图上面的文字信息
gs.append("text")
.attr("transform", function (d) {//位置设在中心处
return "translate(" + arc_generator.centroid(d) + ")";
})
.attr("text-anchor", "middle")
.text(function (d, i) {
return d.data;
})
gs.append("text")
.attr("transform", function (d) {//位置设在中心处
return "translate(" + arc_generator.centroid(d) + ")";
})
.attr("text-anchor", "middle")
.attr('y', 20)
.text(function (d, i) {
return fruit[i]
})
//————+——————————————————————————————————————————————————————————————————————————————————————
// 画柱状图
//创建假数据
for (let index = 0; index < 7; index++) {
num = Math.random() * 100
if (num < 20) { num = num + 20 }
data2.push(num.toFixed(0))
}
var svg2 = d3.select('.d32').append('svg').attr('height', height).attr('width', width).attr('transform', "translate(25,370)")
//x轴数据
Xdatas = ['一', '二', '三', '四', '五', '六', '日']
//创建x轴比例尺
var x = d3.scaleBand().domain(Xdatas).rangeRound([0, width - 50]).padding(0.1);
xAsix = d3.axisBottom(x)
var g = svg2.append('g')
g.append('g').attr('transform', 'translate(25,' + 210 + ')').attr('color', 'snow')
.call(xAsix);
console.log(data2);
//y轴比例尺
var y = d3.scaleLinear().domain([0, d3.max(data2)]).rangeRound([(height - 50), 0])
yAsix = d3.axisLeft(y)
g.append('g').attr('transform', 'translate(25,18)').call(yAsix).attr('color', 'snow');
chart = g.selectAll('.bar').data(data2).enter().append('g');
//添加矩形
chart.append('rect')
.attr('x', function (d, i) {
return x(Xdatas[i]);
})
.attr('cursor', 'pointer')
.attr('y', function (d) {
return y(y.domain()[0]) - 5;
})
.attr('fill', function (d, i) {
// 生成随机颜色
return colorScale(i)
})
.attr('stroke', '#FFF').attr('stroke-width', '3px')
.transition()
.delay(function (d, i) {
return (i + 1) * 50
})
.duration(2000).ease(d3.easeBounceIn)
.attr('y', function (d) {
return y(d) - 5;
})
.attr('width', x.bandwidth())
.attr('height', function (d) {
return (height - 50) - y(d);
}).attr('transform', 'translate(25,25)');
//添加文字
chart.append('text').attr('fill', '#FFF')
.attr('x', function (d, i) {
return x(Xdatas[i]);
})
.attr('y', function (d) {
return y(y.domain()[0]);
})
.transition()
.delay(function (d, i) {
return (i + 1) * 100
})
.duration(2000).ease(d3.easeBounceIn)
.attr('y', function (d) {
return y(d);
})
.attr('dx', function (d) {
return (x.bandwidth()) / 2;
})
.attr('dy', 20)
.text(function (d) {
return d
}).attr('transform', 'translate(16,-8)');
}, 100)
})
})
//map点击事件
map.on('click', function (e) {
$('.toptitle').html("")
$('.bottomtitle').html("")
d3.selectAll('svg').remove()
$('#left').animate({ width: 0 }, 1000)
})
function draw(v) {
$('.toptitle').html("<h3>" + v.name + "水果数量饼状图</h3>")
$('.bottomtitle').html("<h3>" + v.name + "过去7天降水量</h3>")
var height = 240
var width = 240
var svg = d3.select('.d31').append('svg').attr('height', height).attr('width', width).attr('transform', "translate(25,50)").attr('class', 'svg1')
var pieg = svg.append('g')
var fruit = ['苹果', '香蕉', '梨子', '葡萄', '火龙果']
//创建假数据
for (let index = 0; index < 5; index++) {
num = Math.random() * 100
if (num < 20) { num = num + 20 }
data.push(num.toFixed(2))
}
//画饼状图
//定义颜色比例尺
var colorScale = d3.scaleOrdinal()
.domain(d3.range(data.length))
.range(d3.schemeCategory10);
//处理数据
var pie = d3.pie();
//新建一个弧形生成器
var innerRadius = 0;//内半径
var outerRadius = 120;//外半径
var arc_generator = d3.arc()
.innerRadius(innerRadius)
.outerRadius(outerRadius);
//将原始数据变成可以绘制饼状图的数据，
var pieData = pie(data);
//打印出来查看转换后的数据
console.log(pieData);
// 每一个扇形及其对应的文字建立一个分组<g>
gs = pieg.selectAll(".g")
.data(pieData)
.enter()
.append("g")
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")")//位置信息
// 绘制扇形
gs.append("path")
.attr("d", function (d) {
return arc_generator(d);//往弧形生成器中出入数据
})
.attr("fill", function (d, i) {
return colorScale(i);//设置颜色
});
//绘制饼状图上面的文字信息
gs.append("text")
.attr("transform", function (d) {//位置设在中心处
return "translate(" + arc_generator.centroid(d) + ")";
})
.attr("text-anchor", "middle")
.text(function (d, i) {
return d.data;
})
gs.append("text")
.attr("transform", function (d) {//位置设在中心处
return "translate(" + arc_generator.centroid(d) + ")";
})
.attr("text-anchor", "middle")
.attr('y', 20)
.text(function (d, i) {
return fruit[i]
})
//————+——————————————————————————————————————————————————————————————————————————————————————
// 画柱状图
//创建假数据
for (let index = 0; index < 7; index++) {
num = Math.random() * 100
if (num < 20) { num = num + 20 }
data2.push(num.toFixed(0))
}
var svg2 = d3.select('.d32').append('svg').attr('height', height).attr('width', width).attr('transform', "translate(25,370)")
//x轴数据
Xdatas = ['一', '二', '三', '四', '五', '六', '日']
//创建x轴比例尺
var x = d3.scaleBand().domain(Xdatas).rangeRound([0, width - 50]).padding(0.1);
xAsix = d3.axisBottom(x)
var g = svg2.append('g')
g.append('g').attr('transform', 'translate(25,' + 210 + ')').attr('color', 'snow')
.call(xAsix);
console.log(data2);
//y轴比例尺
var y = d3.scaleLinear().domain([0, d3.max(data2)]).rangeRound([(height - 50), 0])
yAsix = d3.axisLeft(y)
g.append('g').attr('transform', 'translate(25,18)').call(yAsix).attr('color', 'snow');
chart = g.selectAll('.bar').data(data2).enter().append('g');
//添加矩形
chart.append('rect')
.attr('x', function (d, i) {
return x(Xdatas[i]);
})
.attr('cursor', 'pointer')
.attr('y', function (d) {
return y(y.domain()[0]) - 5;
})
.attr('fill', function (d, i) {
// 生成随机颜色
return colorScale(i)
})
.attr('stroke', '#FFF').attr('stroke-width', '3px')
.transition()
.delay(function (d, i) {
return (i + 1) * 50
})
.duration(2000).ease(d3.easeBounceIn)
.attr('y', function (d) {
return y(d) - 5;
})
.attr('width', x.bandwidth())
.attr('height', function (d) {
return (height - 50) - y(d);
}).attr('transform', 'translate(25,25)');
//添加文字
chart.append('text').attr('fill', '#FFF')
.attr('x', function (d, i) {
return x(Xdatas[i]);
})
.attr('y', function (d) {
return y(y.domain()[0]);
})
.transition()
.delay(function (d, i) {
return (i + 1) * 100
})
.duration(2000).ease(d3.easeBounceIn)
.attr('y', function (d) {
return y(d);
})
.attr('dx', function (d) {
return (x.bandwidth()) / 2;
})
.attr('dy', 20)
.text(function (d) {
return d
}).attr('transform', 'translate(16,-8)');
}
</script>
</body>
</html>