Skip to content

F
founder_vue
Commit 3ed0824a by liuguorong93
Options

Merge branch 'dev_gabjq_dev2' into dev_gabjq

parents b0886af6 ed1952c8
Showing with 1030 additions and 507 deletions
package.json
...@@ -11,7 +11,7 @@ ...@@ -11,7 +11,7 @@
"animate.css": "^4.1.1", "animate.css": "^4.1.1",
"core-js": "^3.6.5", "core-js": "^3.6.5",
"driver.js": "^0.9.8", "driver.js": "^0.9.8",
"echarts": "^4.9.0", "echarts": "^5.4.1",
"element-ui": "^2.4.5", "element-ui": "^2.4.5",
"file-saver": "^2.0.5", "file-saver": "^2.0.5",
"jquery": "^3.6.0", "jquery": "^3.6.0",
......
src/api/menuDataApi/sjfxApi.js
...@@ -5,7 +5,7 @@ export let baseUrl = '/api' ...@@ -5,7 +5,7 @@ export let baseUrl = '/api'
export const getDataAnalysis = params => export const getDataAnalysis = params =>
postJson(`${baseUrl}/policeDogScreen/dataAnalysis`, params) postJson(`${baseUrl}/policeDogScreen/dataAnalysis`, params)
// 数据分析--本年度全国警犬统计 // 数据分析--全国警犬统计
export const getqgDogCount = params => export const getqgDogCount = params =>
postJson(`${baseUrl}/homePage/getqgDogCount`, params) postJson(`${baseUrl}/homePage/getqgDogCount`, params)
......
src/main.js
...@@ -38,7 +38,7 @@ Vue.prototype.$driver = new Driver({ ...@@ -38,7 +38,7 @@ Vue.prototype.$driver = new Driver({
import Nsloading from "./components/Loading.vue"; import Nsloading from "./components/Loading.vue";
Vue.prototype.$store = store; Vue.prototype.$store = store;
//引入echarts //引入echarts
import echarts from 'echarts' import * as echarts from 'echarts'
Vue.prototype.$echarts = echarts Vue.prototype.$echarts = echarts
const LoadingCons = Vue.extend(Nsloading); const LoadingCons = Vue.extend(Nsloading);
// 常用工具函数 // 常用工具函数
......
src/router/modules/index.js
...@@ -20,15 +20,15 @@ export default [ ...@@ -20,15 +20,15 @@ export default [
}, },
component: () => import('@/views/login.vue') component: () => import('@/views/login.vue')
}, },
{ // {
path: '/Home', // path: '/Home',
name: 'Home', // name: 'Home',
meta: { // meta: {
title: '工作桌面', // title: '工作桌面',
auth: '5' // auth: '5'
}, // },
component: () => import('@/views/Home.vue') // component: () => import('@/views/Home.vue')
}, // },
{ {
path: '/dataV', path: '/dataV',
name: 'dataV', name: 'dataV',
......
src/utils/cityData.js
This source diff could not be displayed because it is too large. You can view the blob instead.
src/views/Home.vue
<template> <template>
<div id="dataVId"> <div id="dataVId">
<el-container class="home-page" direction="vertical"> <el-container
class="home-page"
direction="vertical"
>
<!-- 头 背景 --> <!-- 头 背景 -->
<div class="header"> <div class="header">
<div class="header-title"> <div class="header-title">
<img class="header-icon" :src="iconurl" /> <img
class="header-icon"
:src="iconurl"
/>
<div class="header-font">全国警犬态势分析</div> <div class="header-font">全国警犬态势分析</div>
</div> </div>
<div <div
...@@ -30,13 +36,19 @@ ...@@ -30,13 +36,19 @@
<div class="border"> <div class="border">
<!-- 头像--> <!-- 头像-->
<div class="profile"> <div class="profile">
<img class="img" :src="profileurl" /> <img
class="img"
:src="profileurl"
/>
</div> </div>
</div> </div>
<!-- 总数统计--> <!-- 总数统计-->
<div class="count"> <div class="count">
<div class="title">全国警犬数</div> <div class="title">全国警犬数</div>
<img :src="titleiconurl" class="img" /> <img
:src="titleiconurl"
class="img"
/>
<div class="font">{{ allCount }}</div> <div class="font">{{ allCount }}</div>
</div> </div>
</div> </div>
...@@ -44,17 +56,26 @@ ...@@ -44,17 +56,26 @@
<div class="father-count"> <div class="father-count">
<!-- 标题--> <!-- 标题-->
<div class="all-title"> <div class="all-title">
<img class="img" :src="alltitleurl" /> <img
class="img"
:src="alltitleurl"
/>
<div class="font">全国种犬数</div> <div class="font">全国种犬数</div>
</div> </div>
<!-- 种犬数据区--> <!-- 种犬数据区-->
<div class="count-data" id="cgzqs"></div> <div
class="count-data"
id="cgzqs"
></div>
</div> </div>
<!-- 全国工作犬数--> <!-- 全国工作犬数-->
<div class="work-count"> <div class="work-count">
<!-- 标题--> <!-- 标题-->
<div class="all-title"> <div class="all-title">
<img class="img" :src="alltitleurl" /> <img
class="img"
:src="alltitleurl"
/>
<div class="font">全国工作犬数</div> <div class="font">全国工作犬数</div>
</div> </div>
<!-- 工作犬数据区--> <!-- 工作犬数据区-->
...@@ -64,9 +85,17 @@ ...@@ -64,9 +85,17 @@
<span class="zj">总计</span> <span class="zj">总计</span>
<span class="zjNum">{{ gzqTotal }}</span> <span class="zjNum">{{ gzqTotal }}</span>
</div> </div>
<div class="list" v-for="item in dogList" :key="item.id"> <div
class="list"
v-for="item in dogList"
:key="item.id"
>
<div> <div>
<img :src="Icon" alt="" class="listicon" /> <img
:src="Icon"
alt=""
class="listicon"
/>
<span class="listdog">{{ item.name }}</span> <span class="listdog">{{ item.name }}</span>
</div> </div>
<span class="listNum">{{ item.counts }}</span> <span class="listNum">{{ item.counts }}</span>
...@@ -77,28 +106,50 @@ ...@@ -77,28 +106,50 @@
</div> </div>
<!-- 地图区 --> <!-- 地图区 -->
<div class="center"> <div class="center">
<div id="mask" class="mask" style="display: none"></div> <div
<div id="loading" class="loading" style="display: none"> id="mask"
class="mask"
style="display: none"
></div>
<div
id="loading"
class="loading"
style="display: none"
>
<div class="loading-icon"> <div class="loading-icon">
<div class="loading-cut"> <div class="loading-cut">
<div class="loading-donut"></div> <div class="loading-donut"></div>
</div> </div>
</div> </div>
<div id="loading-text" class="loading-text">加载中……</div> <div
id="loading-text"
class="loading-text"
>加载中……</div>
</div> </div>
<!-- 圆环--> <!-- 圆环-->
<div class="ring-bg"></div> <div class="ring-bg"></div>
<!-- 地图--> <!-- 地图-->
<div class="map" id="map"></div> <div
class="map"
id="map"
></div>
<!--map下区分犬种 --> <!--map下区分犬种 -->
<div class="qf"> <div class="qf">
<div class="zq"> <div class="zq">
<img class="icon" :src="zqIcon" alt="" /> <img
class="icon"
:src="zqIcon"
alt=""
/>
<span class="dog">种犬</span> <span class="dog">种犬</span>
</div> </div>
<div class="gzq"> <div class="gzq">
<img class="icon" :src="gzqIcon" alt="" /> <img
class="icon"
:src="gzqIcon"
alt=""
/>
<span class="dog">工作犬</span> <span class="dog">工作犬</span>
</div> </div>
</div> </div>
...@@ -163,8 +214,14 @@ ...@@ -163,8 +214,14 @@
> >
</el-date-picker> </el-date-picker>
<!-- 搜索按钮--> <!-- 搜索按钮-->
<div class="search-btn" @click="search"> <div
<img :src="searchbtnurl" class="img" /> class="search-btn"
@click="search"
>
<img
:src="searchbtnurl"
class="img"
/>
</div> </div>
</div> </div>
...@@ -176,13 +233,22 @@ ...@@ -176,13 +233,22 @@
</div> </div>
<!-- 标题--> <!-- 标题-->
<div class="all-title"> <div class="all-title">
<img class="img" :src="alltitleurl" /> <img
class="img"
:src="alltitleurl"
/>
<div class="font">警犬出勤类型</div> <div class="font">警犬出勤类型</div>
</div> </div>
<div class="out" id="jqcqlx"></div> <div
class="out"
id="jqcqlx"
></div>
<!-- 标题--> <!-- 标题-->
<div class="all-title"> <div class="all-title">
<img class="img" :src="alltitleurl" /> <img
class="img"
:src="alltitleurl"
/>
<div class="font">全国警犬出勤数top10</div> <div class="font">全国警犬出勤数top10</div>
</div> </div>
<div class="top10"> <div class="top10">
...@@ -192,7 +258,11 @@ ...@@ -192,7 +258,11 @@
<span class="hfont hfont2">出勤次数</span> <span class="hfont hfont2">出勤次数</span>
<!-- <span class="hfont hfont3">行政区分</span> --> <!-- <span class="hfont hfont3">行政区分</span> -->
</div> </div>
<div class="Pro" v-for="(item, idx) in top10List" :key="idx"> <div
class="Pro"
v-for="(item, idx) in top10List"
:key="idx"
>
<div class="idx"> <div class="idx">
{{ item.administrative }} {{ item.administrative }}
</div> </div>
...@@ -233,9 +303,9 @@ ...@@ -233,9 +303,9 @@
</template> </template>
<script> <script>
import "echarts/map/js/china.js"; // import "echarts/map/js/china.js";
import "echarts/map/js/province/guangdong"; // import "echarts/map/js/province/guangdong";
import "echarts/map/js/province/heilongjiang"; // import "echarts/map/js/province/heilongjiang";
import $ from "jquery"; import $ from "jquery";
// import '../api/zgxjxy.js' // import '../api/zgxjxy.js'
// import "echarts/map/js/zgxjxy" // import "echarts/map/js/zgxjxy"
......
src/views/dataJq/dataV.vue
...@@ -25,7 +25,8 @@ ...@@ -25,7 +25,8 @@
<mapCount :qzCount="qzCount"></mapCount> <mapCount :qzCount="qzCount"></mapCount>
</div> </div>
<div> <div>
<mapBox></mapBox> <!-- <mapBox></mapBox> -->
<mapBoxForBingTu></mapBoxForBingTu>
</div> </div>
</div> </div>
<div class="jqBoxS_con_rightCon"> <div class="jqBoxS_con_rightCon">
...@@ -35,7 +36,10 @@ ...@@ -35,7 +36,10 @@
</div> </div>
<!-- 工作犬专业方向统计 --> <!-- 工作犬专业方向统计 -->
<div style="margin-top: 20px"> <div style="margin-top: 20px">
<dogMajor :qzCount="qzCount"></dogMajor> <dogMajor
:qzCount="qzCount"
v-if="qzCount.major"
></dogMajor>
</div> </div>
</div> </div>
</div> </div>
...@@ -60,7 +64,8 @@ import dogMajor from "./dogMajor.vue"; ...@@ -60,7 +64,8 @@ import dogMajor from "./dogMajor.vue";
// 中间内容 // 中间内容
import mapCount from "./mapCount.vue"; import mapCount from "./mapCount.vue";
// 地图 // 地图
import mapBox from "./mapBox.vue"; // import mapBox from "./mapBox.vue";
import mapBoxForBingTu from "./mapBoxForBingTu.vue";
import { postRequest } from "@/api/dogView.js"; import { postRequest } from "@/api/dogView.js";
export default { export default {
components: { components: {
...@@ -71,7 +76,8 @@ export default { ...@@ -71,7 +76,8 @@ export default {
qgPhTop, qgPhTop,
dogMajor, dogMajor,
mapCount, mapCount,
mapBox, // mapBox,
mapBoxForBingTu,
}, },
data() { data() {
return { return {
......
src/views/dataJq/dogCount.vue
...@@ -61,63 +61,57 @@ export default { ...@@ -61,63 +61,57 @@ export default {
name: "h", name: "h",
value: 5, value: 5,
itemStyle: { itemStyle: {
normal: { //颜色渐变
//颜色渐变 color: new this.$echarts.graphic.LinearGradient(
color: new this.$echarts.graphic.LinearGradient( 1,
1, 1,
1, 1,
1, 0, //(上-下 渐变)
0, //(上-下 渐变)
[ [
{ offset: 0, color: "#323947" }, { offset: 0, color: "#323947" },
{ offset: 0.5, color: "#6f6853" }, { offset: 0.5, color: "#6f6853" },
{ offset: 1, color: "#ffc64e" }, { offset: 1, color: "#ffc64e" },
] ]
), ),
},
}, },
}, },
{ {
name: "x", name: "x",
value: 5, value: 5,
itemStyle: { itemStyle: {
normal: { //颜色渐变
//颜色渐变 color: new this.$echarts.graphic.LinearGradient(
color: new this.$echarts.graphic.LinearGradient( 0,
0, 0,
0, 1,
1, 0, //(上-下 渐变)
0, //(上-下 渐变)
[ [
{ offset: 0, color: "#3c354a" }, { offset: 0, color: "#3c354a" },
{ offset: 0.5, color: "#9e5856" }, { offset: 0.5, color: "#9e5856" },
{ offset: 1, color: "#fa654f" }, { offset: 1, color: "#fa654f" },
] ]
), ),
},
}, },
}, },
{ {
name: "y", name: "y",
value: 5, value: 5,
itemStyle: { itemStyle: {
normal: { //颜色渐变
//颜色渐变 color: new this.$echarts.graphic.LinearGradient(
color: new this.$echarts.graphic.LinearGradient( 0,
0, 0,
0, 0,
0, 1, //(上-下 渐变)
1, //(上-下 渐变)
[ [
{ offset: 0, color: "#243e5e" }, { offset: 0, color: "#243e5e" },
{ offset: 0.5, color: "#3f759e" }, { offset: 0.5, color: "#3f759e" },
{ offset: 1, color: "#4db7f8" }, { offset: 1, color: "#4db7f8" },
] ]
), ),
},
}, },
}, },
]; ];
......
src/views/dataJq/dogMajor.vue
...@@ -13,7 +13,6 @@ ...@@ -13,7 +13,6 @@
</template> </template>
<script> <script>
import echarts from "echarts";
export default { export default {
props: { props: {
qzCount: { qzCount: {
...@@ -23,128 +22,106 @@ export default { ...@@ -23,128 +22,106 @@ export default {
}, },
data() { data() {
return { return {
offsetZero: [ myChart: null,
"rgba(78, 187, 255, 1)",
"rgba(241, 166, 54, 1)", colorDatas: [
"rgba(255, 102, 78, 1)", "#5DECE8",
"rgba(46, 223, 209, 1)", "#F57B92",
"rgba(255, 172, 39, 1)", "#F58B4E",
], "#FBDD62",
offsetOne: [ "#A29BF0",
"rgba(134, 223, 255, 0.05)", "#FFEC97",
"rgba(241, 166, 54, 0.05)", "#398DDB",
"rgba(255, 102, 78, 0.05)", "#3EBEC2",
"rgba(46, 223, 209, 0.05)", "#5D52D6",
"rgba(255, 172, 39, 0.05)", "#1D51D8",
"#B52AB5",
"#6EF9AA",
"#3BC568",
"#F25555",
"#B4FB62",
"#FFBB01",
], ],
seriesDatas: [],
}; };
}, },
mounted() {
this.getData();
},
methods: { methods: {
xyrzyRender(_name, _value) { getData() {
// console.log("_name, _value", _name, _value); for (let key in this.qzCount.major) {
//案件性质发案分析 this.seriesDatas.push({
// debugger; name: key,
// 基于准备好的dom，初始化echarts实例 value: this.qzCount.major[key],
let myChart = this.$echarts.init(document.getElementById("dogMajors")); });
// 绘制图表 }
myChart.setOption({ setTimeout(() => {
// color: ["#4db7f8", "#fa654f", "#ffc64e"], this.drawEcharts();
xAxis: { }, 1);
type: "category", },
data: _name, drawEcharts() {
axisLabel: { if (this.myChart) this.myChart.dispose();
textStyle: { this.myChart = this.$echarts.init(document.getElementById("dogMajors"));
color: "#B8BDC6",
fontSize: "14px", let options = {
}, color: this.colorDatas,
show: true, tooltip: {
interval: 0, trigger: "item",
// rotate: '-60px', backgroundColor: "#FFFFFF",
margin: 6, padding: [12, 8],
}, extraCssText:
axisLine: { "box-shadow: 0px 8px 24px -8px rgba(0,0,0,0.08), 0px 16px 24px 0px rgba(0,0,0,0.08), 0px 8px 24px 0px rgba(0,0,0,0.08);",
lineStyle: { textStyle: {
color: "#2C4E86", color: "#242424",
}, fontSize: 12,
}, },
}, },
yAxis: { legend: {
type: "value", type: "scroll",
splitLine: { orient: "horizontal",
show: true, left: "center",
lineStyle: { align: "left",
type: "dashed", bottom: 30,
color: "#2C4E86", itemWidth: 10,
}, itemHeight: 10,
}, itemGap: 10,
axisLine: { textStyle: {
show: false, fontSize: 12,
color: "#fff",
fontFamily: "Microsoft YaHei",
}, },
axisLabel: { width: 250,
textStyle: { pageIconColor: "#fff",
color: "#d7e7ff00", pageIconInactiveColor: "#fff",
}, pageTextStyle: {
color: "#fff",
}, },
}, },
series: [ series: [
{ {
barWidth: 24, name: "工作犬专业方向统计",
data: _value, type: "pie",
type: "bar", radius: "60%",
center: ["50%", "42%"],
label: {
show: false,
},
emphasis: {
scale: false,
},
itemStyle: { itemStyle: {
normal: { borderColor: "#fff",
label: { borderWidth: 2,
formatter: "{c}",
show: true,
position: "top",
textStyle: {
fontWeight: "bolder",
fontSize: "12",
color: "#fff",
},
},
},
}, },
data: this.seriesDatas,
}, },
], ],
}); };
myChart.resize({ this.myChart.setOption(options);
width: $("#dogMajors").width(),
height: $("#dogMajors").height(),
});
myChart.off("click");
myChart.on("click", function (params) {});
}, },
}, },
mounted() {
setTimeout(() => {
let _name = [],
_value = [];
let index = 0;
for (let item in this.qzCount.major) {
_name.push(item);
_value.push({
name: item,
value: this.qzCount.major[item],
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: this.offsetZero[index],
},
{
offset: 1,
color: this.offsetOne[index],
},
]),
},
});
index++;
}
this.xyrzyRender(_name, _value);
}, 1000);
},
}; };
</script> </script>
......
src/views/dataJq/dogPh.vue
...@@ -51,14 +51,25 @@ export default { ...@@ -51,14 +51,25 @@ export default {
const colorList = ["#4D88FE", "#50CCCB", "#FFBF3C"]; const colorList = ["#4D88FE", "#50CCCB", "#FFBF3C"];
let option = { let option = {
tooltip: { tooltip: {
trigger: "item", // item、axis、none trigger: "item",
backgroundColor: "#FFFFFF",
padding: [12, 8],
extraCssText:
"box-shadow: 0px 8px 24px -8px rgba(0,0,0,0.08), 0px 16px 24px 0px rgba(0,0,0,0.08), 0px 8px 24px 0px rgba(0,0,0,0.08);",
textStyle: {
color: "#242424",
fontSize: 12,
},
}, },
legend: { legend: {
bottom: 10, bottom: 10,
itemGap: 20, itemWidth: 10,
itemWidth: 14, itemHeight: 10,
itemGap: 10,
textStyle: { textStyle: {
color: "#f7fcff", fontSize: 12,
color: "#fff",
fontFamily: "Microsoft YaHei",
}, },
}, },
series: [ series: [
...@@ -71,12 +82,10 @@ export default { ...@@ -71,12 +82,10 @@ export default {
show: false, show: false,
}, },
itemStyle: { itemStyle: {
normal: { borderColor: "#fff",
borderColor: "#fff", borderWidth: 2,
borderWidth: 2, color: function (params) {
color: function (params) { return colorList[params.dataIndex];
return colorList[params.dataIndex];
},
}, },
}, },
data: this.seriesDatas, data: this.seriesDatas,
......
src/views/dataJq/mapBox.vue
...@@ -23,7 +23,7 @@ ...@@ -23,7 +23,7 @@
// require("echarts/lib/chart/map"); // require("echarts/lib/chart/map");
import * as city from "@/utils/cityData.js"; import * as city from "@/utils/cityData.js";
import $ from "jquery"; import $ from "jquery";
import "echarts/map/js/china.js"; // import "echarts/map/js/china.js";
import { jsonRequest } from "@/api/dogView.js"; import { jsonRequest } from "@/api/dogView.js";
export default { export default {
......
src/views/dataJq/mapBoxForBingTu.vue 0 → 100644
<template>
<div
style="position: relative"
v-loading="loading"
element-loading-text="拼命加载中"
element-loading-spinner="el-icon-loading"
element-loading-background="rgba(0, 0, 0, 0.8)"
>
<!-- 回退 -->
<div
id="on-back"
class="back"
v-show="showBack"
@click="goBack"
>回退</div>
<div
id="myEacherForMap"
style="width:66.08333rem;height: 50.3333rem"
></div>
</div>
</template>
<script>
import * as city from "@/utils/cityData.js";
import { jsonRequest } from "@/api/dogView.js";
export default {
data() {
return {
showBack: false,
loading: false,
fileName: "china",
myChart: null,
colorDatas: [
"rgb(255, 84, 84)",
"rgb(255, 158, 84)",
"rgb(49, 255, 162)",
"rgb(49, 174, 255)",
],
options: {
geo: {
map: "",
aspectScale: 0.75,
roam: true,
zoom: 1.1,
itemStyle: {
areaColor: "#1b8cff",
color: "#fff",
borderColor: "#fff",
borderWidth: 0.4,
borderType: "solid",
// shadowBlur: 10,
// shadowColor: 'transparent',//'#0c3662',
// shadowOffsetX: 10,
// shadowOffsetY: 3,
opacity: 1,
},
label: {
show: true,
color: "#fff",
align: "center",
verticalAlign: "middle",
},
emphasis: {
label: {
show: true,
color: "#fff",
},
itemStyle: {
areaColor: "#0c3662",
},
},
z: 3,
},
series: [],
},
log: ["china"],
provinces: [],
dataArr: [],
};
},
created() {
this.provinces = city.provinceCode;
},
mounted() {
this.getDatas();
},
methods: {
getMapData(e) {
let arr = [];
return new Promise((resolve) => {
jsonRequest("/homePage/getQgMapNum", {
unitcode: e ? e + "000000" : "",
}).then((res) => {
if (e == undefined || e == "undefined") {
resolve(res);
} else {
for (let i = 0; i < res.data.rows.length; i++) {
if (res.data.rows[i].dognum != 0) {
arr.push(res.data.rows[i]);
}
}
res.data.rows = arr;
resolve(res);
}
});
});
},
drawEcharts() {
if (this.myChart) this.myChart.dispose();
this.loading = true;
$.getJSON(`/map/${this.fileName}.json`, (data) => {
if (data && data.features && data.features.length) {
this.loading = false;
this.$echarts.registerMap(this.fileName, data);
this.myChart = this.$echarts.init(
document.getElementById("myEacherForMap")
);
this.options.series = [];
this.options.geo.map = this.fileName;
let levelFlag = "1";
if (this.fileName === "china") {
if (this.options.color) delete this.options.color;
if (this.options.tooltip) delete this.options.tooltip;
if (this.options.legend) delete this.options.legend;
this.options.series.push({
type: "scatter",
coordinateSystem: "geo",
data: this.dataArr,
roam: true,
zoom: 1.1,
z: 4,
label: {
show: true,
color: "#333333",
width: 13,
height: 30,
align: "left",
fontSize: 16,
fontWeight: "600",
fontFamily: "sans-serif",
padding: [2, 50, 3, 40],
lineHeight: 30,
backgroundColor: {
image: require("@/assets/img/show-god.png"),
},
formatter(e) {
return `${e.data.count}`;
},
},
itemStyle: {
color: "rgba(0,0,0,0)",
opacity: 1,
},
});
levelFlag = "1";
} else {
if (this.dataArr && this.dataArr.length) {
this.options.color = this.colorDatas;
this.options.tooltip = {
trigger: "item",
backgroundColor: "#FFFFFF",
padding: [12, 8],
extraCssText:
"box-shadow: 0px 8px 24px -8px rgba(0,0,0,0.08), 0px 16px 24px 0px rgba(0,0,0,0.08), 0px 8px 24px 0px rgba(0,0,0,0.08);",
textStyle: {
color: "#242424",
fontSize: 12,
},
};
this.options.legend = {
orient: "vertical",
left: 0,
bottom: 20,
itemWidth: 10,
itemHeight: 10,
itemGap: 15,
textStyle: {
fontSize: 12,
color: "#FFFFFF",
fontFamily: "Microsoft YaHei",
},
data: ["一级工作犬", "二级工作犬", "三级工作犬", "普通工作犬"],
};
this.dataArr.forEach((itemArr) => {
this.options.series.push({
type: "pie",
coordinateSystem: "geo",
label: {
show: true,
color: "#000",
fontSize: 12,
fontFamily: "Microsoft YaHei",
formatter: (params) => {
return params.value + "头";
},
},
labelLine: {
show: true,
},
z: 4,
animationDuration: 0,
radius: 25,
center: [itemArr.value[0], itemArr.value[1]],
data: [
{
name: "一级工作犬",
value: itemArr.dognum1,
},
{
name: "二级工作犬",
value: itemArr.dognum2,
},
{
name: "三级工作犬",
value: itemArr.dognum3,
},
{
name: "普通工作犬",
value: itemArr.dognum4,
},
],
});
});
levelFlag = this.dataArr[0].lev;
}
}
this.myChart.setOption(this.options);
this.myChart.on("click", async (param) => {
if (param.componentType !== "geo" || levelFlag === "3") return;
// this.loading = true;
for (let i = 0; i < this.provinces.length; i++) {
if (this.provinces[i].name.indexOf(param.name) != -1) {
let res = await this.getMapData(this.provinces[i].key);
if (
res.code === 200 &&
res.success &&
res.data &&
res.data.rows &&
res.data.rows.length
) {
let e = this.provinces[i].key;
if (e === "china") {
this.showBack = false;
} else {
this.showBack = true;
}
this.log.push(e);
this.fileName = e;
this.getDataArr(res.data.rows);
this.drawEcharts();
} else {
this.$message.error("该区域没有数据，不支持地图下钻！");
this.loading = false;
}
}
}
});
}
});
},
async goBack() {
this.loading = true;
if (this.log && this.log.length) {
this.log.pop();
this.fileName = this.log[this.log.length - 1];
} else {
this.fileName = "china";
this.log = ["china"];
}
let res = await this.getMapData(
this.fileName === "china" ? "" : this.fileName
);
if (
res.code === 200 &&
res.success &&
res.data &&
res.data.rows &&
res.data.rows.length
) {
let datas = res.data.rows;
this.getDataArr(datas);
if (this.fileName === "china") {
this.showBack = false;
} else {
this.showBack = true;
}
this.drawEcharts();
}
},
async getDatas() {
let res = await this.getMapData();
if (
res.code === 200 &&
res.success &&
res.data &&
res.data.rows &&
res.data.rows.length
) {
let datas = res.data.rows;
this.getDataArr(datas);
this.drawEcharts();
}
},
getDataArr(datas) {
this.dataArr = datas.map((item) => {
if (item.dognum != 0) {
return {
name: item.dwName,
value: [parseFloat(item.jd), parseFloat(item.wd)],
count: item.dognum,
dognum1: item.dognum1,
dognum2: item.dognum2,
dognum3: item.dognum3,
dognum4: item.dognum4,
lev: item.lev,
};
}
});
},
},
};
</script>
<style lang="scss" scoped>
.back {
position: absolute;
top: 20px;
right: 0;
color: #fff;
font-size: 16px;
z-index: 999;
cursor: pointer;
}
</style>
src/views/sjfx/components/allDogCount.vue
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
class="dogCountClass" class="dogCountClass"
v-resize="resizes" v-resize="resizes"
> >
<div class="topTitle topTitleEchart">本年度全国警犬统计</div> <div class="topTitle topTitleEchart">全国警犬统计</div>
<div <div
class="myCharts" class="myCharts"
id="myEacherForAllDogCount" id="myEacherForAllDogCount"
......
src/views/sjfx/components/topContent.vue
...@@ -7,17 +7,12 @@ ...@@ -7,17 +7,12 @@
<p class="top03 ellipsis1"> <p class="top03 ellipsis1">
<span <span
class="span01" class="span01"
:class="gzqObj.Tbzt1 === 'up' ? 'upColor' : 'downColor'" :class="getColor(gzqObj.Tbzt1)"
>{{ gzqObj.Tb1 ? gzqObj.Tb1 : '0.00%' }}</span> >{{ gzqObj.Tb1 ? gzqObj.Tb1 : '0.00%' }}</span>
<img <img
src="../images/up@2x.png" :src="getImgUrl(gzqObj.Tbzt1)"
class="img01" class="img01"
v-if="gzqObj.Tbzt1 === 'up'" v-if="gzqObj.Tbzt1 !== 'like'"
/>
<img
src="../images/down@2x.png"
class="img01"
v-else
/> />
<span class="span02">同比去年</span> <span class="span02">同比去年</span>
</p> </p>
...@@ -36,17 +31,12 @@ ...@@ -36,17 +31,12 @@
<p class="top03 ellipsis1"> <p class="top03 ellipsis1">
<span <span
class="span01" class="span01"
:class="tyqObj.Tbzt2 === 'up' ? 'upColor' : 'downColor'" :class="getColor(tyqObj.Tbzt2)"
>{{ tyqObj.Tb2 ? tyqObj.Tb2 : '0.00%' }}</span> >{{ tyqObj.Tb2 ? tyqObj.Tb2 : '0.00%' }}</span>
<img <img
src="../images/up@2x.png" :src="getImgUrl(tyqObj.Tbzt2)"
class="img01" class="img01"
v-if="tyqObj.Tbzt2 === 'up'" v-if="tyqObj.Tbzt2 !== 'like'"
/>
<img
src="../images/down@2x.png"
class="img01"
v-else
/> />
<span class="span02">同比去年</span> <span class="span02">同比去年</span>
</p> </p>
...@@ -65,19 +55,14 @@ ...@@ -65,19 +55,14 @@
<p class="top03 ellipsis1"> <p class="top03 ellipsis1">
<span <span
class="span01" class="span01"
:class="zqObj.Tbzt3 === 'up' ? 'upColor' : 'downColor'" :class="getColor(zqObj.Tbzt3)"
> >
{{ zqObj.Tb3 ? zqObj.Tb3 : '0.00%' }} {{ zqObj.Tb3 ? zqObj.Tb3 : '0.00%' }}
</span> </span>
<img <img
src="../images/up@2x.png" :src="getImgUrl(zqObj.Tbzt3)"
class="img01"
v-if="zqObj.Tbzt3 === 'up'"
/>
<img
src="../images/down@2x.png"
class="img01" class="img01"
v-else v-if="zqObj.Tbzt3 !== 'like'"
/> />
<span class="span02">同比去年</span> <span class="span02">同比去年</span>
</p> </p>
...@@ -96,17 +81,12 @@ ...@@ -96,17 +81,12 @@
<p class="top03 ellipsis1"> <p class="top03 ellipsis1">
<span <span
class="span01" class="span01"
:class="jsryObj.Tbzt4 === 'up' ? 'upColor' : 'downColor'" :class="getColor(jsryObj.Tbzt4)"
>{{ jsryObj.Tb4 ? jsryObj.Tb4 : '0.00%' }}</span> >{{ jsryObj.Tb4 ? jsryObj.Tb4 : '0.00%' }}</span>
<img <img
src="../images/up@2x.png" :src="getImgUrl(jsryObj.Tbzt4)"
class="img01" class="img01"
v-if="jsryObj.Tbzt4 === 'up'" v-if="jsryObj.Tbzt4 !== 'like'"
/>
<img
src="../images/down@2x.png"
class="img01"
v-else
/> />
<span class="span02">同比去年</span> <span class="span02">同比去年</span>
</p> </p>
...@@ -148,6 +128,36 @@ export default { ...@@ -148,6 +128,36 @@ export default {
} }
}); });
}, },
getColor(flag) {
let color = "";
switch (flag) {
case "up":
color = "upColor";
break;
case "down":
color = "downColor";
break;
case "like":
color = "likeColor";
break;
default:
color = "likeColor";
break;
}
return color;
},
getImgUrl(flag) {
let imgUrl = "";
switch (flag) {
case "up":
imgUrl = require("../images/up@2x.png");
break;
case "down":
imgUrl = require("../images/down@2x.png");
break;
}
return imgUrl;
},
}, },
}; };
</script> </script>
......
src/views/sjfx/components/workDogCount.vue
...@@ -109,8 +109,8 @@ export default { ...@@ -109,8 +109,8 @@ export default {
fontSize: 12, fontSize: 12,
color: "#5E5E5E", color: "#5E5E5E",
fontFamily: "Microsoft YaHei", fontFamily: "Microsoft YaHei",
// interval: 0, interval: 0,
// rotate: 30, rotate: 30,
}, },
axisTick: { axisTick: {
show: false, show: false,
......
src/views/sjfx/style/sjfxStyle.scss
...@@ -65,16 +65,21 @@ ...@@ -65,16 +65,21 @@
color: #30BE1A; color: #30BE1A;
} }
.likeColor {
color: #242424;
}
.span02 { .span02 {
font-size: 12px; font-size: 12px;
color: #8B8B8B; color: #8B8B8B;
font-weight: 400; font-weight: 400;
margin-left: 4px;
} }
.img01 { .img01 {
width: 13px; width: 13px;
height: 13px; height: 13px;
margin: -3px 4px 0 1px; margin: -3px 0 0 1px;
} }
} }
} }
......
src/views/sy/Home2.vue
<template> <template>
<div id="dataVId"> <div id="dataVId">
<el-container class="home-page" direction="vertical"> <el-container
class="home-page"
direction="vertical"
>
<!-- 头 背景 --> <!-- 头 背景 -->
<div class="header"> <div class="header">
<div class="header-title"> <div class="header-title">
<img class="header-icon" :src="iconurl" /> <img
class="header-icon"
:src="iconurl"
/>
<div class="header-font">全国警犬态势分析</div> <div class="header-font">全国警犬态势分析</div>
</div> </div>
<div <div
...@@ -30,13 +36,19 @@ ...@@ -30,13 +36,19 @@
<div class="border"> <div class="border">
<!-- 头像--> <!-- 头像-->
<div class="profile"> <div class="profile">
<img class="img" :src="profileurl" /> <img
class="img"
:src="profileurl"
/>
</div> </div>
</div> </div>
<!-- 总数统计--> <!-- 总数统计-->
<div class="count"> <div class="count">
<div class="title">全国警犬数</div> <div class="title">全国警犬数</div>
<img :src="titleiconurl" class="img" /> <img
:src="titleiconurl"
class="img"
/>
<div class="font">{{ allCount }}</div> <div class="font">{{ allCount }}</div>
</div> </div>
</div> </div>
...@@ -44,17 +56,26 @@ ...@@ -44,17 +56,26 @@
<div class="father-count"> <div class="father-count">
<!-- 标题--> <!-- 标题-->
<div class="all-title"> <div class="all-title">
<img class="img" :src="alltitleurl" /> <img
class="img"
:src="alltitleurl"
/>
<div class="font">全国种犬数</div> <div class="font">全国种犬数</div>
</div> </div>
<!-- 种犬数据区--> <!-- 种犬数据区-->
<div class="count-data" id="cgzqs"></div> <div
class="count-data"
id="cgzqs"
></div>
</div> </div>
<!-- 全国工作犬数--> <!-- 全国工作犬数-->
<div class="work-count"> <div class="work-count">
<!-- 标题--> <!-- 标题-->
<div class="all-title"> <div class="all-title">
<img class="img" :src="alltitleurl" /> <img
class="img"
:src="alltitleurl"
/>
<div class="font">全国工作犬数</div> <div class="font">全国工作犬数</div>
</div> </div>
<!-- 工作犬数据区--> <!-- 工作犬数据区-->
...@@ -64,9 +85,17 @@ ...@@ -64,9 +85,17 @@
<span class="zj">总计</span> <span class="zj">总计</span>
<span class="zjNum">{{ gzqTotal }}</span> <span class="zjNum">{{ gzqTotal }}</span>
</div> </div>
<div class="list" v-for="item in dogList" :key="item.id"> <div
class="list"
v-for="item in dogList"
:key="item.id"
>
<div> <div>
<img :src="Icon" alt="" class="listicon" /> <img
:src="Icon"
alt=""
class="listicon"
/>
<span class="listdog">{{ item.name }}</span> <span class="listdog">{{ item.name }}</span>
</div> </div>
<span class="listNum">{{ item.counts }}</span> <span class="listNum">{{ item.counts }}</span>
...@@ -80,15 +109,26 @@ ...@@ -80,15 +109,26 @@
<!-- 圆环--> <!-- 圆环-->
<div class="ring-bg"></div> <div class="ring-bg"></div>
<!-- 地图--> <!-- 地图-->
<div class="map" id="map"></div> <div
class="map"
id="map"
></div>
<!--map下区分犬种 --> <!--map下区分犬种 -->
<div class="qf"> <div class="qf">
<div class="zq"> <div class="zq">
<img class="icon" :src="zqIcon" alt="" /> <img
class="icon"
:src="zqIcon"
alt=""
/>
<span class="dog">种犬</span> <span class="dog">种犬</span>
</div> </div>
<div class="gzq"> <div class="gzq">
<img class="icon" :src="gzqIcon" alt="" /> <img
class="icon"
:src="gzqIcon"
alt=""
/>
<span class="dog">工作犬</span> <span class="dog">工作犬</span>
</div> </div>
</div> </div>
...@@ -128,8 +168,14 @@ ...@@ -128,8 +168,14 @@
> >
</el-date-picker> </el-date-picker>
<!-- 搜索按钮--> <!-- 搜索按钮-->
<div class="search-btn" @click="search"> <div
<img :src="searchbtnurl" class="img" /> class="search-btn"
@click="search"
>
<img
:src="searchbtnurl"
class="img"
/>
</div> </div>
</div> </div>
...@@ -141,13 +187,22 @@ ...@@ -141,13 +187,22 @@
</div> </div>
<!-- 标题--> <!-- 标题-->
<div class="all-title"> <div class="all-title">
<img class="img" :src="alltitleurl" /> <img
class="img"
:src="alltitleurl"
/>
<div class="font">警犬出勤类型</div> <div class="font">警犬出勤类型</div>
</div> </div>
<div class="out" id="jqcqlx"></div> <div
class="out"
id="jqcqlx"
></div>
<!-- 标题--> <!-- 标题-->
<div class="all-title"> <div class="all-title">
<img class="img" :src="alltitleurl" /> <img
class="img"
:src="alltitleurl"
/>
<div class="font">全国警犬出勤数top10</div> <div class="font">全国警犬出勤数top10</div>
</div> </div>
<div class="top10"> <div class="top10">
...@@ -157,7 +212,11 @@ ...@@ -157,7 +212,11 @@
<span class="hfont hfont2">出勤次数</span> <span class="hfont hfont2">出勤次数</span>
<!-- <span class="hfont hfont3">行政区分</span> --> <!-- <span class="hfont hfont3">行政区分</span> -->
</div> </div>
<div class="Pro" v-for="(item, idx) in top10List" :key="idx"> <div
class="Pro"
v-for="(item, idx) in top10List"
:key="idx"
>
<div class="idx"> <div class="idx">
{{ item.administrative }} {{ item.administrative }}
</div> </div>
...@@ -198,7 +257,7 @@ ...@@ -198,7 +257,7 @@
</template> </template>
<script> <script>
import "echarts/map/js/china.js"; // import "echarts/map/js/china.js";
// import ecConfig from 'echarts/config'; // import ecConfig from 'echarts/config';
import { import {
getTopTen, getTopTen,
...@@ -1092,9 +1151,9 @@ export default { ...@@ -1092,9 +1151,9 @@ export default {
//中国地图 //中国地图
initOption() { initOption() {
let self = this; let self = this;
get('JsonData/china1.json', function (chinaJson) { get("JsonData/china1.json", function (chinaJson) {
// console.log(chinaJson); // console.log(chinaJson);
}) });
this.optionMap = { this.optionMap = {
// backgroundColor: "#0F1938", // backgroundColor: "#0F1938",
// tooltip: { // tooltip: {
......
src/views/sy/ces.vue
<template> <template>
<div> <div>
<div id="echartsMapBox" style="width: 1920px;height: 1080px;"></div> <div
</div> id="echartsMapBox"
style="width: 1920px;height: 1080px;"
></div>
</div>
</template> </template>
<script> <script>
import "echarts/map/js/china.js"; // import "echarts/map/js/china.js";
import { post, postform, get, postJson } from "@/utils/http.js"; import { post, postform, get, postJson } from "@/utils/http.js";
// import echarts from 'echarts' // import echarts from 'echarts'
// import axios from 'axios' // import axios from 'axios'
export default {
name: 'ces',
data() {
return{
chinaJson:''
}
},
mounted() {
this.repRegionStrategy()
},
methods: {
mergeProvinces(chinaJson, names, properties) {//合并大区里省份的coordinates
//
var features = chinaJson.data.features;
var polygons = [];
var polygons2 = [];
for (var i = 0; i < names.length; i++) {
var polygonsCoordinates = [];
var polygonsEncodeOffsets = [];
for (var z = 0; z < names[i].length; z++) {
for (var j = 0; j < features.length; j++) {
if (features[j].properties.name == names[i][z]) {
// console.log(features[j].geometry.coordinates[0].constructor)
if (features[j].geometry.coordinates[0].constructor == String) {//合并coordinates
for (var l = 0; l < features[j].geometry.coordinates.length; l++) {
polygonsCoordinates.push(features[j].geometry.coordinates[l]);
}
} else if (features[j].geometry.coordinates[0].constructor == Array) {
for (var k = 0; k < features[j].geometry.coordinates.length; k++) {
for (var d = 0; d < features[j].geometry.coordinates[k].length; d++) {
polygonsCoordinates.push(features[j].geometry.coordinates[k][d]);
}
}
}
if (features[j].geometry.encodeOffsets[0].constructor == String) {//合并encodeOffsets
polygonsEncodeOffsets.push(features[j].geometry.encodeOffsets);
} else if (features[j].geometry.encodeOffsets[0].constructor == Array) {
for (var k = 0; k < features[j].geometry.encodeOffsets.length; k++) {
if (features[j].geometry.encodeOffsets[k][0].constructor == Array) {
for (var e = 0; e < features[j].geometry.encodeOffsets[k].length; e++) {
polygonsEncodeOffsets.push(features[j].geometry.encodeOffsets[k][e]);
}
} else {
polygonsEncodeOffsets.push(features[j].geometry.encodeOffsets[k]);
}
}
}
break;
}
}
}
polygons.push(polygonsCoordinates);
polygons2.push(polygonsEncodeOffsets);
export default {
name: "ces",
data() {
return {
chinaJson: "",
};
},
mounted() {
this.repRegionStrategy();
},
methods: {
mergeProvinces(chinaJson, names, properties) {
//合并大区里省份的coordinates
//
var features = chinaJson.data.features;
var polygons = [];
var polygons2 = [];
for (var i = 0; i < names.length; i++) {
var polygonsCoordinates = [];
var polygonsEncodeOffsets = [];
for (var z = 0; z < names[i].length; z++) {
for (var j = 0; j < features.length; j++) {
if (features[j].properties.name == names[i][z]) {
// console.log(features[j].geometry.coordinates[0].constructor)
if (features[j].geometry.coordinates[0].constructor == String) {
//合并coordinates
for (
var l = 0;
l < features[j].geometry.coordinates.length;
l++
) {
polygonsCoordinates.push(features[j].geometry.coordinates[l]);
} }
} else if (
features[j].geometry.coordinates[0].constructor == Array
) {
for (
var k = 0;
k < features[j].geometry.coordinates.length;
k++
) {
for (
var d = 0;
d < features[j].geometry.coordinates[k].length;
d++
) {
polygonsCoordinates.push(
features[j].geometry.coordinates[k][d]
);
}
}
}
// 构建新的合并区域 if (features[j].geometry.encodeOffsets[0].constructor == String) {
var features = []; //合并encodeOffsets
polygonsEncodeOffsets.push(features[j].geometry.encodeOffsets);
for (var a = 0; a < names.length; a++) { } else if (
var feature = { features[j].geometry.encodeOffsets[0].constructor == Array
id: features.length.toString(), ) {
type: "FeatureCollection", for (
geometry: { var k = 0;
type: "Polygon", k < features[j].geometry.encodeOffsets.length;
coordinates: polygons[a], k++
encodeOffsets: polygons2[a] ) {
}, if (
properties: { features[j].geometry.encodeOffsets[k][0].constructor ==
name: properties.name[a] || "", Array
childNum: polygons[a].length ) {
} for (
}; var e = 0;
if (properties.cp[a]) { e < features[j].geometry.encodeOffsets[k].length;
feature.properties.cp = properties.cp[a]; e++
) {
polygonsEncodeOffsets.push(
features[j].geometry.encodeOffsets[k][e]
);
} }
} else {
// 将新的合并区域添加到地图中 polygonsEncodeOffsets.push(
features.push(feature); features[j].geometry.encodeOffsets[k]
);
}
} }
chinaJson.features = features; }
}, break;
repRegionStrategy() {
// console.log('8888888888888888');
let self = this
//
axios.get('JsonData/china1.json').then((chinaJson)=>{
// get('JsonData/china1.json', function (chinaJson) {
//
// console.log(chinaJson);
var params = {
// names: [//把各个大区的省份用二维数组分开
// ['北京市', '天津市', '河北省', '山西省', '内蒙古自治区'],
// ["黑龙江省", "吉林省", "辽宁省"],
// ['山东省', '江苏省', '安徽省', '江西省', '浙江省', '福建省', '上海市', '台湾省'],
// ['河南省', '湖北省', '湖南省'],
// ['广东省', '广西省', '海南省', '香港特别行政区', '澳门特别行政区'],
// ['重庆市', '四川省', '云南省', '西藏自治区', '贵州省'],
// ['陕西省', '甘肃省', '青海省', '宁夏回族自治区', '新疆维吾尔自治区']
// ],
names: [//把各个大区的省份用二维数组分开
['北京', '天津', '河北', '山西', '内蒙古'],
["黑龙江", "吉林", "辽宁"],
['山东', '江苏', '安徽', '江西', '浙江', '福建', '上海', '台湾'],
['河南', '湖北', '湖南'],
['广东', '广西', '海南', '香港', '澳门'],
['重庆', '四川', '云南', '西藏', '贵州'],
['陕西', '甘肃', '青海', '宁夏', '新疆']
],
properties: {//自定义大区的名字，要和上面的大区省份一一对应
name: ['华北', '东北', '华东', '华中', '华南', '西南', '西北'],
cp: [//经纬度可以自己随意定义
[116.24, 39.54],
[126.32, 43.50],
[121.28, 31.13],
[114.20, 30.32],
[113.15, 23.08],
[104.04, 30.39],
[103.49, 36.03]
]
}
};
self.mergeProvinces(chinaJson, params.names, params.properties)
self.$echarts.registerMap('china', chinaJson); // 注册地图
var pRChart = self.$echarts.init(document.getElementById('echartsMapBox'));
var data = [//地图数据
{
"name": "东北",
"value": 3685
},
{
"name": "华北",
"value": 7342
},
{
"name": "华南",
"value": 21416
},
{
"name": "华东",
"value": 25314
},
{
"name": "华中",
"value": 2500
},
{
"name": "西南",
"value": 10427
},
{
"name": "西北",
"value": 2440
}
];
let option = {
backgroundColor: '#fff',//地图背景色
title: {
text: '营销策略',
left: 'center',
top: 'top',
textStyle: {
color: '#333'
}
},
grid: { //echarts地图距离容器位置
left: 20,
top: 20,
containLabel: false,
},
tooltip: {//鼠标放上去提示
trigger: 'item'
},
//左侧小导航图标
visualMap: {
show: true,
type: 'continuous', // 定义为连续型 viusalMap
min: 10, //指定 visualMapContinuous 组件的允许的最小值
max: 100000,
minOpen: true, //界面上会额外多出一个『< min』的选块
maxOpen: true,
realtime: true,
itemWidth: 20,
align: "auto",
left: "50px", //组件离容器左侧的距离,'left', 'center', 'right','20%'
top: "auto",
orient: "vertical",
hoverLink: true,
inverse: false,
text: ['高', '低'],
inRange: { //定义 在选中范围中 的视觉元素
color: ['#f6efa6', '#ffb61e', '#ee9a00'],
symbolSize: [30, 100]
},
outOfRange: { //定义 在选中范围外 的视觉元素。
color: ['#666', '#333', '#000'],
symbolSize: [30, 100]
}
},
series: [
{
name: '大区',//城市
type: 'map',
map: 'china',
geoIndex: 1,
aspectScale: 0.75, //长宽比
symbolSize: 20,
data: data,
showLegendSymbol: true, // 存在legend时显示
label: {
normal: {
show: true,
textStyle: {
color: '#333'
}
},
emphasis: {//鼠标放上去时的状态
show: true,
textStyle: {
color: '#333'
}
}
},
roam: true,//禁止拖拽和伸缩
itemStyle: {
normal: {
areaColor: '#f6efa6',
borderColor: '#a5a279',
borderWidth: 1
},
emphasis: {
areaColor: '#ffdf33'
}
}
}
]
};
pRChart.setOption(option, true);
})
// });
} }
}
}
polygons.push(polygonsCoordinates);
polygons2.push(polygonsEncodeOffsets);
}
// 构建新的合并区域
var features = [];
for (var a = 0; a < names.length; a++) {
var feature = {
id: features.length.toString(),
type: "FeatureCollection",
geometry: {
type: "Polygon",
coordinates: polygons[a],
encodeOffsets: polygons2[a],
},
properties: {
name: properties.name[a] || "",
childNum: polygons[a].length,
},
};
if (properties.cp[a]) {
feature.properties.cp = properties.cp[a];
} }
}
// 将新的合并区域添加到地图中
features.push(feature);
}
chinaJson.features = features;
},
repRegionStrategy() {
// console.log('8888888888888888');
let self = this;
//
axios.get("JsonData/china1.json").then((chinaJson) => {
// get('JsonData/china1.json', function (chinaJson) {
//
// console.log(chinaJson);
var params = {
// names: [//把各个大区的省份用二维数组分开
// ['北京市', '天津市', '河北省', '山西省', '内蒙古自治区'],
// ["黑龙江省", "吉林省", "辽宁省"],
// ['山东省', '江苏省', '安徽省', '江西省', '浙江省', '福建省', '上海市', '台湾省'],
// ['河南省', '湖北省', '湖南省'],
// ['广东省', '广西省', '海南省', '香港特别行政区', '澳门特别行政区'],
// ['重庆市', '四川省', '云南省', '西藏自治区', '贵州省'],
// ['陕西省', '甘肃省', '青海省', '宁夏回族自治区', '新疆维吾尔自治区']
// ],
names: [
//把各个大区的省份用二维数组分开
["北京", "天津", "河北", "山西", "内蒙古"],
["黑龙江", "吉林", "辽宁"],
["山东", "江苏", "安徽", "江西", "浙江", "福建", "上海", "台湾"],
["河南", "湖北", "湖南"],
["广东", "广西", "海南", "香港", "澳门"],
["重庆", "四川", "云南", "西藏", "贵州"],
["陕西", "甘肃", "青海", "宁夏", "新疆"],
],
properties: {
//自定义大区的名字，要和上面的大区省份一一对应
name: ["华北", "东北", "华东", "华中", "华南", "西南", "西北"],
cp: [
//经纬度可以自己随意定义
[116.24, 39.54],
[126.32, 43.5],
[121.28, 31.13],
[114.2, 30.32],
[113.15, 23.08],
[104.04, 30.39],
[103.49, 36.03],
],
},
};
self.mergeProvinces(chinaJson, params.names, params.properties);
self.$echarts.registerMap("china", chinaJson); // 注册地图
var pRChart = self.$echarts.init(
document.getElementById("echartsMapBox")
);
var data = [
//地图数据
{
name: "东北",
value: 3685,
},
{
name: "华北",
value: 7342,
},
{
name: "华南",
value: 21416,
},
{
name: "华东",
value: 25314,
},
{
name: "华中",
value: 2500,
},
{
name: "西南",
value: 10427,
},
{
name: "西北",
value: 2440,
},
];
let option = {
backgroundColor: "#fff", //地图背景色
title: {
text: "营销策略",
left: "center",
top: "top",
textStyle: {
color: "#333",
},
},
grid: {
//echarts地图距离容器位置
left: 20,
top: 20,
containLabel: false,
},
tooltip: {
//鼠标放上去提示
trigger: "item",
},
//左侧小导航图标
visualMap: {
show: true,
type: "continuous", // 定义为连续型 viusalMap
min: 10, //指定 visualMapContinuous 组件的允许的最小值
max: 100000,
minOpen: true, //界面上会额外多出一个『< min』的选块
maxOpen: true,
realtime: true,
itemWidth: 20,
align: "auto",
left: "50px", //组件离容器左侧的距离,'left', 'center', 'right','20%'
top: "auto",
orient: "vertical",
hoverLink: true,
inverse: false,
text: ["高", "低"],
inRange: {
//定义 在选中范围中 的视觉元素
color: ["#f6efa6", "#ffb61e", "#ee9a00"],
symbolSize: [30, 100],
},
outOfRange: {
//定义 在选中范围外 的视觉元素。
color: ["#666", "#333", "#000"],
symbolSize: [30, 100],
},
},
series: [
{
name: "大区", //城市
type: "map",
map: "china",
geoIndex: 1,
aspectScale: 0.75, //长宽比
symbolSize: 20,
data: data,
showLegendSymbol: true, // 存在legend时显示
label: {
normal: {
show: true,
textStyle: {
color: "#333",
},
},
emphasis: {
//鼠标放上去时的状态
show: true,
textStyle: {
color: "#333",
},
},
},
roam: true, //禁止拖拽和伸缩
itemStyle: {
normal: {
areaColor: "#f6efa6",
borderColor: "#a5a279",
borderWidth: 1,
},
emphasis: {
areaColor: "#ffdf33",
},
},
},
],
};
pRChart.setOption(option, true);
});
// });
},
},
};
</script> </script>
<style scoped> <style scoped>
</style> </style>
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