Skip to content

D
dashboard
Commit f35326ba authored by 郭铭瑶's avatar 郭铭瑶 🤘
Browse files
Options

完善

parent d0f6a001
Hide whitespace changes
Inline Side-by-side
Showing with 571 additions and 292 deletions
build/webpack.base.conf.js
View file @ f35326ba
......@@ -51,6 +51,10 @@ module.exports = {
loader: 'babel-loader',
include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
},
{
test: /view-design.src.*?js$/,
loader: 'babel-loader',
},
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
......
index.html
View file @ f35326ba
......@@ -7,7 +7,7 @@
<title>dashboard</title>
<style>
html {
font-size: 1vw;
font-size: 1.8vh;
}
</style>
<script language="javascript" src="http://webapi.amap.com/maps?v=1.4.15&key=ee2b5d5c0c44c768f1d2593eb4a7dfa6&plugin=Map3D,AMap.DistrictSearch,AMap.ControlBar"></script>
......
src/App.vue
View file @ f35326ba
......@@ -12,6 +12,7 @@ export default {
<style lang="stylus">
@import './assets/css/variables.styl'
@import './assets/css/reset.styl'
@font-face
font-family DIN
......
src/assets/css/reset.styl 0 → 100644
View file @ f35326ba
$color-main = #5BD5FF
#app
.ivu-select-selection
.ivu-select-dropdown
font-size 0.8rem
background-color rgba(0,0,0,0.2)
border-radius 0
border 0.1rem solid $color-main
color $color-main
padding 0
.ivu-select-arrow
color $color-main
.ivu-select-selected-value
font-size 0.8rem
.ivu-select-item
font-size 0.8rem !important
text-align center
color $color-main
&:hover
&.ivu-select-item-selected
color #fff
background $color-main
src/assets/css/variables.styl
View file @ f35326ba
......@@ -3,6 +3,16 @@ $font-pang = Pangmenzhengdao, 'Avenir', Helvetica, Arial, sans-serif
$font-din = DIN, 'Avenir', Helvetica, Arial, sans-serif
$color-map(opacity = 0.3)
rgba(91, 213, 255, opacity)
$gd-layout()
width 100%
height 100%
background-size cover
background-position center
background-color #061627
position relative
display grid
grid-gap 1rem
padding 1rem
$fontColor = #2c3e50
......
src/components/MonitorChart/index.js 0 → 100644
View file @ f35326ba
import MonitorChart from './monitor-chart.vue'
export default (Vue) => {
Vue.component('m-chart', MonitorChart)
}
src/views/guangdong/components/purchase-chart.vue → src/components/MonitorChart/monitor-chart.vue
View file @ f35326ba
// 交易分析专题 - 累计违规举报次数
<template>
<div class="chart" ref="chart"/>
</template>
<script>
export default {
name: 'PurchaseChart',
name: 'CommonChart',
props: {
data: {
type: Array,
default() {
return []
},
},
showLegend: {
type: Boolean,
default: true,
},
options: {
type: Object,
default() {
return {
colors: null,
grid: {},
legend: {},
tooltip: {},
xAxis: {},
yAxis: {},
}
}
},
},
mounted() {
this.init()
this.$nextTick(this.init)
},
methods: {
init() {
const chart = this.$echarts.init(this.$refs.chart)
const options = {
chart.setOption(this.config)
}
},
computed: {
config() {
const options = {}
const colors = this.options.colors || ['#21640D', '#2F8B14', '#71C012', '#FFCE34', '#F47C1F']
options.grid = Object.assign(this.defaultOptions.grid, this.options.grid)
options.tooltip = Object.assign(this.defaultOptions.tooltip, this.options.tooltip)
options.xAxis = Object.assign(this.defaultOptions.xAxis, this.options.xAxis)
options.yAxis = Object.assign(this.defaultOptions.yAxis, this.options.yAxis)
if(this.showLegend) {
options.legend = Object.assign(this.defaultOptions.legend, this.options.legend)
options.legend.data = this.data.map(item => item.name)
}
options.series = this.data.map((item, index) => {
let color = colors[index]
if (Array.isArray(color)) {
color = new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
{offset: 0, color: color[0]},
{offset: 1, color: color[1]}
])
}
const result = {
name: item.name,
barWidth: '50%',
itemStyle: { color },
data: item.data || []
}
if (this.options.series) {
return Object.assign(result, this.options.series)
}
return result
})
return options
},
defaultOptions() {
return {
grid: {
top: '50px',
left: '30px',
right: '30px',
top: '25%',
left: '3%',
right: '3%',
bottom: '5px',
width: 'auto',
height: 'auto',
containLabel: true,
},
legend: {
top: 20,
right: 10,
data: ['供应数据', '采购数据'],
top: '5%',
left: '6%',
width: '100%',
data: [],
itemWidth: 15,
textStyle: {
color: '#ccc',
fontSize: this.fontSize,
......@@ -39,7 +103,7 @@ export default {
},
xAxis: {
type: 'category',
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
data: [],
axisLabel: {
textStyle: {
color: '#ccc',
......@@ -59,13 +123,11 @@ export default {
}
},
yAxis: {
name: '(吨)',
nameTextStyle: {
color: '#fff',
fontSize: this.fontSize,
},
type: 'value',
interval: 2000,
splitLine: {
show: true,
lineStyle: {
......@@ -84,52 +146,18 @@ export default {
}
},
},
series: [
{
name: '供应数据',
type: 'bar',
barWidth: '30%',
barGap: 0,
itemStyle: {
shadowColor: '#0076FF',
shadowBlur: 6,
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
{offset: 0, color: '#1FECFF'},
{offset: 1, color: '#0076FF'}
])
},
data: [6500, 8500, 6000, 4600, 5600, 8500, 6000, 2500, 4500, 6500, 4500, 8000],
},
{
name: '采购数据',
type: 'bar',
barWidth: '30%',
barGap: 0,
itemStyle: {
shadowColor: '#c16ad6',
shadowBlur: 6,
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
{offset: 0, color: '#c16ad6'},
{offset: 1, color: '#3725b2'}
])
},
data: [5500, 9000, 5000, 3600, 4600, 7500, 7000, 3500, 5500, 7500, 5500, 6700],
},
],
}
chart.setOption(options)
}
},
computed: {
},
fontSize() {
return Math.floor(window.innerWidth / 100) - 1
// return Math.floor(window.innerWidth / 100) - 1
return Math.floor(screen.height * 1.48 / 100)
},
}
}
</script>
<style lang="stylus" scoped>
.chart
height 100%
width 100%
.chart
height 100%
width 100%
</style>
src/components/MonitorFlip/monitor-flip.vue
View file @ f35326ba
......@@ -42,4 +42,6 @@ export default {
background linear-gradient($color-map() 47%, transparent 50%, $color-map() 53%)
margin-right 0.4rem
padding 0 0.4rem
.odometer-digit-inner
padding 0 0.4rem
</style>
src/main.js
View file @ f35326ba
......@@ -5,10 +5,11 @@ import Vue from 'vue'
import App from './App'
import router from './router'
import echarts from 'echarts'
import {Button, Divider, Progress} from 'view-design'
import {Button, Divider, Progress, Select, Option} from 'view-design'
import ajax from '@/server/ajax'
import api from '@/server/api'
import MonitorCard from '@/components/MonitorCard'
import MonitorChart from '@/components/MonitorChart'
import MonitorCount from '@/components/MonitorCount'
import MonitorFlip from '@/components/MonitorFlip'
import MonitorBrief from '@/components/MonitorBrief'
......@@ -24,9 +25,12 @@ Vue.use(MonitorCount)
Vue.use(MonitorFlip)
Vue.use(MonitorBrief)
Vue.use(MonitorProgress)
Vue.use(MonitorChart)
Vue.component('Button', Button)
Vue.component('Divider', Divider)
Vue.component('Progress', Progress)
Vue.component('Select', Select)
Vue.component('Option', Option)
/* eslint-disable no-new */
new Vue({
......
src/router/index.js
View file @ f35326ba
import Vue from 'vue'
import Router from 'vue-router'
import Main from '@/views/main'
import ChinaMap from '@/views/china'
import GDProduction from '@/views/guangdong/gd-production'
import GDTrade from '@/views/guangdong/gd-trade'
import GDDisease from '@/views/guangdong/gd-disease'
import GDFish from '@/views/guangdong/gd-fish'
import MapTest from '@/views/map-test'
import Map3D from '@/views/3d-map'
const Main = () => import('@/views/main')
const ChinaMap = () => import('@/views/china')
const GDProduction = () => import('@/views/guangdong/gd-production')
const GDTrade = () => import('@/views/guangdong/gd-trade')
const GDDisease = () => import('@/views/guangdong/gd-disease')
const GDFish = () => import('@/views/guangdong/gd-fish')
const GDIndustry = () => import('@/views/guangdong/gd-industry')
const MapTest = () => import('@/views/map-test')
const Map3D = () => import('@/views/3d-map')
Vue.use(Router)
......@@ -43,6 +45,11 @@ export default new Router({
name: 'fish',
component: GDFish
},
{
path: '/industry',
name: 'industry',
component: GDIndustry
},
{
path: '/map2',
name: 'map2',
......
src/views/guangdong/components/disease-pie.vue
View file @ f35326ba
......@@ -4,9 +4,8 @@
</template>
<script>
import { log } from 'util'
export default {
name: 'DiseaseTrend',
name: 'DiseasePie',
data() {
return {
data: [
......
src/views/guangdong/components/disease-trend.vue deleted 100644 → 0
View file @ d0f6a001
// 疫病灾害分析专题 - 疫情情况趋势
<template>
<div class="chart" ref="chart"/>
</template>
<script>
export default {
name: 'DiseaseTrend',
mounted() {
this.init()
},
methods: {
init() {
const chart = this.$echarts.init(this.$refs.chart)
const options = {
grid: {
top: '50px',
left: '30px',
right: '30px',
bottom: '5px',
width: 'auto',
height: 'auto',
containLabel: true,
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
xAxis: {
type: 'category',
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
axisLabel: {
textStyle: {
color: '#ccc',
},
fontSize: this.fontSize,
},
axisLine: {
lineStyle: {
color: 'rgba(91,213,255,0.3)'
}
},
splitLine: {
show: true,
lineStyle: {
color: 'rgba(91,213,255,0.3)'
}
}
},
yAxis: {
name: '(次)',
nameTextStyle: {
color: '#fff',
fontSize: this.fontSize,
},
type: 'value',
interval: 2,
min: 0,
max: 10,
splitLine: {
show: true,
lineStyle: {
color: 'rgba(91,213,255,0.3)'
}
},
axisLabel: {
textStyle: {
color: '#ccc',
},
fontSize: this.fontSize,
},
axisLine: {
lineStyle: {
color: 'rgba(91,213,255,0.3)'
}
},
},
series: [
{
type: 'line',
areaStyle: {
color: 'rgba(0, 118, 255, 0.5)'
},
itemStyle: {
color: 'rgba(0, 118, 255, 1)'
},
data: [2,5,8,3,1,6,4,5,8,4,3,4],
},
],
}
chart.setOption(options)
}
},
computed: {
fontSize() {
return Math.floor(window.innerWidth / 100) - 1
},
}
}
</script>
<style lang="stylus" scoped>
.chart
height 100%
width 100%
</style>
src/views/guangdong/components/report-chart.vue → src/views/guangdong/components/fish-chart.vue
View file @ f35326ba
// 交易分析专题 - 累计违规举报次数
// 产业布局分析专题 - 各品种鱼苗数量
<template>
<div class="chart" ref="chart"/>
<div class="wrapper">
<div class="chart" ref="chart" />
<Select v-model="theme" class="select" size="small">
<Option v-for="item in themes" :value="item" :key="item">{{ item }}</Option>
</Select>
</div>
</template>
<script>
export default {
name: 'ReportChart',
name: 'FishChart',
data() {
return {
theme: '淡水鱼',
themes: ['淡水鱼', '海水鱼'],
dates: ['2014年', '2015年', '2016年', '2017年', '2018年'],
}
},
mounted() {
this.init()
},
......@@ -14,14 +26,25 @@ export default {
const chart = this.$echarts.init(this.$refs.chart)
const options = {
grid: {
top: '50px',
left: '30px',
right: '30px',
top: '25%',
left: '3%',
right: '3%',
bottom: '5px',
width: 'auto',
height: 'auto',
containLabel: true,
},
legend: {
top: '5%',
left: '6%',
width: '100%',
data: this.themes,
itemWidth: 15,
textStyle: {
color: '#ccc',
fontSize: this.fontSize,
},
},
tooltip: {
trigger: 'axis',
axisPointer: {
......@@ -30,7 +53,7 @@ export default {
},
xAxis: {
type: 'category',
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
data: this.dates,
axisLabel: {
textStyle: {
color: '#ccc',
......@@ -50,13 +73,15 @@ export default {
}
},
yAxis: {
name: '(次)',
name: '(亿尾)',
nameTextStyle: {
color: '#fff',
fontSize: this.fontSize,
},
type: 'value',
interval: 20,
interval: 200,
min: 8000,
max: 9000,
splitLine: {
show: true,
lineStyle: {
......@@ -79,7 +104,6 @@ export default {
{
type: 'bar',
barWidth: '50%',
barGap: 0,
itemStyle: {
shadowColor: '#0076FF',
shadowBlur: 6,
......@@ -88,7 +112,7 @@ export default {
{offset: 1, color: '#0076FF'}
])
},
data: [30, 50, 10, 60, 70, 40, 50, 70, 30, 50, 90, 58],
data: [8700,8300,8500,8400,8300],
},
],
}
......@@ -104,7 +128,16 @@ export default {
</script>
<style lang="stylus" scoped>
.wrapper
position relative
width 100%
height 100%
.chart
height 100%
width 100%
.select
position absolute
top 1rem
right 1rem
width 8rem
</style>
src/views/guangdong/components/production-chart.vue deleted 100644 → 0
View file @ d0f6a001
// 生产专题 - 各品种养殖/出塘数据
<template>
<div class="chart" ref="chart"/>
</template>
<script>
export default {
name: 'ProductionChart',
mounted() {
this.init()
},
methods: {
init() {
const chart = this.$echarts.init(this.$refs.chart)
const options = {
grid: {
top: '50px',
left: '80px',
right: '80px',
bottom: '5px',
width: 'auto',
height: 'auto',
containLabel: true,
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
xAxis: {
type: 'category',
data: ['淡水育苗', '淡水鱼种', '投放鱼种', '稚鳖', '稚龟', '鳗苗捕捞', '海水鱼苗', '虾类育苗', '贝类育苗', '海带', '紫菜', '海参'],
axisLabel: {
textStyle: {
color: '#ccc',
},
fontSize: this.fontSize,
},
axisLine: {
lineStyle: {
color: 'rgba(91,213,255,0.3)'
}
},
splitLine: {
show: true,
lineStyle: {
color: 'rgba(91,213,255,0.3)'
}
}
},
yAxis: {
name: '(吨)',
nameTextStyle: {
color: '#fff',
fontSize: this.fontSize,
},
type: 'value',
interval: 2000,
splitLine: {
show: true,
lineStyle: {
color: 'rgba(91,213,255,0.3)'
}
},
axisLabel: {
textStyle: {
color: '#ccc',
},
fontSize: this.fontSize,
},
axisLine: {
lineStyle: {
color: 'rgba(91,213,255,0.3)'
}
},
},
series: [
{
type: 'bar',
barWidth: '50%',
barGap: 0,
itemStyle: {
shadowColor: '#0076FF',
shadowBlur: 6,
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
{offset: 0, color: '#1FECFF'},
{offset: 1, color: '#B645FF'}
])
},
data: [6500, 8500, 6000, 4600, 5600, 8500, 6000, 2500, 4500, 6500, 4500, 8000],
},
],
}
chart.setOption(options)
}
},
computed: {
fontSize() {
return Math.floor(window.innerWidth / 100) - 1
},
}
}
</script>
<style lang="stylus" scoped>
.chart
height 100%
width 100%
</style>
src/views/guangdong/components/progress-list.vue
View file @ f35326ba
......@@ -24,6 +24,7 @@ export default {
},
methods: {
calcPercent(val) {
if (!val || val < 0) return 0
const percent = Math.round((val / 50) * 100)
return percent >= 100 ? 100 : percent
}
......
src/views/guangdong/gd-disease.vue
View file @ f35326ba
......@@ -19,7 +19,7 @@
</div>
<div class="box3">
<m-card mode="2" title="疫情情况趋势">
<DiseaseTrend />
<m-chart :showLegend="false" :options="options" :data="data"/>
</m-card>
</div>
<div class="box4">
......@@ -34,7 +34,6 @@
import DataList from './components/list'
import DiseaseList from './components/disease-list'
import ThemeTitle from './components/title'
import DiseaseTrend from './components/disease-trend.vue'
import DiseasePie from './components/disease-pie.vue'
import GuangdongMap from './components/map'
export default {
......@@ -43,12 +42,31 @@ export default {
DataList,
DiseaseList,
ThemeTitle,
DiseaseTrend,
DiseasePie,
GuangdongMap,
},
data() {
return {
options: {
xAxis: {
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
boundaryGap: false,
},
yAxis: {
name: '(次)',
min: 0,
max: 10,
interval: 2,
},
series: {
type: 'line',
areaStyle: {},
},
colors: ['rgba(0, 118, 255, 1)'],
},
data: [
{data: [2,5,8,3,1,6,4,5,8,4,3,4]}
],
list1: [
{name: '淡水鱼苗', value: 8279, unit: '亿尾'},
{name: '淡水鱼种', value: 222544, unit: '吨'},
......@@ -93,21 +111,13 @@ export default {
<style lang="stylus" scoped>
#container
width 100%
height 100%
background-size cover
background-position center
background-color #061627
position relative
display grid
$gd-layout()
grid-template-areas \
'box1 . . . box2'\
'box1 . . . box2'\
'box3 box3 box4 box4 box2'
grid-template-rows 1fr 1fr 1fr
grid-template-columns 1.2fr 1fr 1fr 1fr 1.2fr
grid-gap 0.7rem
padding 0.7rem
.sum
display flex
justify-content space-around
......
src/views/guangdong/gd-fish.vue
View file @ f35326ba
......@@ -67,21 +67,13 @@ export default {
<style lang="stylus" scoped>
#container
width 100%
height 100%
background-size cover
background-position center
background-color #061627
position relative
display grid
$gd-layout()
grid-template-areas \
'. . . box1'\
'. . . box1'\
'box2 box2 box3 box3'
grid-template-rows 1fr 1fr 1fr
grid-template-columns 2fr 1fr 1fr 2fr
grid-gap 0.7rem
padding 0.7rem
.flag
display flex
position absolute
......
src/views/guangdong/gd-industry.vue 0 → 100644
View file @ f35326ba
<template>
<div id="container" :style="`background-image: url(${require('@/assets/images/stars-bg.png')})`">
<ThemeTitle class="theme">广东省产业布局分析专题</ThemeTitle>
<div class="box1">
<m-card mode="2" title="渔业经济产值">
<m-chart :options="options1" :data="data1"/>
</m-card>
</div>
<div class="box2">
<m-card mode="2" title="渔业经济产量">
<m-chart :options="options2" :data="data2"/>
</m-card>
</div>
<div class="box3">
<m-card mode="2" title="渔业加工产量">
<m-chart :options="options3" :data="data3"/>
</m-card>
</div>
<div class="box4">
<m-card mode="2" title="各品种鱼苗数量">
<FishChart />
</m-card>
</div>
<div class="box5">
<m-card mode="2" title="渔业种业经济产量">
<m-chart :options="options5" :data="data5"/>
</m-card>
</div>
<div class="box6">
<m-card mode="2" title="渔业种业经济产值">
<m-chart :options="options4" :data="data4"/>
</m-card>
</div>
</div>
</template>
<script>
import ThemeTitle from './components/title'
import FishChart from './components/fish-chart'
export default {
name: 'GDIndustry',
components: {
ThemeTitle,
FishChart,
},
data() {
return {
options1: {
xAxis: {
data: ['2015年', '2016年', '2017年', '2018年'],
},
yAxis: {
name: '(万元)',
interval: 200,
max: 1600,
},
series: {
type: 'bar',
stack: '总量',
}
},
data1: [
{name: '海水养殖', data: [200,200,200,200]},
{name: '淡水养殖', data: [500,550,580,600]},
{name: '海水捕捞', data: [160,160,160,160]},
{name: '淡水捕捞', data: [100,100,100,100]},
{name: '水产苗种', data: [200,200,200,200]},
],
options2: {
xAxis: {
data: ['2015年', '2016年', '2017年', '2018年'],
},
yAxis: {
name: '(吨)',
interval: 200,
max: 1600,
},
series: {
type: 'bar',
stack: '总量',
}
},
data2: [
{name: '海水养殖', data: [200,200,200,200]},
{name: '淡水养殖', data: [500,550,580,600]},
{name: '海水捕捞', data: [160,160,160,160]},
{name: '淡水捕捞', data: [100,100,100,100]},
{name: '水产苗种', data: [200,200,200,200]},
],
options3: {
colors: ['#F47C1F', '#71C012', '#FFCE34'],
grid: {
right: '5%',
},
xAxis: {
data: ['2015年', '2016年', '2017年', '2018年'],
boundaryGap: false,
},
yAxis: {
name: '(吨)',
interval: 100,
max: 400,
},
series: {
type: 'line',
stack: '总量',
areaStyle: {},
symbol: 'circle',
}
},
data3: [
{name: '水产加工品总量', data: [130,140,150,145]},
{name: '淡水加工品总量', data: [110,120,100,110]},
{name: '海水加工品总量', data: [60,70,80,50]},
],
options4: {
colors: ['#F47C1F', '#71C012', '#FFCE34'],
xAxis: {
data: ['2015年', '2016年', '2017年', '2018年'],
},
yAxis: {
name: '(万元)',
interval: 200,
max: 1600,
},
series: {
type: 'bar',
stack: '总量',
areaStyle: {},
symbol: 'circle',
}
},
data4: [
{name: '渔业产值', data: [200,200,200,200]},
{name: '渔业工业和建筑业', data: [500,550,580,600]},
{name: '渔业流通和服务业', data: [160,160,160,160]},
],
options5: {
colors: ['#347122', '#C13636', '#F47C1F', '#940BC3', '#0076FF'],
grid: {
right: '5%',
},
xAxis: {
data: ['2015年', '2016年', '2017年', '2018年'],
boundaryGap: false,
},
yAxis: {
name: '(吨)',
interval: 100,
min: 200,
max: 900,
},
series: {
type: 'line',
stack: '总量',
symbol: 'circle',
}
},
data5: [
{name: '海水养殖', data: [250,300,350,300]},
{name: '海水捕捞', data: [130,140,150,145]},
{name: '淡水养殖', data: [110,120,100,110]},
{name: '淡水捕捞', data: [60,70,80,50]},
{name: '远洋渔业', data: [160,170,80,150]},
],
}
},
}
</script>
<style lang="stylus" scoped>
#container
$gd-layout()
grid-template-areas \
'. theme .'\
'box1 box2 box3'\
'box4 box5 box6'
grid-template-rows 4rem 1fr 1fr
grid-template-columns 1fr 1fr 1fr
.theme
grid-area theme
width 120%
margin-left -10%
.box1
grid-area box1
.box2
grid-area box2
.box3
grid-area box3
.box4
grid-area box4
.box5
grid-area box5
.box6
grid-area box6
</style>
src/views/guangdong/gd-production.vue
View file @ f35326ba
......@@ -4,7 +4,7 @@
<ThemeTitle>广东省生产专题</ThemeTitle>
<div class="area">
<p>当前广东省养殖面积</p>
<b><m-flip :value="888888888"/></b>
<b><m-flip :value="828688678"/></b>
<span>k㎡</span>
</div>
<div class="box1">
......@@ -19,7 +19,7 @@
</div>
<div class="box3">
<m-card mode="2" title="各品种养殖/出塘数据">
<ProductionChart />
<m-chart :showLegend="false" :options="options" :data="data" />
</m-card>
</div>
</div>
......@@ -28,14 +28,12 @@
<script>
import DataList from './components/list'
import ThemeTitle from './components/title'
import ProductionChart from './components/production-chart.vue'
import GuangdongMap from './components/map'
export default {
name: 'GDProduction',
components: {
DataList,
ThemeTitle,
ProductionChart,
GuangdongMap,
},
data() {
......@@ -76,7 +74,30 @@ export default {
{name: '潮州市', value: 3679, unit: 'k㎡'},
{name: '揭阳市', value: 5240.5, unit: 'k㎡'},
{name: '云浮市', value: 7785.11, unit: 'k㎡'},
]
],
options: {
xAxis: {
data: ['淡水育苗', '淡水鱼种', '投放鱼种', '稚鳖', '稚龟', '鳗苗捕捞', '海水鱼苗', '虾类育苗', '贝类育苗', '海带', '紫菜', '海参'],
},
yAxis: {
name: '(吨)',
interval: 2000,
},
series: {
type: 'bar',
itemStyle: {
shadowColor: '#0076FF',
shadowBlur: 6,
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
{offset: 0, color: '#1FECFF'},
{offset: 1, color: '#B645FF'}
])
},
}
},
data: [
{data: [6500, 8500, 6000, 4600, 5600, 8500, 6000, 2500, 4500, 6500, 4500, 8000]},
],
}
},
}
......@@ -84,21 +105,13 @@ export default {
<style lang="stylus" scoped>
#container
width 100%
height 100%
background-size cover
background-position center
background-color #061627
position relative
display grid
$gd-layout()
grid-template-areas \
'box1 . box2'\
'box1 . box2'\
'box3 box3 box2'
grid-template-rows 1fr 1fr 1fr
grid-template-columns 1fr 3fr 1fr
grid-gap 0.7rem
padding 0.7rem
.box1
grid-area box1
.box2
......
src/views/guangdong/gd-trade.vue
View file @ f35326ba
......@@ -14,12 +14,12 @@
</div>
<div class="box3">
<m-card mode="2" title="采购供应数据">
<PurchaseChart />
<m-chart :options="options1" :data="data1" />
</m-card>
</div>
<div class="box4">
<m-card mode="2" title="累计违规举报次数">
<ReportChart />
<m-chart :showLegend="false" :options="options2" :data="data2" />
</m-card>
</div>
</div>
......@@ -29,8 +29,6 @@
import DataList from './components/list'
import ProgressList from './components/progress-list'
import ThemeTitle from './components/title'
import ReportChart from './components/report-chart.vue'
import PurchaseChart from './components/purchase-chart.vue'
import GuangdongMap from './components/map'
export default {
name: 'GDProduction',
......@@ -38,8 +36,6 @@ export default {
DataList,
ProgressList,
ThemeTitle,
PurchaseChart,
ReportChart,
GuangdongMap,
},
data() {
......@@ -71,7 +67,54 @@ export default {
{name: '海带', value: 28, unit: '元/斤'},
{name: '紫菜', value: 4, unit: '元/斤'},
{name: '海参', value: 200, unit: '元/斤'},
]
],
options1: {
colors: [['#1FECFF', '#0076FF'], ['#c16ad6', '#3725b2']],
legend: {
top: 20,
right: 10,
left: 'auto',
},
xAxis: {
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
},
yAxis: {
name: '(吨)',
interval: 2000,
},
series: {
type: 'bar',
barWidth: '30%',
barGap: 0,
}
},
data1: [
{name: '供应数据', data: [6500, 8500, 6000, 4600, 5600, 8500, 6000, 2500, 4500, 6500, 4500, 8000]},
{name: '采购数据', data: [5500, 9000, 5000, 3600, 4600, 7500, 7000, 3500, 5500, 7500, 5500, 6700]},
],
options2: {
xAxis: {
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
},
yAxis: {
name: '(次)',
interval: 20,
},
series: {
type: 'bar',
itemStyle: {
shadowColor: '#0076FF',
shadowBlur: 6,
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
{offset: 0, color: '#1FECFF'},
{offset: 1, color: '#0076FF'}
])
},
}
},
data2: [
{data: [30, 50, 10, 60, 70, 40, 50, 70, 30, 50, 90, 58]},
],
}
},
}
......@@ -79,21 +122,13 @@ export default {
<style lang="stylus" scoped>
#container
width 100%
height 100%
background-size cover
background-position center
background-color #061627
position relative
display grid
$gd-layout()
grid-template-areas \
'box1 . . box2'\
'box1 . . box2'\
'box3 box3 box4 box4'
grid-template-rows 1fr 1fr 1fr
grid-template-columns 1fr 1.2fr 1.2fr 1fr
grid-gap 0.7rem
padding 0.7rem
.box1
grid-area box1
.box2
......
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