Skip to content

Y
yuji-dataview
Commit 8d0bf3a8 authored by 郭铭瑶's avatar 郭铭瑶 🤘
Browse files
Options

稻鱼种养

parent 00df0431
Show whitespace changes
Inline Side-by-side
Showing with 858 additions and 9 deletions
src/components/MonitorComponents/MonitorChart/monitor-chart.vue
View file @ 8d0bf3a8
......@@ -186,7 +186,7 @@ export default {
}
const result = {
barWidth: '50%',
barGap: 0,
barGap: item.barGap || 0,
smooth: true,
symbol: 'circle',
itemStyle: { color, ...shadow, ...borderRadius },
......
src/components/MonitorComponents/MonitorTitle/monitor-title.vue
View file @ 8d0bf3a8
......@@ -54,7 +54,7 @@ export default {
menus: [
{name: '病害防控', title: '病害防控大数据', path: '/disease'},
{name: '质量安全', title: '水产品质量安全大数据', path: '/quality-safety'},
{name: '稻鱼种养'},
{name: '稻鱼种养', title: '稻鱼综合种养分析', path: '/rice-fish'},
{name: '海洋牧场'},
{name: '水产价格', title: '水产品价格分析', path: '/fishing-price'},
{name: '苗种'},
......@@ -75,12 +75,6 @@ export default {
}
}
this.style = {...this.style, 'font-size': this.size}
const {path} = this.$route
if (path === '/') {
this.curIndex = 0
} else {
this.curIndex = this.menus.findIndex(menu => path === menu.path)
}
},
beforeDestroy() {
clearInterval(this.timer)
......@@ -110,6 +104,16 @@ export default {
this.$router.push({path: item.path})
}
},
},
watch: {
$route(cur) {
const {path} = cur
if (path === '/') {
this.curIndex = 0
} else {
this.curIndex = this.menus.findIndex(menu => path === menu.path)
}
}
}
}
</script>
......
src/router/index.js
View file @ 8d0bf3a8
......@@ -4,6 +4,7 @@ import Router from 'vue-router'
const Disease = () => import('@/views/disease')
const FishingPrice = () => import('@/views/fishing-price')
const QualitySafety = () => import('@/views/quality-safety.vue')
const RiceFish = () => import('@/views/rice-fish.vue')
Vue.use(Router)
......@@ -28,5 +29,10 @@ export default new Router({
path: '/quality-safety',
component: QualitySafety,
},
{
name: 'rice-fish',
path: '/rice-fish',
component: RiceFish,
},
]
})
src/views/components/rice-fish/area-rate.vue 0 → 100644
View file @ 8d0bf3a8
<template>
<div class="area-rate" v-if="showChart">
<m-chart class="chart" :config="config" :data="data"/>
</div>
</template>
<script>
export default {
name: 'AreaRate',
data() {
return {
showChart: false,
config: {
colors: ['#0062f0', '#49a7db', '#72b3f7', '#c8dfff'],
legend: {
hide: true,
},
shape: [
{type: 'pie', radius: [30, 60 * Number((screen.height / 800).toFixed(1))], startAngle: 30, label: {show: true, formatter: '{c}%\n{b}'}, center: ['50%', '52%']}
]
},
data: [
{name: '500-1000亩', value: 45},
{name: '1000-3000亩', value: 39.7},
{name: '100-500亩', value: 16.5},
{name: '3000亩以上', value: 23.5},
],
}
},
mounted() {
setTimeout(() => this.showChart = true)
},
}
</script>
<style lang="stylus" scoped>
.area-rate
width 100%
height 100%
overflow hidden
</style>
src/views/components/rice-fish/data-comparison.vue 0 → 100644
View file @ 8d0bf3a8
<template>
<div class="data-comparison" v-if="showChart">
<m-chart :config="config" :data="data"/>
<p>面积（亩）</p>
<p>产量（吨）</p>
</div>
</template>
<script>
export default {
name: 'DataComparison',
data() {
return {
showChart: false,
config: {
colors: [['#18a6ee', '#6f63ed'], ['#feb570', '#fd6a6c']],
legend: {
hide: true,
},
shape: [
{key: 'area', type: 'bar', barWidth: '20%', barGap: '50%', yAxisIndex: 0, borderRadius: [10, 10, 10, 10]},
{key: 'product', type: 'bar', barWidth: '20%', barGap: '50%', yAxisIndex: 1, borderRadius: [10, 10, 10, 10]},
],
xAxis: {
key: 'year',
},
},
data: [
{year: '2015', area: 200000, product: 300000},
{year: '2016', area: 300000, product: 450000},
{year: '2017', area: 400000, product: 500000},
{year: '2018', area: 500000, product: 650000},
{year: '2019', area: 600000, product: 750000},
],
}
},
mounted() {
setTimeout(() => this.showChart = true)
},
}
</script>
<style lang="stylus" scoped>
.data-comparison
width 100%
height 100%
p
position absolute
top 2rem
font-size .8rem
font-weight bold
color #0292d5
&:first-child
left 1rem
&:last-child
color #e24d68
right 1rem
</style>
src/views/components/rice-fish/mode-rate.vue 0 → 100644
View file @ 8d0bf3a8
<template>
<div class="mode-rate">
<Select class="custom-select" v-model="type" transfer>
<Option v-for="item in options" :key="item" :value="item">{{item}}</Option>
</Select>
<div class="legend">
<p v-for="(item, i) in data" :key="item.name"><span :style="`background:${config.colors[i]}`"/> {{item.name}}</p>
</div>
<div class="chart-wrapper" v-if="showChart">
<div>
<p class="title"><span/>面积</p>
<m-chart :config="config" :data="data"/>
</div>
<div>
<div>
<p class="title"><span/>水稻产量</p>
<m-chart style="z-index:99;" :config="config2" :data="data2"/>
<div class="border" />
</div>
<div>
<p class="title"><span/>水稻产值</p>
<m-chart style="z-index:99;" :config="config3" :data="data3"/>
<div class="border" />
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'ModeRate',
data() {
return {
showChart: false,
type: '水稻',
options: ['水稻'],
config: {
colors: ['#b043f7', '#41b2f2', '#f59847', '#01c7c8', '#41dbf9', '#4678f7', '#05eedb', '#5145f8', '#ed40eb'],
legend: {
hide: true,
},
shape: [
{type: 'pie', radius: [20 * Number((screen.height / 800).toFixed(1)), 70 * Number((screen.height / 800).toFixed(1))], roseType: 'radius', center: ['50%', '50%']}
]
},
data: [
{name: '稻小龙虾', value: 900},
{name: '稻青虾', value: 800},
{name: '稻蟹', value: 700},
{name: '稻鲤', value: 600},
{name: '稻鳅', value: 500},
{name: '稻鳖', value: 400},
{name: '稻蛙', value: 300},
{name: '稻螺', value: 200},
{name: '其他', value: 100},
],
config2: {
colors: ['#b043f7', '#41b2f2', '#f59847', '#01c7c8', '#41dbf9', '#4678f7', '#05eedb', '#5145f8', '#ed40eb'],
legend: {
hide: true,
},
shape: [
{type: 'pie', radius: [30 * Number((screen.height / 800).toFixed(1)), 40 * Number((screen.height / 800).toFixed(1))], center: ['50%', '50%']}
]
},
data2: [
{name: '稻小龙虾', value: 900},
{name: '稻青虾', value: 800},
{name: '稻蟹', value: 700},
{name: '稻鲤', value: 600},
{name: '稻鳅', value: 500},
{name: '稻鳖', value: 400},
{name: '稻蛙', value: 300},
{name: '稻螺', value: 200},
{name: '其他', value: 100},
],
config3: {
colors: ['#b043f7', '#41b2f2', '#f59847', '#01c7c8', '#41dbf9', '#4678f7', '#05eedb', '#5145f8', '#ed40eb'],
legend: {
hide: true,
},
shape: [
{type: 'pie', radius: [30 * Number((screen.height / 800).toFixed(1)), 40 * Number((screen.height / 800).toFixed(1))], center: ['50%', '50%']}
]
},
data3: [
{name: '稻小龙虾', value: 900},
{name: '稻青虾', value: 800},
{name: '稻蟹', value: 700},
{name: '稻鲤', value: 600},
{name: '稻鳅', value: 500},
{name: '稻鳖', value: 400},
{name: '稻蛙', value: 300},
{name: '稻螺', value: 200},
{name: '其他', value: 100},
],
}
},
mounted() {
setTimeout(() => this.showChart = true)
},
}
</script>
<style lang="stylus" scoped>
.mode-rate
width 100%
height 100%
overflow hidden
.legend
display flex
align-items center
justify-content space-around
width 80%
margin 0 auto .5rem
span
display inline-block
width .8rem
height @width
border-radius 50%
margin-right .4rem
.chart-wrapper
width inherit
height inherit
display flex
div
position relative
>div
width 49%
height calc(100% - 1rem)
&:last-child
display flex
border-left .1rem solid $color-map()
>div
flex 1
.border
width 9rem
height 9rem
border 0.2rem solid #00f2ff
position absolute
top 50%
left 50%
transform translate(-50%, -50%)
border-radius 50%
box-shadow 0 0 1rem 0.2rem rgba(255,255,255,0.3), inset 0 0 1rem 0.2rem rgba(255,255,255,0.3)
opacity .9
.title
position absolute
left 1rem
top -0.5rem
display flex
align-items center
font-weight bold
font-size 1.2rem
>span
display block
width .3rem
height 1.2rem
background $edgeColor
margin-right .6rem
</style>
src/views/components/rice-fish/process-situation.vue 0 → 100644
View file @ 8d0bf3a8
<template>
<div class="process-situation" v-if="showChart">
<m-chart :config="config" :data="data"/>
</div>
</template>
<script>
export default {
name: 'ProcessSituation',
data() {
return {
showChart: false,
config: {
colors: ['#7e78f8', '#40bdf9', '#21f4f9', '#4ffb8b', '#faef3a'],
legend: {
align: 'right',
orient: 'horizontal',
},
shape: [
{name: '整虾加工量', key: 'val1', type: 'line', areaStyle: {opacity: 0.8}},
{name: '虾仁加工量', key: 'val2', type: 'line', areaStyle: {opacity: 0.7}},
{name: '虾尾加工量', key: 'val3', type: 'line', areaStyle: {opacity: 0.6}},
{name: '精深加工量', key: 'val4', type: 'line', areaStyle: {opacity: 0.5}},
{name: '其他产品加工量', key: 'val5', type: 'line', areaStyle: {opacity: 0.4}},
],
xAxis: {
key: 'month',
},
yAxis: {
name: '单位：吨'
}
},
data: [
{month: '1月', val1: 20000, val2: 12000, val3: 14000, val4: 26000, val5: 4000},
{month: '2月', val1: 22000, val2: 14000, val3: 18000, val4: 20000, val5: 6000},
{month: '3月', val1: 24000, val2: 16000, val3: 24000, val4: 24000, val5: 8000},
{month: '4月', val1: 26000, val2: 18000, val3: 24000, val4: 20000, val5: 10000},
{month: '5月', val1: 28000, val2: 20000, val3: 20000, val4: 22000, val5: 8000},
{month: '6月', val1: 20000, val2: 22000, val3: 22000, val4: 23000, val5: 4000},
{month: '7月', val1: 28000, val2: 22000, val3: 20000, val4: 24000, val5: 5000},
{month: '8月', val1: 26000, val2: 18000, val3: 18000, val4: 25000, val5: 6000},
{month: '9月', val1: 20000, val2: 20000, val3: 24000, val4: 26000, val5: 7000},
{month: '10月', val1: 28000, val2: 22000, val3: 28000, val4: 27000, val5: 8000},
{month: '11月', val1: 20000, val2: 20000, val3: 20000, val4: 28000, val5: 9000},
{month: '12月', val1: 23000, val2: 20000, val3: 24000, val4: 29000, val5: 10000},
],
}
},
mounted() {
setTimeout(() => this.showChart = true)
},
}
</script>
<style lang="stylus" scoped>
.process-situation
width 100%
height 100%
</style>
src/views/components/rice-fish/rice-fish-map.vue 0 → 100644
View file @ 8d0bf3a8
<template>
<div class="map-wrapper">
<BorderBox class="sum">
<p>示范区数量</p>
<h2><m-count class="count" :value="54874589" :decimal="0"/> 个</h2>
</BorderBox>
<div class="map" ref="map"/>
<!-- <div class="visual-range">
<p>
采集点数量<br/>
<span>（单位：个）</span>
</p>
<div class="slider-wrapper">
<Slider class="slider" v-model="range" range :max="80"/>
<m-count class="count" :value="0" :decimal="0"/>
<m-count class="count" :value="80" :decimal="0"/>
</div>
</div> -->
</div>
</template>
<script>
import china from 'echarts/map/json/china.json'
import BorderBox from '../border-box'
const mock = [
{name: '浙江新农都物流中心（水产市场）', address: '杭州市石桥路115号', province: '浙江', value: [120.19706700, 30.24639100], visualMap: false, newDate: '2020-08-15'},
{name: '厦门市水产品批发市场', address: '厦门市高崎北二路77-87号中埔水产批发市场', province: '福建', value: [118.11368800, 24.55107600], visualMap: false, newDate: '2020-08-15'},
{name: '福建省兴业华洲（福建）农贸市场有限公司', address: '泉州晋江市池店镇仕春工业区新华洲水产市场', province: '福建', value: [118.55729200, 24.86104200], visualMap: false, newDate: '2020-08-15'},
{name: '福建省三明市鲜活水产品批发市场', address: '三明市三元区白沙长安路34号', province: '福建', value: [117.61887900, 26.25029400], visualMap: false, newDate: '2020-08-15'},
{name: '江西省九江鲜活水产品批发市场', address: '九江市庐峰路东端', province: '江西', value: [116.05598000, 29.75385500], visualMap: false, newDate: '2020-08-15'},
{name: '江西南昌市水产品综合交易批发市场', address: '江西省南昌市东湖区富有路9号', province: '江西', value: [115.92204500, 28.71739100], visualMap: false, newDate: '2020-08-15'},
{name: '山东省王尔庄海蜇批发市场', address: '山东省滨州市沾化县富桥路405号', province: '山东', value: [117.94507500, 37.75016700], visualMap: false, newDate: '2020-08-15'},
{name: '山东省临沂市华东淡水鱼批发市场', address: '临沂市北园路6号', province: '山东', value: [118.34964500, 35.15801000], visualMap: false, newDate: '2020-08-15'},
{name: '山东省威海水产品批发市场', address: '山东省威海市环翠区顺河街188号', province: '山东', value: [122.11957200, 37.50407200], visualMap: false, newDate: '2020-08-15'},
{name: '河南省郑州市柳林水产批发市场', address: '郑州市金水区柳林镇郑花路北段柳林水产品批发市场', province: '河南', value: [113.69081200, 34.83705700], visualMap: false, newDate: '2020-08-15'},
{name: '湖北省武汉市白沙洲农副产品大市场', address: '湖北省武汉市洪山区张家湾特1号', province: '湖北', value: [114.27418500, 30.47076800], visualMap: false, newDate: '2020-08-15'},
{name: '湖北省孝感市南大水产品批发市场', address: '孝感市107国道与316国道交合处', province: '湖北', value: [113.97923200, 30.88929600], visualMap: false, newDate: '2020-08-15'},
{name: '湖南洞庭渔都股份有限公司（岳阳洞庭水产批发市场）', address: '岳阳市楼区东风湖路78号', province: '湖南', value: [113.10916800, 29.39883800], visualMap: false, newDate: '2020-08-15'},
{name: '广东省南海盐步环球水产交易市场', address: '佛山市南海区广佛公路平地路段', province: '广东', value: [113.16316200, 23.11600200], visualMap: false, newDate: '2020-08-15'},
{name: '广东省汕头大洋水产交易市场', address: '汕头市海滨路33号', province: '广东', value: [116.71700700, 23.35911200], visualMap: false, newDate: '2020-08-15'},
{name: '东莞市沿江富绅市场经营管理有限公司', address: '东莞市虎门镇沿江东路62号新洲水产品批发市场办公室', province: '广东', value: [113.67847800, 22.81675900], visualMap: false, newDate: '2020-08-15'},
{name: '广州水产集团鱼市场经营管理有限公司', address: '广州市荔湾区芳村招村70亩商业区', province: '广东', value: [113.26457300, 23.14327900], visualMap: false, newDate: '2020-08-15'},
{name: '广东省江门水产（咸鱼）批发市场', address: '江门市江会路70号', province: '广东', value: [113.08075600, 22.56740300], visualMap: false, newDate: '2020-08-15'},
{name: '广西北海市外沙水产品批发市场', address: '广西北海市合浦县廉州镇爱卫街二巷2号', province: '广西', value: [109.21357100, 21.66720800], visualMap: false, newDate: '2020-08-15'},
{name: '四川省内江市水产批发市场', address: '四川省内江市中区牌楼路313号', province: '四川', value: [105.07417600, 29.57049200], visualMap: false, newDate: '2020-08-15'},
{name: '福州名成水产品市场有限公司', address: '福州市马尾区青洲路66号', province: '福建', value: [119.47893300, 25.99550200], visualMap: false, newDate: '2020-08-15'},
{name: '四川成都农产品中心批发市水产分场', address: '成都市西航港成白路98号', province: '四川', value: [104.07537900, 30.70897800], visualMap: false, newDate: '2020-08-15'},
{name: '乌鲁木齐北园春果业经营有限责任公司', address: '新疆乌鲁木齐市沙依巴克区克拉玛依西街1168号北园春农产品批发市场B4-4-1-9号', province: '新疆', value: [87.58357400, 43.82808700], visualMap: false, newDate: '2020-08-15'},
{name: '浙江省温州浙福边贸水产城（苍南）', address: '浙江苍南县城建兴西路608号', province: '浙江', value: [120.38836000, 27.50192500], visualMap: false, newDate: '2020-08-15'},
{name: '山东省青岛市城阳蔬菜水产品批发市场有限公司', address: '青岛城阳区政府308国道西侧山东国际农展中心二楼信息科', province: '山东', value: [120.38249400, 36.30921600], visualMap: false, newDate: '2020-08-15'},
{name: '北京京丰岳各庄农副产品批发市场中心', address: '北京市丰台区西四环中路140号', province: '北京', value: [116.28465800, 39.88338100], visualMap: false, newDate: '2020-08-15'},
{name: '山西太原五龙口海鲜市场', address: '太原市敦化南路49号', province: '山西', value: [112.59758100, 37.88774100], visualMap: false, newDate: '2020-08-15'},
{name: '河北唐山市君瑞联合农贸市场有限公司', address: '河北省唐山市南新东道252号', province: '河北', value: [118.11221200, 39.65745100], visualMap: false, newDate: '2020-08-15'},
{name: '呼和浩特融桥海鲜批发市场', address: '大学东路与展东路路口', province: '内蒙古', value: [111.67110800, 40.83416600], visualMap: false, newDate: '2020-08-15'},
{name: '辽宁省东港黄海水产品市场', address: '东港市东港路98号', province: '辽宁', value: [124.15754500, 39.91121100], visualMap: false, newDate: '2020-08-15'},
{name: '辽宁省盘山县胡家河蟹市场', address: '盘山县胡家镇', province: '辽宁', value: [121.95696200, 41.29536400], visualMap: false, newDate: '2020-08-15'},
{name: '江苏凌家塘市场发展有限公司', address: '江苏省常州市武进区新312国道邹区段西侧', province: '江苏', value: [119.86913300, 31.78283700], visualMap: false, newDate: '2020-08-15'},
{name: '江苏省苏州市南环桥农副产品批发市场', address: '苏州市南环东路南环桥东堍', province: '江苏', value: [120.69496400, 31.26949400], visualMap: false, newDate: '2020-08-15'},
{name: '浙江省中国水产城(象山石浦)', address: '浙江省宁波市象山县石浦镇中国水产城管委会', province: '浙江', value: [121.91634400, 29.19378000], visualMap: false, newDate: '2020-08-15'},
{name: '浙江省慈溪农副产品批发市场', address: '慈溪市白沙街道东外环线东北侧（二楼财务室王群）', province: '浙江', value: [121.29022500, 30.17822100], visualMap: false, newDate: '2020-08-15'},
{name: '浙江省台州市华东水产品交易有限公司', address: '浙江省台州市椒江区工人西路998号（葭芷渔港内）', province: '浙江', value: [121.43639400, 28.68584300], visualMap: false, newDate: '2020-08-15'},
{name: '浙江省瑞安市瑞城水产品市场管理有限公司', address: '浙江省瑞安经济开发区滨江大道860号', province: '浙江', value: [120.65405100, 27.75456700], visualMap: false, newDate: '2020-08-15'},
{name: '大连盛兴水产品交易市场有限公司', address: '辽宁省大连市西岗区沿海街8号', province: '辽宁', value: [121.72472600, 39.02015600], visualMap: false, newDate: '2020-08-15'},
{name: '温州市水产批发交易市场', address: '温州市龙湾区海棠路与滨海四道交叉口西南50米', province: '浙江', value: [120.80459200, 27.83950300], visualMap: false, newDate: '2020-08-15'},
{name: '浙江省中国舟山国际水产城', address: '舟山市普陀区沈家门渔市大街1号5F', province: '浙江', value: [122.29109200, 29.94694100], visualMap: false, newDate: '2020-08-15'},
{name: '安徽省合肥市周谷堆水产品批发市场', address: '安徽省合肥市瑶海区大兴镇', province: '安徽', value: [117.39211600, 31.84919800], visualMap: false, newDate: '2020-08-15'},
{name: '河北省秦皇岛海港区天桥市场', address: '秦皇岛海港区', province: '河北', value: [119.61504900, 39.93687900], visualMap: false, newDate: '2020-08-15'},
{name: '北京大红门京深海鲜批发市场有限公司', address: '北京市丰台区石榴庄西街232号', province: '北京', value: [116.42196000, 39.84838000], visualMap: false, newDate: '2020-08-15'},
{name: '河北省石家庄雨润农产品全球采购有限公司', address: '石家庄南二环大桥', province: '河北', value: [114.50717400, 37.97755600], visualMap: false, newDate: '2020-08-15'},
{name: '辽宁省沈阳水产品批发市场', address: '沈阳水产品', province: '辽宁', value: [123.31391000, 41.78260900], visualMap: false, newDate: '2020-08-15'},
{name: '辽宁省前当堡鲜鱼批发市场', address: ' 无', province: '辽宁', value: [122.88651200, 41.78901000], visualMap: false, newDate: '2020-08-15'},
{name: '吉林省长春市光复路水产批发市场', address: '长春市光复路', province: '吉林', value: [125.34919600, 43.91155900], visualMap: false, newDate: '2020-08-15'},
{name: '吉林省延吉市西市场', address: '吉林省延边朝鲜族自治州延吉市解放路', province: '吉林', value: [129.51478200, 42.91275800], visualMap: false, newDate: '2020-08-15'},
{name: '上海东方国际水产中心经营管理有限公司', address: '上海东方国际水产中心', province: '上海', value: [121.54900500, 31.33938500], visualMap: false, newDate: '2020-08-15'},
{name: '安徽省安庆市皖宜季牛水产养殖有限责任公司长青大市场分公司', address: '安庆市华中路79号', province: '安徽', value: [117.079784, 30.513423], visualMap: false, newDate: '2020-08-15'},
{name: '安徽省蚌埠城南农副产品交易有限公司', address: '安徽省蚌埠', province: '安徽', value: [117.33269200, 32.89946300], visualMap: false, newDate: '2020-08-15'},
{name: '中国供销上饶农产品交易城', address: '江西省上饶市上饶县城南大道11号 ', province: '江西', value: [117.92193300, 28.39829100], visualMap: false, newDate: '2020-08-15'},
{name: '山东济南海鲜大市场', address: '济南市市中区小梁庄街277号', province: '山东', value: [116.99420600, 36.64910600], visualMap: false, newDate: '2020-08-15'},
{name: '长沙市马王堆农产品股份有限公司海鲜水产批发市场', address: '长沙市马王堆农产品股份有限公司', province: '湖南', value: [113.04102400, 28.20187700], visualMap: false, newDate: '2020-08-15'},
{name: '海南马井水产品交易市场管理有限公司', address: '海南马井', province: '海南', value: [109.22729200, 19.72200900], visualMap: false, newDate: '2020-08-15'},
{name: '重庆市乐邦水产品有限公司', address: '重庆沙坪坝区井口街道', province: '重庆', value: [106.48452800, 29.59447400], visualMap: false, newDate: '2020-08-15'},
{name: '重庆市龙门实业（集团）有限公司西三街农副水产品市场', address: '龙门实业（集团）有限公司西三街农副水产品市场', province: '重庆', value: [106.58898500, 29.56126400], visualMap: false, newDate: '2020-08-15'},
{name: '普洱天恒市场经营公司五一市场', address: '普洱天恒市场经营公司五一市场', province: '云南', value: [100.97417100, 22.79145600], visualMap: false, newDate: '2020-08-15'},
{name: '西安海隆实业有限责任公司（北二环水产批发中心）', address: '西安海隆实业有限责任公司（北二环水产批发中心）', province: '陕西', value: [108.95263000, 34.27420400], visualMap: false, newDate: '2020-08-15'},
{name: '甘肃省兰州市绿色食品市场', address: '兰州市绿色食品市场', province: '甘肃', value: [103.88351700, 36.06708900], visualMap: false, newDate: '2020-08-15'},
{name: '江苏省南京市众彩农副产品批发市场', address: '南京市', province: '江苏', value: [118.89382400, 31.99477500], visualMap: false, newDate: '2020-08-15'},
{name: '甘肃陇南市武都区体育场大市场', address: '陇南市武都区体育场', province: '甘肃', value: [104.967414, 33.373396], visualMap: false, newDate: '2020-08-15'},
{name: '白银市白银区文化路市场', address: '白银市白银区文化路', province: '甘肃', value: [104.184824, 36.554399], visualMap: false, newDate: '2020-08-15'},
{name: '张掖市南关蔬菜果品水产品批发市场', address: '张掖市南关饮马桥', province: '甘肃', value: [100.468753, 38.930773], visualMap: false, newDate: '2020-08-15'},
{name: '山东日照市石臼市场', address: '日照市石臼街道石臼路', province: '山东', value: [119.55451100, 35.39756900], visualMap: false, newDate: '2020-08-15'},
{name: '福建省莆田市闽中水产品批发市场', address: ' 福建省莆田市涵江区塘北路西侧', province: '福建', value: [119.11405600, 25.46307200], visualMap: false, newDate: '2020-08-15'},
{name: '攀枝花攀达水产批发市场有限公司', address: '攀枝花市东区银江镇沙坝村马家田', province: '四川', value: [104.07537900, 30.70897800], visualMap: false, newDate: '2020-08-15'},
{name: '重庆市涪陵区新大兴国际农产品批发市场', address: '重庆市涪陵区人民东路后街109号', province: '重庆', value: [107.40430500, 29.71266100], visualMap: false, newDate: '2020-08-15'},
{name: '江西省萍乡市城南水产批发市场', address: '萍乡市环城南路与萍麻公路交汇处', province: '江西', value: [113.85277800, 27.61884100], visualMap: false, newDate: '2020-08-15'},
{name: '上海江杨水产品批发市场经营管理有限公司', address: '上海市宝山区铁城路1555号', province: '上海', value: [121.458468, 31.361636], visualMap: false, newDate: '2020-08-15'},
{name: '湖北中和农产品大市场有限责任公司', address: '仙桃市黄金大道西段55号', province: '湖北', value: [113.41922500, 30.36607300], visualMap: false, newDate: '2020-08-15'},
{name: '湖州菱湖乌板桥水产品批发市场', address: '浙江省湖州市南浔区菱湖镇北桥浜路52号', province: '浙江', value: [120.16171900, 30.78536700], visualMap: false, newDate: '2020-08-15'},
{name: '辽宁省大连辽渔国际水产品市场', address: '辽宁省大连市甘井子区大连湾街8-136号', province: '辽宁', value: [121.70593400, 39.02742000], visualMap: false, newDate: '2020-08-15'},
{name: '广西南宁海陆丰水产品批发市场', address: ' 无', province: '广西', value: [120.65405100, 27.75456700], visualMap: false, newDate: '2020-08-15'},
{name: '云南华潮水产品批发市场', address: ' 无', province: '云南', value: [102.77981500, 24.97897700], visualMap: false, newDate: '2020-08-15'},
{name: '上海江阳水产品批发交易市场经营管理有限公司', address: '上海市宝山区泰和路1700号', province: '上海', value: [121.45575100, 31.36268000], visualMap: false, newDate: '2020-08-15'},
{name: '三亚崖州港湾投资有限公司', address: '海南省三亚市崖州区崖州中心渔港', province: '海南', value: [109.13429200, 18.36210000], visualMap: false, newDate: '2020-08-15'},
{name: '湖北宜昌三峡物流园有限公司水产市场', address: '伍家乡三峡物流园', province: '湖北', value: [11.39861700, 30.66971200], visualMap: false, newDate: '2020-08-15'},
{name: '海南海口水产品批发市场', address: '新埠路8号 ', province: '海南', value: [110.37419400, 20.07357500], visualMap: false, newDate: '2020-08-15'},
{name: '湖北黄冈硕源水产品批发市场', address: ' 无', province: '湖北', value: [114.89112300, 30.43404300], visualMap: false, newDate: '2020-08-15'},
]
const provinceData = [
{ name: '北京', value: 177 },
{ name: '天津', value: 42 },
{ name: '河北', value: 102 },
{ name: '山西', value: 81 },
{ name: '内蒙古', value: 17 },
{ name: '辽宁', value: 67 },
{ name: '吉林', value: 182 },
{ name: '黑龙江', value: 100 },
{ name: '上海', value: 24 },
{ name: '江苏', value: 299 },
{ name: '浙江', value: 114 },
{ name: '安徽', value: 29 },
{ name: '福建', value: 316 },
{ name: '江西', value: 91 },
{ name: '山东', value: 19 },
{ name: '河南', value: 137 },
{ name: '湖北', value: 26 },
{ name: '湖南', value: 114 },
{ name: '重庆', value: 91 },
{ name: '四川', value: 25 },
{ name: '贵州', value: 62 },
{ name: '云南', value: 83 },
{ name: '西藏', value: 9 },
{ name: '陕西', value: 80 },
{ name: '甘肃', value: 256 },
{ name: '青海', value: 10 },
{ name: '宁夏', value: 18 },
{ name: '新疆', value: 67 },
{ name: '广东', value: 123 },
{ name: '广西', value: 59 },
{ name: '海南', value: 14 }
]
const provinces = ['shanghai', 'hebei', 'shanxi', 'neimenggu', 'liaoning', 'jilin', 'heilongjiang', 'jiangsu', 'zhejiang', 'anhui', 'fujian', 'jiangxi', 'shandong', 'henan', 'hubei', 'hunan', 'guangdong', 'guangxi', 'hainan', 'sichuan', 'guizhou', 'yunnan', 'xizang', 'shanxi1', 'gansu', 'qinghai', 'ningxia', 'xinjiang', 'beijing', 'tianjin', 'chongqing', 'xianggang', 'aomen', 'taiwan']
const provinceText = ['上海', '河北', '山西', '内蒙古', '辽宁', '吉林', '黑龙江', '江苏', '浙江', '安徽', '福建', '江西', '山东', '河南', '湖北', '湖南', '广东', '广西', '海南', '四川', '贵州', '云南', '西藏', '陕西', '甘肃', '青海', '宁夏', '新疆', '北京', '天津', '重庆', '香港', '澳门', '台湾']
export default {
name: 'RiceFishMap',
components: {
BorderBox,
},
props: {
data: {
type: Array,
default() {
return []
}
},
visualLabel: {
type: Array,
default() {
return ['高', '低']
}
},
visualFormatter: {
type: [String, Function],
default() {
return ({data}) => {
if (data.name && data.address) {
return `
<div class="map-tooltip-info">
<h3>${data.name}</h3>
<p><span>区域：</span>苏州市吴中区</p>
<p><span>总面积：</span>487亩</p>
<p><span>水稻总产值/产量：</span>178,533万元/83,474吨</p>
<p><span>水产品总产值/产量：</span>98,533万元/23,474吨</p>
</div>
`
} else {
return `
<div class="map-tooltip-info">
<h3>${data.name}</h3>
<p><span>示范区数量：</span>59,844个</p>
<p><span>企业数量：</span>6,548,874个</p>
<p><span>总面积：</span>548,799亩</p>
<p><span>水稻总产值/产量：</span>45,178,533万元/983,474吨</p>
<p><span>水产品总产值/产量：</span>398,533万元/423,474吨</p>
</div>
`
}
}
}
},
visualConfig: {
type: Object,
default() {
return {}
}
},
},
data() {
return {
range: [0, 80],
map: null,
mapName: 'china',
config: {
geo: {
map: 'china',
// left: '1%',
// right: '1%',
layoutCenter: ['50%', '50%'],
layoutSize: '100%',
zoom: 1, //当前视角的缩放比例
label: {
normal: {
show: true,
color: '#fff',
fontSize: 12 * this.sizeRate,
},
emphasis: {
color: '#fff',
fontSize: 15 * this.sizeRate,
}
},
itemStyle: {
normal: {
borderColor: 'rgba(91, 213, 255, 0.9)',
borderWidth: 0.5,
},
emphasis: {
areaColor: '#069ae1',
}
},
regions: [],
},
series: []
},
curProvince: null,
}
},
mounted() {
this.$nextTick(this.initMap)
},
computed: {
sizeRate() {
return Number((screen.height / 800).toFixed(1))
},
},
methods: {
initMap() {
// 初始化echarts
this.$echarts.registerMap(this.mapName, china)
this.map = this.$echarts.init(this.$refs.map)
this.addEvent()
this.config.series.push({
type: 'map',
map: this.mapName,
geoIndex: 0,
data: provinceData,
})
this.config.series.push({
type: 'scatter', // series图表类型
coordinateSystem: 'geo', // series坐标系类型
data: mock,
itemStyle: {
color: 'gold'
},
symbolSize: 20 * this.sizeRate,
symbol: 'pin',
geoIndex: 0,
})
this.config.tooltip = {
trigger: 'item',
formatter: this.visualFormatter,
// extraCssText: `background-image:url(${require('@/assets/images/tooltip.png')});background-size:cover;`,
}
this.config.visualMap = Object.assign({
show: false,
inRange: {
// opacity: 1,
color: ['rgba(140,228,252,0.1)', '#0ed7e1', '#069ae1']
// color: ['rgba(91, 213, 255, 0.1)', 'rgba(91, 213, 255, 0.8)']
}
}, this.visualConfig)
this.map.setOption(this.config)
},
isProvince(name) {
return provinceText.some(province => province === name)
},
loadMapSource(name) {
// 获取这个省的拼音名字 name = '四川' => pinyinName = 'sichuan'
const pinyinName = provinces[provinceText.indexOf(name)]
// 引入这个对应的地图JS，如果是在项目中要打包，请将这些文件提取出来，放在静态资源中
// build的时候这些文件不会被打包，无可加载资源地图是不会显示的！！！！
require(`echarts/map/js/province/${pinyinName}`)
this.loadMap(name)
},
loadMap(name) {
this.map.clear()
const config = {
geo: {
map: name,
layoutCenter: ['40%', '50%'],
layoutSize: '90%',
zoom: 1, //当前视角的缩放比例
itemStyle: {
areaColor: 'rgba(0, 0, 0, 0.5)',
borderColor: 'rgba(91, 213, 255, 1)',
borderWidth: 1,
},
emphasis: {
label: {
show: false,
},
itemStyle: {
areaColor: 'rgba(0, 0, 0, 0.5)',
}
},
regions: [],
},
series: []
}
this.map.setOption(config)
},
addEvent() {
this.map.on('click', ({name}) => {
if (this.isProvince(name)) {
this.loadMapSource(name)
}
})
// // 监听地图点击事件
// this.map.on('click', (ev) => {
// const {name} = ev.data
// console.log(name)
// this.setRegions(name)
// this.curProvince = name
// this.$emit('select', name)
// })
// // 点击空白处则取消选中状态
// this.map.getZr().on('click', e => {
// if (!e.target && this.curProvince) {
// const name = this.curProvince
// this.setRegions(null)
// this.$emit('select', name)
// }
// })
},
// setRegions(name) {
// this.curProvince = name
// if (!name) {
// this.config.geo.regions = []
// this.map.setOption(this.config)
// return
// }
// let regions = [{
// name,
// selected: true,
// itemStyle: {
// areaColor: '#5ad4ff',
// shadowColor: 'rgba(0, 0, 0, 1)',
// shadowBlur: 10,
// shadowOffsetY: 10,
// shadowOffsetX: -5,
// }
// }]
// if (this.config.geo.regions.length > 0 && this.config.geo.regions[0].name == name) {
// regions = []
// }
// this.config.geo.regions = regions
// this.map.setOption(this.config)
// },
},
// watch: {
// data(cur, past) {
// if (cur && cur !== past && cur.length > 0) {
// this.config.series.push({
// type: 'scatter',
// coordinateSystem: 'geo',
// // map: this.mapName,
// // geoIndex: 0,
// data: cur,
// })
// this.config.tooltip = {
// trigger: 'item',
// formatter: this.visualFormatter,
// }
// // this.config.visualMap = Object.assign({
// // show: false,
// // inRange: {
// // opacity: 0.5,
// // color: ['rgba(91, 213, 255, 0.1)', 'rgba(91, 213, 255, 0.8)']
// // }
// // }, this.visualConfig)
// this.map.setOption(this.config)
// }
// }
// }
}
</script>
<style lang="stylus" scoped>
.map-wrapper
width 100%
height 100%
position relative
padding-top 3rem
>.map
position absolute
width 45%
height 250%
z-index 99
>.sum
width 40%
margin 2rem auto 0
text-align center
font-weight bold
h2,.count
color $edgeColor !important
font-family $font-pang !important
font-size 1.5rem !important
.visual-range
display flex
z-index 9999
width 100%
align-items center
justify-content center
position absolute
bottom 2rem
p
text-align center
margin-right 1rem
span
font-size .8rem
.slider-wrapper
position relative
width 60%
.slider
width 100%
.count
position absolute
&:first-child
left 0
&:last-child
right 0
</style>
<style lang="stylus">
.map-tooltip-info
color $edgeColor
padding 1rem
border .1rem solid $edgeColor
span
color #fff
</style>
src/views/fishing-price.vue
View file @ 8d0bf3a8
......@@ -67,5 +67,4 @@ export default {
margin-right 1rem
.year-select
width 15%
</style>
src/views/rice-fish.vue 0 → 100644
View file @ 8d0bf3a8
<template>
<m-grid
:template="[
'map select select',
'map box1 box1',
'map box2 box3',
'map box4 box4',
]"
columns="1fr 0.6fr 0.6fr"
rows="2rem 1fr 1fr 1fr"
gap="0.5rem"
>
<div class="year-select-wrapper" area="select">
<p>主显示</p>
<Select class="year-select" @on-change="$store.commit('SET_MAIN_YEAR', $event)" v-model="disease" transfer>
<Option v-for="item in options" :key="item" :value="item">{{item}}</Option>
</Select>
</div>
<RiceFishMap area="map" />
<m-card area="box1" title="养殖模式数据占比">
<ModeRate />
</m-card>
<m-card area="box2" title="各面积占比">
<AreaRate />
</m-card>
<m-card area="box3" title="稻小龙虾数据对比">
<DataComparison />
</m-card>
<m-card area="box4" title="稻虾加工情况统计">
<ProcessSituation />
</m-card>
</m-grid>
</template>
<script>
import RiceFishMap from './components/rice-fish/rice-fish-map'
import ModeRate from './components/rice-fish/mode-rate'
import AreaRate from './components/rice-fish/area-rate'
import DataComparison from './components/rice-fish/data-comparison'
import ProcessSituation from './components/rice-fish/process-situation'
export default {
name: 'RiceFish',
components: {
RiceFishMap,
ModeRate,
AreaRate,
DataComparison,
ProcessSituation,
},
data() {
return {
disease: '2019',
options: ['2019', '2018', '2017'],
}
},
}
</script>
<style lang="stylus" scoped>
.year-select-wrapper
display flex
align-items center
justify-content flex-end
p
font-size 1.2rem
font-weight bold
margin-right 1rem
.year-select
width 15%
</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