Skip to content

bdc / bdcjg-web

Go to a project
Toggle navigation
Toggle navigation pinning
dae4de37 by 任超
Options

style:地图

1 parent bb68563a
Expand all
Inline Side-by-side
Showing 13 changed files with 147 additions and 165 deletions
......@@ -4,7 +4,7 @@
<script>
import tdTheme from './theme.json' // 引入默认主题
import '../map/fujian.js'
import '../map/hanzhong.js'
export default {
name: 'echart',
......@@ -27,7 +27,7 @@ export default {
},
options: {
type: Object,
default: ()=>({})
default: () => ({})
}
},
data () {
......@@ -60,7 +60,4 @@ export default {
}
}
}
</script>
<style>
</style>
</script>
\ No newline at end of file
......
<template>
<div>
<Echart
id="centreLeft2Chart"
ref="centreLeft2ChartRef"
:options="options"
height="360px"
width="330px"
></Echart>
<Echart id="centreLeft2Chart" class="centreLeft2Chart" ref="centreLeft2ChartRef" width="100%" height="500px"
:options="options"></Echart>
</div>
</template>
<script>
import Echart from '@/common/echart';
export default {
data() {
data () {
return {
options: {},
max: "9000", //最大value值
min: "500", // 最小value值
};
},
components: {
......@@ -29,47 +26,56 @@ export default {
},
watch: {
cdata: {
handler(newData) {
handler (newData) {
let _this = this;
// 设置点的位置(经纬度)
const geoCoordMap = {
厦门市: [118.11022, 24.490474, 20],
福州市: [119.206239, 26.275302, 20],
泉州市: [118.589421, 24.908853, 20],
漳州市: [117.561801, 24.510897, 20],
龙岩市: [116.82978, 25.391603, 20],
莆田市: [119.007558, 25.591011, 20],
三明市: [117.435001, 26.465444, 20],
南平市: [118.178459, 27.535627, 20],
宁德市: [119.527082, 27.15924, 20],
汉台区: [107.03187, 33.06774, 20],
南郑区: [106.94024, 33.00299, 20],
城固县: [107.33367, 33.15661, 20],
洋县: [107.545837, 33.222739, 20],
西乡县: [107.76867, 32.98411, 20],
镇巴县: [107.89648, 32.53487, 20],
勉县: [106.673221, 33.153553, 20],
留坝县: [106.92233, 33.61606, 20],
佛坪县: [107.98974, 33.52496, 20],
宁强县: [106.25958, 32.82881, 20],
略阳县: [106.15399, 33.33009, 20],
};
let seriesData = [
{
name: '厦门市',
name: '汉台区',
},
{
name: '福州市',
name: '南郑区',
},
{
name: '泉州市',
name: '城固县',
},
{
name: '漳州市',
name: '洋县',
},
{
name: '龙岩市',
name: '西乡县',
},
{
name: '莆田市',
name: '镇巴县',
},
{
name: '三明市',
name: '勉县',
},
{
name: '南平市',
name: '留坝县',
},
{
name: '宁德市',
name: '佛坪县',
},
{
name: '宁强县',
},
{
name: '略阳县'
}
];
let convertData = function (data) {
let scatterData = [];
......@@ -97,55 +103,39 @@ export default {
return [point[0] + 50, point[1] - 20];
},
// 如果需要自定义 tooltip样式，需要使用formatter
/*
formatter: params => {
return `<div style=""> ... </div>`
}
*/
formatter: params => {
return `<div style="">${params.name}:${params.value}</div>`
}
},
visualMap: {
min: 0,
max: 10,
show: false,
seriesIndex: 0,
// 颜色
inRange: {
color: ['rgba(41,166,206, .5)', 'rgba(69,117,245, .9)'],
},
},
// 底部背景
geo: {
show: true,
aspectScale: 0.85, //长宽比
zoom: 1.2,
top: '10%',
left: '16%',
map: '福建',
roam: false,
itemStyle: {
normal: {
areaColor: 'rgba(0,0,0,0)',
shadowColor: 'rgba(7,114,204, .8)',
shadowOffsetX: 5,
shadowOffsetY: 5,
},
emphasis: {
areaColor: '#00aeef',
},
},
max: _this.max,
top: "bottom",
right: 10,
splitNumber: 6,
seriesIndex: [0],
itemWidth: 20, // 每个图元的宽度
itemGap: 2, // 每两个图元之间的间隔距离，单位为px
pieces: [ // 自定义每一段的范围，以及每一段的文字
{ gte: 6000, label: '6000以上', color: '#035cf5' }, // 不指定 max，表示 max 为无限大（Infinity）。
{ gte: 2000, lte: 6000, label: '2000-6000', color: '#3375e4' },
{ gte: 1000, lte: 2000, label: '1000-2000', color: '#6797ef' },
{ gte: 500, lte: 1000, label: '500-1000', color: '#96b5ef' },
],
textStyle: {
color: '#737373'
}
},
series: [
{
name: '相关指数',
type: 'map',
aspectScale: 0.85, //长宽比
zoom: 1.2,
mapType: '福建', // 自定义扩展图表类型
top: '10%',
left: '16%',
aspectScale: 1, //长宽比
zoom: 1.1,
mapType: '汉中市', // 自定义扩展图表类型
top: '20%',
left: '10%',
itemStyle: {
normal: {
color: 'red',
areaColor: 'rgba(19,54,162, .5)',
borderColor: 'rgba(0,242,252,.3)',
borderWidth: 1,
......@@ -171,8 +161,8 @@ export default {
emphasis: {
textStyle: {
color: '#fff',
},
},
}
}
},
data: newData,
},
......@@ -209,7 +199,7 @@ export default {
},
methods: {
// 开启定时器
startInterval() {
startInterval () {
const _self = this;
// 应通过接口获取配置时间，暂时写死5s
const time = 2000;
......@@ -221,7 +211,7 @@ export default {
}, time);
},
// 重新随机选中地图区域
reSelectMapRandomArea() {
reSelectMapRandomArea () {
const length = 9;
this.$nextTick(() => {
try {
......@@ -251,7 +241,7 @@ export default {
}
});
},
handleMapRandomSelect() {
handleMapRandomSelect () {
this.$nextTick(() => {
try {
const map = this.$refs.centreLeft2ChartRef.chart;
......@@ -288,3 +278,6 @@ export default {
},
};
</script>
<style>
</style>
......
......@@ -9,59 +9,57 @@ import Chart from './chart.vue';
export default {
data () {
return {
cdata: [
{
// 名字需要与 “common/map/fujian.js” 地图数据文件里面定义的一一对应，不能是 “福州” 或者 “闽” 之类的缩写
name: '福州市',
value: 10,
elseData:{
// 这里放置地图 tooltip 里想显示的数据
}
},
{
name: '厦门市',
value: 9,
},
{
name: '漳州市',
value: 8,
},
{
name: '泉州市',
value: 7,
},
{
name: '三明市',
value: 6,
},
{
name: '莆田市',
value: 5,
},
{
name: '南平市',
value: 4,
},
{
name: '龙岩市',
value: 3,
},
{
name: '宁德市',
value: 2,
cdata: [{
name: '汉台区',
value: '6000',
elseData: {
// 这里放置地图 tooltip 里想显示的数据
}
]
},
{
name: '南郑区',
value: '8000'
},
{
name: '城固县',
value: '3000'
},
{
name: '洋县',
value: '7000'
},
{
name: '西乡县',
value: '1000'
},
{
name: '镇巴县',
value: '2000'
},
{
name: '勉县',
value: '600'
},
{
name: '留坝县',
value: '3000'
},
{
name: '佛坪县',
value: '1000'
},
{
name: '宁强县',
value: '1000'
},
{
name: '略阳县',
value: '1000'
}]
}
},
components: {
Chart,
},
mounted () {
},
methods: {
Chart
}
}
</script>
<style lang="scss" scoped>
</style>
\ No newline at end of file
......
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1668671631108" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1959" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32"><path d="M992 255.8H32c-17.7 0-32-14.3-32-32s14.3-32 32-32h960c17.7 0 32 14.3 32 32 0 17.6-14.3 32-32 32zM992 544H32c-17.7 0-32-14.3-32-32s14.3-32 32-32h960c17.7 0 32 14.3 32 32s-14.3 32-32 32zM992 832.3H32c-17.7 0-32-14.3-32-32s14.3-32 32-32h960c17.7 0 32 14.3 32 32 0 17.6-14.3 32-32 32z" p-id="1960" fill="#ffffff"></path></svg>
\ No newline at end of file
<template>
<div class="navbar-con">
<div class="navbar">
<div class="logo">
{{ title }}
</div>
<div class="backdrop">
<!-- <div class="backdrop">
<sidebar />
</div>
</div> -->
<div class="right-menu">
<div class="dataView pointer" @click="handleDataView">大屏展示</div>
<svg-icon class="function" icon-class='function' />
<el-dropdown class="avatar-container right-menu-item hover-effect" trigger="hover" @command="handleCommand">
<div class="avatar-wrapper">
<span style="padding-right:10px">{{ name }}</span>
......@@ -58,16 +54,6 @@ export default {
}
</script>
<style lang="scss" scoped>
.navbar-con {
position: relative;
.logo {
color: #fff;
font-size: 26px;
font-weight: 700;
}
}
.dataView {
color: #fff;
}
......@@ -116,8 +102,7 @@ export default {
height: $headerHeight;
overflow: hidden;
position: relative;
background: linear-gradient(270deg, #148CEE 0%, #1870E3 100%); //默认颜色
box-shadow: 0 1px 0px rgba(0, 21, 41, 0.08);
background: linear-gradient(180deg, #0D3DC9 0%, #3476E1 100%);
display: flex;
align-items: center;
padding: 0 20px;
......@@ -127,17 +112,6 @@ export default {
width: 300px;
}
.backdrop {
flex: 1;
width: 60%;
background: url('../../image/backdrop.png');
background-size: 100% 100%;
height: $headerHeight;
display: flex;
align-items: center;
padding-left: 20px;
}
.hamburger-container {
line-height: 43px;
height: 100%;
......
......@@ -45,13 +45,13 @@ export default {
}
.appMain {
height: calc(100vh - 80px);
width: 80%;
margin: 0 auto;
background-color: #fff;
height: calc(100vh - 65px);
background-color: $containerbg;
.app-main {
height: 100%;
padding: 10px;
box-sizing: border-box;
}
}
</style>
......
......@@ -298,6 +298,20 @@ export const asyncRoutes = [
export const asyncRoutes1 = [
// 监管首页
// {
// path: '/',
// component: Layout1,
// redirect: '/jgHome',
// meta: { title: '首页' },
// children: [
// {
// path: 'jgHome',
// component: () => import('@/views/jgHome/index'),
// name: 'jgHome',
// meta: { title: '首页', icon: 'workbench', affix: true }
// }
// ]
// },
{
path: '/',
component: Layout1,
......@@ -306,7 +320,7 @@ export const asyncRoutes1 = [
children: [
{
path: 'jgHome',
component: () => import('@/views/jgHome/index'),
component: () => import('@/views/home/index'),
name: 'jgHome',
meta: { title: '首页', icon: 'workbench', affix: true }
}
......
......@@ -6,6 +6,10 @@
justify-content: space-between;
padding-top: 15px;
.map {
margin-left: -20px;
}
&-left {
width: 35%;
padding-top: 25px;
......
<template>
<div class="home">
<div class="home-left bgbk">
<div class="header titlebg">
汉中市接入概括
</div>
<!-- 地图 -->
<wgsl></wgsl>
<CenterLeft2Chart class="map" />
</div>
<div class="home-right">
<!-- 陕西省接入概括 -->
......@@ -92,11 +95,12 @@
<script>
// 上报首页
import wgsl from "./wgsl.vue";
import CenterLeft2Chart from "@/components/echart/centerLeft/centerLeft2Chart";
// 引入表格数据
import data from "./data"
export default {
name: "home",
components: { wgsl },
components: { wgsl, CenterLeft2Chart },
data () {
function formatter (number) {
const numbers = number.toString().split('').reverse()
......
......@@ -3,7 +3,6 @@
<div class="map-box" ref="mapContain" />
</div>
</template>
<script>
export default {
data () {
......