var myChart = echarts.init(document.getElementById('map'));
let data = [
// {
// name: "北京",
// value: [116.24, 39.55, 100]
// },
// {
// name: "深圳",
// value: [114.271522, 22.753644]
// },
// {
// name: "重庆",
// value: [106.54, 29.59]
// },
// {
// name: "浙江",
// value: [120.19, 30.26]
// },
// {
// name: "上海",
// value: [121.4648, 31.2891]
// },
]
let LableData = [
// {
// name: "北京",
// coords: [
// [116.24, 39.55, 100],
// [120.24, 46.55, 100]
// ], // 线条位置[开始位置,结束位置]
// value: [1021, 120]
// },
// {
// name: "深圳",
// coords: [
// [114.271522, 22.753644],
// [118.24, 18.55, 100]
// ], // 线条位置[开始位置,结束位置]
// value: [1021, 120]
// },
// {
// name: "重庆",
// coords: [
// [106.54, 29.59],
// [104.24, 35.55]
// ], // 线条位置[开始位置,结束位置]
// value: [1021, 120]
// },
// {
// name: "浙江",
// coords: [
// [120.19, 30.26],
// [125.24, 27.55, 100]
// ], // 线条位置[开始位置,结束位置]
// value: [1021, 120]
// },
// {
// name: "上海",
// coords: [
// [121.4648, 31.2891],
// [122.4648, 32.2891]
// ], // 线条位置[开始位置,结束位置]
// value: [1201, 60]
// },
];
option = {
/*backgroundColor: '#000f1e',*/
geo: {
map: 'china',
aspectScale: 0.85,
layoutCenter: ["50%", "50%"], //地图位置
layoutSize: '100%',
itemStyle: {
normal: {
shadowColor: '#276fce',
shadowOffsetX: 0,
shadowOffsetY: 15,
opacity: 0.5,
},
emphasis: {
areaColor: '#276fce',
}
},
regions: [
{
name: '南海诸岛',
itemStyle: {
areaColor: 'rgba(0, 10, 52, 1)',
borderColor: 'rgba(0, 10, 52, 1)',
normal: {
opacity: 0,
label: {
show: false,
color: "#009cc9",
}
},
},
label: {
show: false,
color: '#FFFFFF',
fontSize: 12,
},
}
],
},
series: [
// 常规地图
{
type: 'map',
mapType: 'china',
aspectScale: 0.85,
layoutCenter: ["50%", "50%"], //地图位置
layoutSize: '100%',
zoom: 1, //当前视角的缩放比例
// roam: true, //是否开启平游或缩放
scaleLimit: { //滚轮缩放的极限控制
min: 1,
max: 2
},
itemStyle: {
normal: {
areaColor: '#0c274b',
borderColor: '#1cccff',
borderWidth: 1.5
},
emphasis: {
areaColor: '#02102b',
label: {
color: "#fff"
}
}
},
},
// 区域散点图
{
type: 'effectScatter',
coordinateSystem: 'geo',
zlevel: 2,
symbolSize: 10,
rippleEffect: { //坐标点动画
period: 3,
scale: 5,
brushType: 'fill'
},
label: {
normal: {
show: true,
position: 'right',
formatter: '{b}',
color: '#b3e2f2',
fontWeight: "bold",
fontSize: 16
}
},
data: data,
itemStyle: { //坐标点颜色
normal: {
show: true,
color: '#ff8003',
shadowBlur: 20,
shadowColor: '#fff'
},
emphasis: {
areaColor: '#f00'
}
},
},
{
type: 'lines',
zlevel: 3,
symbol: 'circle',
symbolSize: [5, 5],
color: '#ff8003',
opacity: 1,
label: {
show: true,
padding: [10, 20],
color: '#fff',
backgroundColor: "#1a3961",
borderColor: '#aee9fb',
borderWidth: 1,
borderRadius: 6,
// formatter(params) {
// let arr = [params.name, "废水污染:" + params.value[1] + "家", "废气污染:" + params.value[0] + "家"];
// return arr.join("\n")
// },
textStyle: {
align: 'left',
lineHeight: 20,
}
/* normal: {
textStyle: {
color: '#fff',
fontSize: 9,
},
formatter (value){
return value.data.value[2]
},
}*/
},
lineStyle: {
type: 'solid',
color: '#fff',
width: 0.5,
opacity: 1,
},
data: LableData,
},
]
};
myChart.on('click', function(params) {
console.log(params);
});
myChart.setOption(option);
window.addEventListener("resize",function(){
myChart.resize();
});
}
eacher可视化3D地体
最新推荐文章于 2024-11-05 15:31:54 发布