518 lines
25 KiB
HTML
518 lines
25 KiB
HTML
|
<!DOCTYPE html>
|
|||
|
|
<html>
|
|||
|
|
<head>
|
|||
|
|
<meta charset="utf-8">
|
|||
|
|
<title>ECharts</title>
|
|||
|
|
<!-- 引入在线CDN echarts.js -->
|
|||
|
|
<!-- <script src="https://cdn.jsdelivr.net/npm/echarts@5.0.2/dist/echarts.js"></script> -->
|
|||
|
|
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
|
|||
|
|
<script src="https://cdn.jsdelivr.net/npm/echarts-gl/dist/echarts-gl.min.js"></script>
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
|
|||
|
|
<div id="main" style="width: 800px;height:600px;"></div>
|
|||
|
|
<script type="text/javascript">
|
|||
|
|
let airData = [
|
|||
|
|
{ name: '北京市', value: 39.92 },
|
|||
|
|
{ name: '天津市', value: 39.13 },
|
|||
|
|
{ name: '上海市', value: 31.22 },
|
|||
|
|
{ name: '重庆市', value: 66 },
|
|||
|
|
{ name: '河北省', value: 147 },
|
|||
|
|
{ name: '河南省', value: 113 },
|
|||
|
|
{ name: '云南省', value: 25.04 },
|
|||
|
|
{ name: '辽宁省', value: 50 },
|
|||
|
|
{ name: '黑龙江省', value: 114 },
|
|||
|
|
{ name: '湖南省', value: 175 },
|
|||
|
|
{ name: '安徽省', value: 117 },
|
|||
|
|
{ name: '山东省', value: 92 },
|
|||
|
|
{ name: '新疆维吾尔自治区', value: 84 },
|
|||
|
|
{ name: '江苏省', value: 67 },
|
|||
|
|
{ name: '浙江省', value: 84 },
|
|||
|
|
{ name: '江西省', value: 96 },
|
|||
|
|
{ name: '湖北省', value: 273 },
|
|||
|
|
{ name: '广西壮族自治区', value: 59 },
|
|||
|
|
{ name: '甘肃省', value: 99 },
|
|||
|
|
{ name: '山西省', value: 39 },
|
|||
|
|
{ name: '内蒙古自治区', value: 58 },
|
|||
|
|
{ name: '陕西省', value: 61 },
|
|||
|
|
{ name: '吉林省', value: 51 },
|
|||
|
|
{ name: '福建省', value: 29 },
|
|||
|
|
{ name: '贵州省', value: 71 },
|
|||
|
|
{ name: '广东省', value: 38 },
|
|||
|
|
{ name: '青海省', value: 57 },
|
|||
|
|
{ name: '西藏自治区', value: 24 },
|
|||
|
|
{ name: '四川省', value: 58 },
|
|||
|
|
{ name: '宁夏回族自治区', value: 52 },
|
|||
|
|
{ name: '海南省', value: 54 },
|
|||
|
|
{ name: '台湾省', value: 88 },
|
|||
|
|
{ name: '香港特别行政区', value: 66 },
|
|||
|
|
{ name: '澳门特别行政区', value: 77 },
|
|||
|
|
{ name: '南海诸岛', value: 55 }
|
|||
|
|
];
|
|||
|
|
let url = "https://geo.datav.aliyun.com/areas_v3/bound/440000_full.json";
|
|||
|
|
let url_boundary = "https://geo.datav.aliyun.com/areas_v3/bound/100000_boundary.json";
|
|||
|
|
let url1 = '/data/echart_map_json/china1.json';
|
|||
|
|
let url1_main = '/data/echart_map_json/main.json';
|
|||
|
|
let url1_three = '/data/echart_map_json/ss.json';
|
|||
|
|
let url1_boundary = '/data/echart_map_json/boundary1.json';
|
|||
|
|
let url1_single = '/data/echart_map_json/single.json';
|
|||
|
|
let promiseArr = [];
|
|||
|
|
promiseArr.push(fetch(url1).then(res=>res.json()))
|
|||
|
|
promiseArr.push(fetch(url1_single).then(res=>res.json()))
|
|||
|
|
Promise.allSettled(promiseArr).then((result)=>{
|
|||
|
|
console.log(result)
|
|||
|
|
|
|||
|
|
// 基于准备好的dom，初始化echarts实例
|
|||
|
|
var myChart = echarts.init(document.getElementById('main'));
|
|||
|
|
result[1].value.UTF8Encoding=false
|
|||
|
|
// result[1].value.features = result[1].value.features.filter(item=>item.properties.id!=='2')
|
|||
|
|
result[1].value.features[0].id = 1
|
|||
|
|
result[1].value.features[1].id = 2
|
|||
|
|
//在echarts中注册地图矢量数据
|
|||
|
|
echarts.registerMap('china1',result[0].value);
|
|||
|
|
echarts.registerMap('boundary1',result[1].value);
|
|||
|
|
//option定义
|
|||
|
|
let option3d = {
|
|||
|
|
tooltip: {
|
|||
|
|
show: false,
|
|||
|
|
formatter: (params) => {
|
|||
|
|
return `<div style="position:absolute;left:0;top:0;width:8px;height:8px;background-color:#FD9A5A;"></div>
|
|||
|
|
<div class='tips' style="padding:0 12px;">
|
|||
|
|
<h1 style='font-size:16px;'>${params.name}</h1>
|
|||
|
|
<p style="font-size:14px;"><span style="opacity:0.75">办理人数：</span>22人</p>
|
|||
|
|
<p style="font-size:14px;"><span style="opacity:0.75">待办人数：</span>22人</p>
|
|||
|
|
<p style="font-size:14px;"><span style="opacity:0.75">办结人数：</span>22人</p>
|
|||
|
|
</div>`;
|
|||
|
|
},
|
|||
|
|
borderColor: "#998484",
|
|||
|
|
borderWidth: 1,
|
|||
|
|
padding: [0, 0],
|
|||
|
|
backgroundColor: "#1B212B",
|
|||
|
|
borderRadius: 0,
|
|||
|
|
// textStyle: { color: "blue" },
|
|||
|
|
},
|
|||
|
|
visualMap: {
|
|||
|
|
show: true,
|
|||
|
|
min: 1, //指定 visualMapContinuous 组件的允许的最小值。
|
|||
|
|
max: 9, //指定 visualMapContinuous 组件的允许的最大值
|
|||
|
|
inRange: {
|
|||
|
|
color: ["#074b4f"],
|
|||
|
|
},
|
|||
|
|
calculable: true, //是否显示拖拽用的手柄（手柄能拖拽调整选中范围）。
|
|||
|
|
},
|
|||
|
|
series: [
|
|||
|
|
{
|
|||
|
|
name: "main",
|
|||
|
|
type: "map3D",
|
|||
|
|
map: 'china1', //地图类型。echarts-gl 中使用的地图类型同 geo 组件相同
|
|||
|
|
regionHeight: 2, //模型的高度
|
|||
|
|
boxWidth: 100, //三维地图在三维场景中的宽度
|
|||
|
|
//boxHeight:50,
|
|||
|
|
boxDepth: 65, //三维地图在三维场景中的深度
|
|||
|
|
// top: "10%",
|
|||
|
|
//left:'10%',
|
|||
|
|
// 配置为垂直渐变的背景
|
|||
|
|
environment: 'images/53bg.png',
|
|||
|
|
groundPlane:{
|
|||
|
|
show:false
|
|||
|
|
},
|
|||
|
|
label: {
|
|||
|
|
show: false, //是否显示标签。
|
|||
|
|
position: ["50%", "50%"],
|
|||
|
|
formatter: (params) => {
|
|||
|
|
params.name;
|
|||
|
|
},
|
|||
|
|
textStyle: {
|
|||
|
|
color: "rgba(255,255,255,0.65)", //地图初始化区域字体颜色
|
|||
|
|
fontSize: 16,
|
|||
|
|
opacity: 1,
|
|||
|
|
backgroundColor: "#1B212B ",
|
|||
|
|
borderColor: "#998484",
|
|||
|
|
borderWidth: 1,
|
|||
|
|
position: "insideTop",
|
|||
|
|
padding: [6, 8],
|
|||
|
|
borderRadius: 0,
|
|||
|
|
distanca: 20,
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
emphasis: {
|
|||
|
|
//对应的鼠标悬浮效果
|
|||
|
|
show: true,
|
|||
|
|
// textStyle: { color: "blue" }
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
itemStyle: {
|
|||
|
|
normal: {
|
|||
|
|
// 静态模式下显示的默认样式
|
|||
|
|
borderWidth: 1,
|
|||
|
|
borderColor: "#21cac7",
|
|||
|
|
color: "#0e838b",
|
|||
|
|
}, //阴影效果
|
|||
|
|
emphasis: {
|
|||
|
|
// 鼠标移上去的样式
|
|||
|
|
borderWidth: 1.6,
|
|||
|
|
borderColor: "#95FFFF",
|
|||
|
|
color: "#108f97",
|
|||
|
|
textStyle: {
|
|||
|
|
// color:'blue'
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
// data:[
|
|||
|
|
// {
|
|||
|
|
// name:'广东',
|
|||
|
|
// itemStyle:{
|
|||
|
|
// // 静态模式下显示的默认样式
|
|||
|
|
// borderWidth: 1.5,
|
|||
|
|
// borderColor: "#fff",
|
|||
|
|
// color: "#fff",
|
|||
|
|
// opacity :0.5
|
|||
|
|
// }
|
|||
|
|
// }
|
|||
|
|
// ],
|
|||
|
|
|
|||
|
|
viewControl: {
|
|||
|
|
center:[0,0,0],//视角中心点，旋转也会围绕这个中心点旋转，默认为[0,0,0]。
|
|||
|
|
//用于鼠标的旋转，缩放等视角控制。
|
|||
|
|
autoRotate: false, //是否开启视角绕物体的自动旋转查看
|
|||
|
|
distance: 70, //默认视角距离主体的距离，对于 globe 来说是距离地球表面的距离，对于 grid3D 和 geo3D 等其它组件来说是距离中心原点的距离。在 projection 为'perspective'的时候有效。
|
|||
|
|
alpha:45,//视角绕 x 轴，即上下旋转的角度。配合 beta 可以控制视角的方向。
|
|||
|
|
beta:0,//视角绕 y 轴，即左右旋转的角度。
|
|||
|
|
distance:80,//默认视角距离主体的距离,对于 globe 来说是距离地球表面的距离，对于 grid3D 和 geo3D 等其它组件来说是距离中心原点的距离。在 projection 为'perspective'的时候有效。
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
// {
|
|||
|
|
// name: "attach",
|
|||
|
|
// type: "map3D",
|
|||
|
|
// map: 'boundary', //地图类型。echarts-gl 中使用的地图类型同 geo 组件相同
|
|||
|
|
// regionHeight: 2, //模型的高度
|
|||
|
|
// boxWidth: 100, //三维地图在三维场景中的宽度
|
|||
|
|
// //boxHeight:50,
|
|||
|
|
// boxDepth: 65, //三维地图在三维场景中的深度
|
|||
|
|
// itemStyle: {
|
|||
|
|
// normal: {
|
|||
|
|
// // 静态模式下显示的默认样式
|
|||
|
|
// borderWidth: 1.6,
|
|||
|
|
// borderColor: "#21cac7",
|
|||
|
|
// color: "#0e838b",
|
|||
|
|
// }, //阴影效果
|
|||
|
|
// // emphasis: {
|
|||
|
|
// // // 鼠标移上去的样式
|
|||
|
|
// // borderWidth: 1.6,
|
|||
|
|
// // borderColor: "#95FFFF",
|
|||
|
|
// // color: "#108f97",
|
|||
|
|
// // textStyle: {
|
|||
|
|
// // // color:'blue'
|
|||
|
|
// // },
|
|||
|
|
// // },
|
|||
|
|
// },
|
|||
|
|
// }
|
|||
|
|
]
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 使用刚指定的配置项和数据显示图表。
|
|||
|
|
myChart.setOption(option3d);
|
|||
|
|
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
function drawCharts(){
|
|||
|
|
fetch(url1).then(function(response){
|
|||
|
|
return response.json();
|
|||
|
|
}).then(function(result){
|
|||
|
|
console.log(result);
|
|||
|
|
// 基于准备好的dom，初始化echarts实例
|
|||
|
|
var myChart = echarts.init(document.getElementById('main'));
|
|||
|
|
|
|||
|
|
//在echarts中注册地图矢量数据
|
|||
|
|
echarts.registerMap('china1',result);
|
|||
|
|
// 指定图表的配置项和数据
|
|||
|
|
// var option = {
|
|||
|
|
// //配置地理坐标系组件
|
|||
|
|
// geo:{
|
|||
|
|
// type: 'map',
|
|||
|
|
// map: 'china1',
|
|||
|
|
// roam: true, //设置允许缩放以及拖动的效果
|
|||
|
|
// label:{
|
|||
|
|
// show: false,
|
|||
|
|
// fontSize: 10
|
|||
|
|
// },
|
|||
|
|
// // zoom: 4, //初始化缩放比例
|
|||
|
|
// center: [108.948024,34.263161] //设置初始化中心点
|
|||
|
|
// },
|
|||
|
|
// series: [
|
|||
|
|
// {
|
|||
|
|
// data: airData,
|
|||
|
|
// geoIndex: 0, // 将空气质量的数据和第0个geo配置关联在一起
|
|||
|
|
// type: 'map'
|
|||
|
|
// }
|
|||
|
|
// ],
|
|||
|
|
// visualMap: {
|
|||
|
|
// min: 0,
|
|||
|
|
// max: 300,
|
|||
|
|
// inRange: {
|
|||
|
|
// symbolSize: [30, 100],
|
|||
|
|
// color: ['white', 'red'] // 控制颜色渐变的范围
|
|||
|
|
// },
|
|||
|
|
// calculable: true // 出现滑块
|
|||
|
|
// }
|
|||
|
|
// };
|
|||
|
|
var imgBase = 'http://127.0.0.1:5501/images/boundary_three.png'
|
|||
|
|
|
|||
|
|
// var option = {
|
|||
|
|
// //配置地理坐标系组件
|
|||
|
|
// geo: {
|
|||
|
|
// type: 'map',
|
|||
|
|
// map: 'china1',
|
|||
|
|
// roam: true, //设置允许缩放以及拖动的效果
|
|||
|
|
// label: {
|
|||
|
|
// show: false,
|
|||
|
|
// fontSize: 10
|
|||
|
|
// },
|
|||
|
|
// zoom: 4, //初始化缩放比例
|
|||
|
|
// center: [113.75, 23.04] //设置初始化中心点
|
|||
|
|
// },
|
|||
|
|
// series: [
|
|||
|
|
// {
|
|||
|
|
// data: airData,
|
|||
|
|
// geoIndex: 0, // 将空气质量的数据和第0个geo配置关联在一起
|
|||
|
|
// type: 'map'
|
|||
|
|
// }, {
|
|||
|
|
// // 配置散点的坐标数据
|
|||
|
|
// data: [ { name: '东莞', value: [113.75, 23.04] },],
|
|||
|
|
// type: 'scatter',
|
|||
|
|
// // 指明散点使用的坐标系统 geo的坐标系统，
|
|||
|
|
// // 可选值：'cartesian2d'、'polar'、'geo'、'bmap'
|
|||
|
|
// coordinateSystem: 'geo',
|
|||
|
|
// rippleEffect: {
|
|||
|
|
// color: '#ccc',//涟漪动画的颜色
|
|||
|
|
// scale: 3 // 设置涟漪动画的缩放比例
|
|||
|
|
// },
|
|||
|
|
// // symbolSize:[10,20],
|
|||
|
|
// // showEffectOn: 'emphasis',
|
|||
|
|
// symbol:"image://"+imgBase,
|
|||
|
|
// label:{
|
|||
|
|
// color: '#219ebc',
|
|||
|
|
// show: true,
|
|||
|
|
// formatter:function(row){
|
|||
|
|
// return row.name;
|
|||
|
|
// }
|
|||
|
|
// },
|
|||
|
|
// itemStyle:{
|
|||
|
|
// color: '#ccc'
|
|||
|
|
// }
|
|||
|
|
// }
|
|||
|
|
// ],
|
|||
|
|
// visualMap: {
|
|||
|
|
// min: 0,
|
|||
|
|
// max: 300,
|
|||
|
|
// inRange: {
|
|||
|
|
// symbolSize: [30, 100],
|
|||
|
|
// color: ['white', 'red'] // 控制颜色渐变的范围
|
|||
|
|
// },
|
|||
|
|
// calculable: true // 出现滑块
|
|||
|
|
// }
|
|||
|
|
// };
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
var optionsrc = {
|
|||
|
|
geo: {
|
|||
|
|
map: 'china1',
|
|||
|
|
roam: true,
|
|||
|
|
},
|
|||
|
|
series: [
|
|||
|
|
{
|
|||
|
|
name: 'pm2.5',
|
|||
|
|
type: 'scatter',
|
|||
|
|
coordinateSystem: 'geo',
|
|||
|
|
select:false,
|
|||
|
|
silent :true,
|
|||
|
|
data: [
|
|||
|
|
{
|
|||
|
|
name: 'test',
|
|||
|
|
value: [121.113747, 22.285694],
|
|||
|
|
symbol: 'image://http://192.168.4.109:5501/images/boundary_three.png',
|
|||
|
|
symbolSize: 100,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: 'test',
|
|||
|
|
value: [128.113747, 20.8],
|
|||
|
|
symbol: 'image://http://192.168.4.109:5501/images/boundary_attach.png',
|
|||
|
|
symbolSize: 65,
|
|||
|
|
}
|
|||
|
|
],
|
|||
|
|
|
|||
|
|
// encode: {
|
|||
|
|
// value: 2
|
|||
|
|
// },
|
|||
|
|
// emphasis: {
|
|||
|
|
// label: {
|
|||
|
|
// show: true
|
|||
|
|
// }
|
|||
|
|
// }
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
}
|
|||
|
|
let option = {
|
|||
|
|
|
|||
|
|
geo: {
|
|||
|
|
map: "china1",
|
|||
|
|
center: [105.194115019531, 35.582111640625],
|
|||
|
|
aspectScale: 0.75, //长宽比
|
|||
|
|
zoom:1.1,
|
|||
|
|
roam: false,
|
|||
|
|
itemStyle: {
|
|||
|
|
normal: {
|
|||
|
|
areaColor: "#013C62",
|
|||
|
|
shadowColor:"#01273F",
|
|||
|
|
shadowOffsetX:0,
|
|||
|
|
shadowOffsetY:10
|
|||
|
|
},
|
|||
|
|
emphasis: {
|
|||
|
|
label:{
|
|||
|
|
show:false
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
series: [
|
|||
|
|
{
|
|||
|
|
type: "map",
|
|||
|
|
map: "china1",
|
|||
|
|
center: [105.194115019531, 35.582111640625],
|
|||
|
|
zoom:1.1,
|
|||
|
|
// geoIndex: 1,
|
|||
|
|
aspectScale: 0.75, //长宽比
|
|||
|
|
roam: false,
|
|||
|
|
emphasis: {
|
|||
|
|
label:{
|
|||
|
|
show:false
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
itemStyle: {
|
|||
|
|
normal: {
|
|||
|
|
areaColor: "#013C62",
|
|||
|
|
borderColor: "#0A5E96",
|
|||
|
|
borderWidth: 2
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
//option定义
|
|||
|
|
let option3d = {
|
|||
|
|
tooltip: {
|
|||
|
|
show: false,
|
|||
|
|
formatter: (params) => {
|
|||
|
|
return `<div style="position:absolute;left:0;top:0;width:8px;height:8px;background-color:#FD9A5A;"></div>
|
|||
|
|
<div class='tips' style="padding:0 12px;">
|
|||
|
|
<h1 style='font-size:16px;'>${params.name}</h1>
|
|||
|
|
<p style="font-size:14px;"><span style="opacity:0.75">办理人数：</span>22人</p>
|
|||
|
|
<p style="font-size:14px;"><span style="opacity:0.75">待办人数：</span>22人</p>
|
|||
|
|
<p style="font-size:14px;"><span style="opacity:0.75">办结人数：</span>22人</p>
|
|||
|
|
</div>`;
|
|||
|
|
},
|
|||
|
|
borderColor: "#998484",
|
|||
|
|
borderWidth: 1,
|
|||
|
|
padding: [0, 0],
|
|||
|
|
backgroundColor: "#1B212B",
|
|||
|
|
borderRadius: 0,
|
|||
|
|
// textStyle: { color: "blue" },
|
|||
|
|
},
|
|||
|
|
visualMap: {
|
|||
|
|
show: true,
|
|||
|
|
min: 1, //指定 visualMapContinuous 组件的允许的最小值。
|
|||
|
|
max: 9, //指定 visualMapContinuous 组件的允许的最大值
|
|||
|
|
inRange: {
|
|||
|
|
color: ["#074b4f"],
|
|||
|
|
},
|
|||
|
|
calculable: true, //是否显示拖拽用的手柄（手柄能拖拽调整选中范围）。
|
|||
|
|
},
|
|||
|
|
series: {
|
|||
|
|
name: "浙江",
|
|||
|
|
type: "map3D",
|
|||
|
|
map: 'china1', //地图类型。echarts-gl 中使用的地图类型同 geo 组件相同
|
|||
|
|
regionHeight: 2, //模型的高度
|
|||
|
|
boxWidth: 100, //三维地图在三维场景中的宽度
|
|||
|
|
//boxHeight:50,
|
|||
|
|
boxDepth: 65, //三维地图在三维场景中的深度
|
|||
|
|
// top: "10%",
|
|||
|
|
//left:'10%',
|
|||
|
|
// 配置为垂直渐变的背景
|
|||
|
|
environment: 'images/53bg.png',
|
|||
|
|
groundPlane:{
|
|||
|
|
show:false
|
|||
|
|
},
|
|||
|
|
label: {
|
|||
|
|
show: false, //是否显示标签。
|
|||
|
|
position: ["50%", "50%"],
|
|||
|
|
formatter: (params) => {
|
|||
|
|
params.name;
|
|||
|
|
},
|
|||
|
|
textStyle: {
|
|||
|
|
color: "rgba(255,255,255,0.65)", //地图初始化区域字体颜色
|
|||
|
|
fontSize: 16,
|
|||
|
|
opacity: 1,
|
|||
|
|
backgroundColor: "#1B212B ",
|
|||
|
|
borderColor: "#998484",
|
|||
|
|
borderWidth: 1,
|
|||
|
|
position: "insideTop",
|
|||
|
|
padding: [6, 8],
|
|||
|
|
borderRadius: 0,
|
|||
|
|
distanca: 20,
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
emphasis: {
|
|||
|
|
//对应的鼠标悬浮效果
|
|||
|
|
show: true,
|
|||
|
|
// textStyle: { color: "blue" }
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
itemStyle: {
|
|||
|
|
normal: {
|
|||
|
|
// 静态模式下显示的默认样式
|
|||
|
|
borderWidth: 1,
|
|||
|
|
borderColor: "#21cac7",
|
|||
|
|
color: "#0e838b",
|
|||
|
|
}, //阴影效果
|
|||
|
|
emphasis: {
|
|||
|
|
// 鼠标移上去的样式
|
|||
|
|
borderWidth: 1.6,
|
|||
|
|
borderColor: "#95FFFF",
|
|||
|
|
color: "#108f97",
|
|||
|
|
textStyle: {
|
|||
|
|
// color:'blue'
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
data:[
|
|||
|
|
{
|
|||
|
|
name:'广东',
|
|||
|
|
itemStyle:{
|
|||
|
|
// 静态模式下显示的默认样式
|
|||
|
|
borderWidth: 1.5,
|
|||
|
|
borderColor: "#fff",
|
|||
|
|
color: "#fff",
|
|||
|
|
opacity :0.5
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
],
|
|||
|
|
|
|||
|
|
viewControl: {
|
|||
|
|
//用于鼠标的旋转，缩放等视角控制。
|
|||
|
|
autoRotate: false, //是否开启视角绕物体的自动旋转查看
|
|||
|
|
distance: 70, //默认视角距离主体的距离，对于 globe 来说是距离地球表面的距离，对于 grid3D 和 geo3D 等其它组件来说是距离中心原点的距离。在 projection 为'perspective'的时候有效。
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 使用刚指定的配置项和数据显示图表。
|
|||
|
|
myChart.setOption(option);
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
</script>
|
|||
|
|
</body>
|
|||
|
|
</html>
|