Skip to content

F
founder_vue
Commit f9788e7c by liuguorong93
Options

片区下钻数据

parent 6b89f2ef
Showing with 156 additions and 62 deletions
public/map2/china.json
......@@ -2,7 +2,7 @@
"type": "FeatureCollection",
"features": [
{
"code":"200",
"code": "200",
"type": "Feature",
"id": "710000",
"properties": {
......
src/views/dataJq/mapBox.vue
......@@ -66,7 +66,7 @@ export default {
currentInfo: {},
fileName: "china",
fileName: "",
myChart: null,
colorDatas: [
"rgb(255, 84, 84)",
......@@ -75,75 +75,165 @@ export default {
"rgb(49, 174, 255)",
],
log: ["china"],
provinces: [],
dataArr: [],
};
},
created() {
// this.provinces = city.provinceCode;
},
created() {},
mounted() {
this.drawEcharts();
this.initChinaMap();
},
methods: {
drawEcharts() {
initChinaMap() {
if (this.myChart) this.myChart.dispose();
this.loading = true;
$.getJSON(`/map2/${this.fileName}.json`, (data) => {
$.getJSON(`/map2/china.json`, (data) => {
if (data && data.features && data.features.length) {
let params;
if (this.fileName === "china") {
params = {
names: [
[
"黑龙江",
"吉林",
"辽宁",
"河北",
"山西",
"内蒙古",
"北京",
"天津",
],
[
"西藏",
"四川",
"云南",
"重庆",
"贵州",
"广西",
"广东",
"海南",
],
[
"新疆",
"青海",
"甘肃",
"宁夏",
"陕西",
"河南",
"湖北",
"湖南",
"江西",
"兵团",
],
["山东", "江苏", "安徽", "上海", "浙江", "福建"],
let params = {
names: [
[
"黑龙江",
"吉林",
"辽宁",
"河北",
"山西",
"内蒙古",
"北京",
"天津",
],
["山东", "江苏", "安徽", "上海", "浙江", "福建"],
[
"新疆",
"青海",
"甘肃",
"宁夏",
"陕西",
"河南",
"湖北",
"湖南",
"江西",
"兵团",
],
["西藏", "四川", "云南", "重庆", "贵州", "广西", "广东", "海南"],
],
properties: {
//自定义大区的名字，要和上面的大区省份一一对应
name: this.pianQuData,
cp: [
// 经纬度可以自己随意定义
[116.24, 42.54], // 沈阳
[120.28, 30.13], // 昆明
[93.2, 38.32], // 南京
[102.28, 30.13], // 南昌
],
},
};
this.mergeProvinces(data, params.names, params.properties);
this.$echarts.registerMap("china", data);
this.loading = false;
this.myChart = this.$echarts.init(
document.getElementById("myEacherForMap")
);
let options = {
dataRange: {
x: "left",
y: "bottom",
show: false,
splitList: [
{ start: 1, end: 10, label: this.pianQuData[0] },
{ start: 10, end: 20, label: this.pianQuData[1] },
{ start: 20, end: 30, label: this.pianQuData[2] },
{ start: 30, end: 40, label: this.pianQuData[3] },
],
properties: {
//自定义大区的名字，要和上面的大区省份一一对应
name: this.pianQuData,
cp: [
// 经纬度可以自己随意定义
[116.24, 42.54], // 沈阳
[120.28, 30.13], // 昆明
[93.2, 38.32], // 南京
[102.28, 30.13], // 南昌
color: ["#0254CE", "#0844A9", "#005FFF", "#0089FF"],
},
geo: {
map: "china",
roam: false,
zoom: 1.1,
show: true,
label: {
show: true,
color: "#fff",
},
itemStyle: {
areaColor: "#4575FF",
borderColor: "#51E5F2",
},
},
series: [
{
type: "map",
map: "china",
roam: false,
zoom: 1.1,
show: true,
showLegendSymbol: false,
label: {
show: true,
fontSize: "12",
color: " #9DCCFF",
},
itemStyle: {
areaColor: "#0153AA",
borderColor: "#389dff",
borderWidth: 0.8,
},
emphasis: {
label: {
show: false,
color: "yellow",
},
itemStyle: {
areaColor: "transparent",
shadowColor: "#389dff",
reaColor: "rgba(147, 235, 248, 0)",
},
},
animation: true,
data: [
{ name: this.pianQuData[0], value: 1 },
{ name: this.pianQuData[1], value: 11 },
{ name: this.pianQuData[2], value: 21 },
{ name: this.pianQuData[3], value: 31 },
],
},
};
this.mergeProvinces(data, params.names, params.properties);
}
],
};
this.myChart.setOption(options);
this.showBack = false;
this.myChart.on("click", async (param) => {
let curName = param.name;
if (curName === "沈阳片区") {
this.fileName = "shenyang_area";
}
if (curName === "南京片区") {
this.fileName = "nanjing_area";
}
if (curName === "南昌片区") {
this.fileName = "nanchang_area";
}
if (curName === "昆明片区") {
this.fileName = "kunming_area";
}
this.drawChindrenMap();
});
}
});
},
drawChindrenMap() {
if (this.myChart) this.myChart.dispose();
this.loading = true;
$.getJSON(`/map2/${this.fileName}.json`, (data) => {
if (data && data.features && data.features.length) {
this.$echarts.registerMap(this.fileName, data);
this.loading = false;
......@@ -165,7 +255,7 @@ export default {
color: ["#0254CE", "#0844A9", "#005FFF", "#0089FF"],
},
geo: {
map: "china",
map: this.fileName,
roam: false,
zoom: 1.1,
show: true,
......@@ -181,7 +271,7 @@ export default {
series: [
{
type: "map",
map: "china",
map: this.fileName,
roam: false,
zoom: 1.1,
show: true,
......@@ -222,6 +312,8 @@ export default {
};
this.myChart.setOption(options);
this.showBack = true;
}
});
},
......@@ -333,7 +425,9 @@ export default {
}
chinaJson.features = features;
},
goBack() {},
goBack() {
this.initChinaMap();
},
},
};
</script>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment