<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- <script src="js/echarts.min.js"></script>-->
<!-- <script src="js/china.js"></script>-->
<script
type="text/javascript"
src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"
></script>
<script
type="text/javascript"
src="https://cdn.jsdelivr.net/npm/echarts/map/js/china.js"
></script>
<script src="js/axios-0.18.0.js"></script>
<script src="js/vue.js"></script>
</head>
<body>
<div id="main" style="width: 1500px;height:710px;margin: auto;"></div>
<script>
new Vue({
el:"#main",
data(){
return {
dataList: [
{name: "南海诸岛"},
{ename: "beijing", name: "北京" ,value:"1"},
{ename: "tianjin", name: "天津"},
{ename: "shanghai", name: "上海"},
{ename: "chongqing", name: "重庆",value:"1"},
{ename: "hebei", name: "河北"},
{ename: "henan", name: "河南"},
{ename: "yunnan", name: "云南"},
{ename: "liaoning", name: "辽宁"},
{ename: "heilongjiang", name: "黑龙江"},
{ename: "hunan", name: "湖南"},
{ename: "anhui", name: "安徽",value:"1"},
{ename: "shandong", name: "山东"},
{ename: "xinjiang", name: "新疆"},
{ename: "jiangsu", name: "江苏"},
{ename: "zhejiang", name: "浙江"},
{ename: "jiangxi", name: "江西"},
{ename: "hubei", name: "湖北"},
{ename: "guangxi", name: "广西"},
{ename: "gansu", name: "甘肃"},
{ename: "shanxi", name: "山西"},
{ename: "neimenggu", name: "内蒙古" },
{ename: "shanxi1", name: "陕西"},
{ename: "jilin", name: "吉林"},
{ename: "fujian", name: "福建"},
{ename: "guizhou", name: "贵州"},
{ename: "guangdong", name: "广东"},
{ename: "qinghai", name: "青海"},
{ename: "xizang", name: "西藏"},
{ename: "sichuan", name: "四川"},
{ename: "ningxia", name: "宁夏"},
{ename: "hainan", name: "海南"},
{name: "台湾"},
{ename: "xianggang", name: "香港"},
{ename: "aomen", name: "澳门"},
],
}
},
mounted(){
this.initEchart();
},
methods: {
initEchart() {
let dataList = this.dataList;
for (let i = 0; i < dataList.length; i++) {
if(dataList[i].value != "1")
//dataList[i].value = Math.ceil(Math.random() * 1000 - 1);
dataList[i].value = 0;
}
const _this = this;
var myChart = echarts.init(document.getElementById("main"));
var option = {
title: {
text: "全国地铁展示图",
left: "center",
top: "top",
textStyle: {
fontSize: 30,
color:'rgba(34, 114, 225, 1)',
fontStyle : 'italic',
textBorderColor:'rgba(22, 225, 38, 1)',
textBorderWidth:1,
textShadowColor: "rgba(221, 32, 126, 1)",
textShadowBlur: 4.5
}
},
tooltip: {
//数据格式化
formatter: function (params, callback) {
return (
params.seriesName + "<br />" + params.name + "：" + params.value
);
},
},
visualMap: {
min: 0,
max: 1,
left: "left",
top: "bottom",
text: ["高", "低"], //取值范围的文字
inRange: {
color: ["#e0ffff", "blue"], //取值范围的颜色
//color: ["#91c291", "blue"], //取值范围的颜色
},
show: true, //图注
},
geo: {
map: "china", //引入地图数据
roam: true, //不开启缩放和平移
zoom: 1, //视角缩放比例
label: {
normal: {
show: true,
fontSize: "10",
color: "rgba(0,0,0,0.7)",
},
},
//project: (point) => [point[0] / 180 * Math.PI, -Math.log(Math.tan((Math.PI / 2 + point[1] / 180 * Math.PI) / 2))],
itemStyle: {
normal: {
borderColor: "rgba(0, 0, 0, 0.2)",
//borderColor: "rgba(210,18,18,0.2)",
},
color:"rgb(123,255,134)",
areaColor:"rgb(7,188,241)",
emphasis: { //高亮的显示设置
areaColor: "skyblue", //鼠标选择区域颜色
shadowOffsetX: 0,
shadowOffsetY: 0,
shadowBlur: 20,
borderWidth: 0,
//shadowColor: "rgba(0, 0, 0, 0.5)",
shadowColor: "rgba(5,17,255,0.5)",
},
},
},
// 鼠标悬浮提示框
series: [
{
name: "省份",
type: "map",
geoIndex: 0,
data: dataList,
},
],
};
myChart.setOption(option);
myChart.on("click", function (params) {
// if (!params.data.ename) {
// alert('暂无' + params.name + '地图数据');
// return;
// }
// _this.$router.push({
// path: "/map3",
// query: { provinceName: params.data.ename, province: params.name },
// });
if(params.data.value!=0)
{
//location.href = "http://localhost:8080/subway/subway.html";
window.location.href = encodeURI('http://localhost:8080/subway/subway.html?city='+params.name);
return;
}
alert('暂无' + params.name + '地图数据');
});
},
}
})
</script>
</body>
</html>
浙公网安备 33010602011771号