保护区-MyEcharts.js
MyEcharts.js
function drawPie(data) {
var pie_datas = FormateNOGroupData(data);
var option1 = {
title: {
left: 'center'
},
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b} : {c} ({d}%)'
},
legend: {
bottom: 10,
left: 'center',
textStyle: {
color: '#ffffff'
},
data: pie_datas.category
},
series: [
{
name: '物种数量占比',
type: 'pie',
radius: '65%',
center: ['50%', '50%'],
selectedMode: 'single',
data: pie_datas.data
}
]
};
return option1;
}
function drawColumn(data) {
var pie_datas = FormateNOGroupData(data);
var option = {
color: ['#3398DB'],
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [
{
type: 'category',
data: pie_datas.category,
axisTick: {
alignWithLabel: true
}
}
],
yAxis: [
{
type: 'value'
}
],
series: [
{
name: '个体数量',
type: 'bar',
barWidth: '60%',
data: pie_datas.data
}
]
};
return option;
}
function drawLine(data) {
var pie_datas = FormateGroupData(data);
var option3 = {
tooltip: {
trigger: 'axis'
},
legend: {
data: pie_datas.legendData
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
toolbox: {
feature: {
saveAsImage: {}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: pie_datas.xAxis
},
yAxis: {
type: 'value'
},
series: pie_datas.series
};
return option3;
}
function drawMap(data) {
alert(1);
var option2;
//var pie_datas = FormateGroupData(data);
var uploadedDataURL = "/resources/js/echarts/yancheng.json";
// myChart2.showLoading();
var data = $.getJSON(uploadedDataURL, function (geoJson) {
echarts.registerMap('yancheng', geoJson);
// myChart2.hideLoading();
var geoCoordMap = {
'响水县': [119.72212, 34.237],
'建湖县': [119.793105, 33.472],
'射阳县': [120.257444, 33.773],
'阜宁县': [119.615, 33.725],
'滨海县': [120.00, 34.09],
'盐都区': [119.88256837, 33.25],
'亭湖区': [120.250, 33.383912],
'大丰区': [120.5, 33.20],
'东台市': [120.6116376, 32.797]
};
var data = [
{name: '响水县', value: 199},
{name: '建湖县', value: 39},
{name: '射阳县', value: 152},
{name: '阜宁县', value: 299},
{name: '滨海县', value: 30},
{name: '盐都区', value: 89},
{name: '亭湖区', value: 52},
{name: '大丰区', value: 9},
{name: '东台市', value: 352}
];
var max = 480, min = 9; // todo
var maxSize4Pin = 100, minSize4Pin = 20;
var convertData = function (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;
};
option2 = {
title: {
text: '',
subtext: '',
x: 'center',
textStyle: {
color: '#ccc'
}
},
tooltip: {
trigger: 'item',
formatter: function (params) {
if (typeof(params.value)[2] == "undefined") {
return params.name + ' : ' + params.value;
} else {
return params.name + ' : ' + params.value[2];
}
}
},
legend: {
orient: 'vertical',
y: 'bottom',
x: 'right',
data: ['Degree_of_heat'],
textStyle: {
color: '#fff'
}
},
visualMap: {
show: true,
min: 0,
max: 500,
left: 'left',
top: 'bottom',
text: ['高', '低'], // 文本，默认为数值文本
calculable: true,
seriesIndex: [1],
/* inRange: {
color: ['rgb(70, 240, 252)', 'rgb(250, 220, 46)', 'rgb(245, 38, 186)']
},*/
textStyle: {
color: '#fff'
},
inRange: {
color: ['#0f0c29', '#302b63', '#24243e'] // 黑紫黑
}
},
geo: {
show: true,
map: 'yancheng',
label: {
normal: {
show: false
},
emphasis: {
show: false,
}
},
roam: true,
itemStyle: {
normal: {
areaColor: '#031525',
borderColor: '#3B5077'
},
emphasis: {
areaColor: '#2B91B7'
}
}
},
series: [
{
name: 'Degree_of_heat',
type: 'scatter',
coordinateSystem: 'geo',
data: convertData(data),
symbolSize: function (val) {
return val[2] / 10;
},
label: {
normal: {
formatter: '{b}',
position: 'right',
show: true
},
emphasis: {
show: true
}
},
itemStyle: {
normal: {
color: '#05C3F9'
}
}
},
{
type: 'map',
map: 'yancheng',
geoIndex: 0,
aspectScale: 0.75, //长宽比
showLegendSymbol: false, // 存在legend时显示
label: {
normal: {
show: false
},
emphasis: {
show: false,
textStyle: {
color: '#fff'
}
}
},
roam: true,
itemStyle: {
normal: {
areaColor: '#031525',
borderColor: '#3B5077',
},
emphasis: {
areaColor: '#2B91B7'
}
},
animation: false,
data: data
},
{
name: '点',
type: 'scatter',
coordinateSystem: 'geo',
symbol: 'pin',
symbolSize: function (val) {
var a = (maxSize4Pin - minSize4Pin) / (max - min);
var b = minSize4Pin - a * min;
b = maxSize4Pin - a * max;
return a * val[2] + b;
},
label: {
normal: {
show: true,
textStyle: {
color: '#fff',
fontSize: 9
}
}
},
itemStyle: {
normal: {
color: '#F62157' //标志颜色
}
},
zlevel: 6,
// data: convertData(data),
},
{
name: 'Top 5',
type: 'effectScatter',
/* type: 'scatter', */
coordinateSystem: 'geo',
data: convertData(data.sort(function (a, b) {
return b.value - a.value;
}).slice(0, 5)),
/* data:convertData(data),*/
symbolSize: function (val) {
return val[2] / 10;
},
showEffectOn: 'render',
rippleEffect: {
brushType: 'stroke'
},
hoverAnimation: true,
label: {
normal: {
formatter: '{b}',
position: 'right',
show: true
}
},
itemStyle: {
normal: {
color: '#05C3F9',
shadowBlur: 10,
shadowColor: '#05C3F9'
}
},
zlevel: 1
}
]
};
return option2;
});
return data;
}
function FormateNOGroupData(data) {
//data的格式如上的Result1，这种格式的数据，多用于饼图、单一的柱形图的数据源
var categories = [];
var datas = [];
for (var i = 0; i < data.length; i++) {
categories.push(data[i].name || "");
datas.push({name: data[i].name, value: data[i].value || 0});
}
return {category: categories, data: datas};
}
function FormateGroupData(data) {
var xAxis = [];
var series = [];
var data1 = data[0];
var legendData = [];
for (var i = 0; i < data1.length; i++) {
for (var j = 0; j < xAxis.length && xAxis[j] != data1[i].name; j++);
if (j == xAxis.length)
xAxis.push(data1[i].name);
}
for (var z = 0; z < data.length; z++) {
var datatemp = data[z];
var temp = [];
var nametemp = '';
for (var f = 0; f < datatemp.length; f++) {
temp.push(datatemp[f].value);
}
nametemp = datatemp[0].nickName;
legendData.push(datatemp[0].nickName);
var series_temp = {
name: nametemp,
type: 'line',
stack: '总量',
data: temp
};
series.push((series_temp));
}
return {xAxis: xAxis, series: series, legendData: legendData};
}
function getMapData(data) {
var datas = [];
for (var i = 0; i < data.length; i++) {
datas.push({name: data[i].name, value: data[i].value || 0});
}
return datas;
}
function getDeviceData(data) {
var datas = [];
if (!isEmpty(data) && data.length > 0) {
for (var i = 0; i < data.length; i++) {
if (data[i].status == 10) {
datas.push({
name: data[i].name,
exhibition: data[i].name,
value: [data[i].slongitude, data[i].slatitude],
ip: data[i].ip,
code: data[i].code,
idenTotalNum: data[i].idenTotalNum,
status: data[i].status,
idenSpeciesTotalNum: data[i].idenSpeciesTotalNum
});
}
}
}
return datas;
}
function getDeviceDataLX(data) {
var datas = [];
if (!isEmpty(data) && data.length > 0) {
for (var i = 0; i < data.length; i++) {
if (data[i].status != 10) {
datas.push({
name: data[i].name,
exhibition: data[i].name,
value: [data[i].slongitude, data[i].slatitude],
ip: data[i].ip,
code: data[i].code,
idenTotalNum: data[i].idenTotalNum,
status: data[i].status,
idenSpeciesTotalNum: data[i].idenSpeciesTotalNum
});
}
}
}
return datas;
}
浙公网安备 33010602011771号