实现效果如图所示：
geoCoordMap,list，color数据格式如下：
geoCoordMap：{
虫害监测设备: [109.710853, 34.95697],
病害监测设备: [109.730853, 34.95697],
水利监测设备: [109.750853, 34.95697],
其他监测设备: [109.770853, 34.95697],
};
list:[
{ name: "虫害监测设备", value: 3, unit: "台" },
{ name: "病害监测设备", value: 3, unit: "台" },
{ name: "水利监测设备", value: 11, unit: "台" },
{ name: "其他监测设备", value: 6, unit: "台" },
];
color： {
虫害监测设备: "#03CBDE",
病害监测设备: "#E7A233",
水利监测设备: "#D34036",
其他监测设备: "#EB6336",
};
// 将上述数据传进来
initMap(geoCoordMap, list, color) {
var chartDom = document.getElementById("map");
var myChart = echarts.init(chartDom);
// 清除图表
myChart.clear();
// myChart.showLoading();
var geoCoordMap = geoCoordMap;
var colorMap = color;
const dataList = list;
var customerBatteryCityData = [{ name: "孙镇/椿林镇", value: 154.16 }];
$.get(
"http://39.103.207.37:8899/geoserver/TownBorder/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=TownBorder%3A%E9%95%87%E7%95%8C&maxFeatures=50&outputFormat=application%2Fjson",
// "https://geo.datav.aliyun.com/areas_v3/bound/610526.json",
function (geoJson) {
// console.log("geoJson", geoJson.features);
// myChart.hideLoading();
echarts.registerMap("zhenjie", geoJson);
var option;
myChart.setOption(
(option = {
backgroundColor: "rgba(0,0,0,0)",
tooltip: {
// item 在地图系列中通常指代地图的一个区域
trigger: "item",
show: true,
enterable: true,
textStyle: {
fontSize: 18,
color: "#fff",
},
backgroundColor: "#05466E",
// b是name名称 c是value值 （p / km²）是单位
formatter: "{b}<br/>{c} km²",
},
geo: [
{
map: "zhenjie",
aspectScale: 1.7,
roam: true, // 是否允许缩放
layoutSize: "130%",
layoutCenter: ["50%", "53.5%"],
borderColor: "#01f2d1",
borderWidth: 2,
itemStyle: {
normal: {
color: {
type: "linear-gradient",
x: 0,
y: 1500,
x2: 2500,
y2: 0,
colorStops: [
{
offset: 0,
color: "#01f2d1", // 0% 处的颜色
},
{
offset: 1,
color: "#01f2d1", // 50% 处的颜色
},
],
global: false, // 缺省为 false
},
},
emphasis: {
areaColor: "#01f2d1",
},
},
z: 2,
},
],
series: [
{
type: "map",
map: "zhenjie",
aspectScale: 1.7,
layoutSize: "130%",
layoutCenter: ["50%", "52%"],
// geoIndex: 0,
// 是否显示图例的小图标
showLegendSymbol: true,
// 是否开启鼠标缩放和平移
roam: true,
// label: {
// // 正常状态下的标签文本
// normal: {
// show: true,
// textStyle: {
// color: "#fff",
// },
// },
// // 高亮状态下的标签文本
// emphasis: {
// show: true,
// textStyle: {
// color: "#fff",
// },
// },
// },
// 地图区域的样式设置
itemStyle: {
normal: {
borderColor: "#01f2d1",
borderWidth: 2,
areaColor: {
type: "radial",
x: 0.5,
y: 0.5,
r: 1,
colorStops: [
{
offset: 0,
color: "#0A445C", // % 处的颜色
},
{
offset: 1,
color: "#06768C", // 80% 处的颜色
},
],
global: false, // 缺省为 false
},
},
emphasis: {
areaColor: "rgba(6,118,140,1.0)",
borderColor: "#01f2d1",
borderWidth: 2,
color: "red",
},
},
data: customerBatteryCityData,
zlevel: 1,
},
// 柱状体的主干
{
type: "lines",
zlevel: 5,
effect: {
show: false,
// period: 4, //箭头指向速度，值越小速度越快
// trailLength: 0.02, //特效尾迹长度[0,1]值越大，尾迹越长重
// symbol: 'arrow', //箭头图标
// symbol: imgDatUrl,
symbolSize: 5, // 图标大小
},
lineStyle: {
width: 20, // 尾迹线条宽度
color: function (params) {
return params.data.color;
},
opacity: 0.6, // 尾迹线条透明度
curveness: 0, // 尾迹线条曲直度
},
label: {
show: 0,
position: "end",
formatter: "",
},
silent: true,
data: lineData(),
},
// 柱状体的顶部
{
type: "scatter",
coordinateSystem: "geo",
geoIndex: 0,
zlevel: 5,
label: {
show: true,
formatter: function (params) {
return `${params.data.number}${params.data.unit}`;
},
position: "top",
textStyle: {
color: "#fff",
},
},
symbol: "circle",
symbolSize: [20, 10],
itemStyle: {
color: function (params) {
return params.data.color;
},
opacity: 1,
},
silent: true,
data: scatterData(),
},
// 柱状体的底部
{
type: "scatter",
coordinateSystem: "geo",
geoIndex: 0,
zlevel: 4,
symbol: "circle",
symbolSize: [20, 10],
itemStyle: {
// color: '#F7AF21',
color: function (params) {
return params.data.color;
},
opacity: 1,
},
silent: true,
data: scatterData2(),
},
// 底部外框
{
type: "scatter",
coordinateSystem: "geo",
geoIndex: 0,
zlevel: 4,
label: {
show: false,
},
symbol: "circle",
symbolSize: [40, 20],
itemStyle: {
color: function (params) {
return {
type: "radial",
x: 0.5,
y: 0.5,
r: 0.5,
colorStops: [
{
offset: 0,
color: "rgb(22,255,255, 0)", // 0% 处的颜色
},
{
offset: 0.75,
color: "rgb(22,255,255, 0)", // 100% 处的颜色
},
{
offset: 0.751,
color: params.data.color, // 100% 处的颜色
},
{
offset: 1,
color: params.data.color, // 100% 处的颜色
},
],
global: false, // 缺省为 false
};
},
opacity: 1,
},
silent: true,
data: scatterData2(),
},
],
}),
myChart.on("georoam", function (params) {
var option = myChart.getOption(); //获得option对象
if (params.zoom != null && params.zoom != undefined) {
//捕捉到缩放时
option.geo[0].zoom = option.series[0].zoom; //下层geo的缩放等级跟着上层的geo一起改变
option.geo[0].center = option.series[0].center; //下层的geo的中心位置随着上层geo一起改变
} else {
//捕捉到拖曳时
option.geo[0].center = option.series[0].center; //下层的geo的中心位置随着上层geo一起改变
}
myChart.setOption(option); //设置option
})
);
}
);
// 动态计算柱形图的高度（定一个max）
function lineMaxHeight() {
const maxValue = Math.max(...dataList.map((item) => item.value));
return 0.1 / maxValue;
}
// 柱状体的主干
function lineData() {
return dataList.map((item) => {
return {
color: colorMap[item.name],
coords: [
geoCoordMap[item.name],
[
geoCoordMap[item.name][0],
geoCoordMap[item.name][1] + item.value * lineMaxHeight(),
],
],
};
});
}
// 柱状体的顶部
function scatterData() {
return dataList.map((item) => {
return {
name: item.name,
number: item.value,
unit: item.unit,
color: colorMap[item.name],
value: [
geoCoordMap[item.name][0],
geoCoordMap[item.name][1] + item.value * lineMaxHeight(),
],
};
});
}
// 柱状体的底部
function scatterData2() {
return dataList.map((item) => {
return {
color: colorMap[item.name],
name: item.name,
value: geoCoordMap[item.name],
};
});
}
},
1016
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
