农产品信息智能推荐平台(13)
可视化大屏(5)
可选择行农产品价格查询。
因为对于数据来说,有很多个农产品市场和很多种农产品,所以分析之后感觉还是以查询的形式更利于表达。因此,使用查询表示,分为单个市场单个商品的月平均价格对比(饼状图),多个市场单个商品的价格对比(折线图)。
单市场饼状图:
效果图:
代码如下:
<template>
<div>
<Echart
:options="options"
id="centreLeft1Chart"
height="2.75rem"
width="3.25rem"
></Echart>
</div>
</template>
<script>
import Echart from '@/common/echart'
export default {
data () {
return {
options: {},
};
},
components: {
Echart,
},
props: {
cdata: {
type: Object,
default: () => ({})
},
},
watch: {
cdata: {
handler (newData) {
this.options = {
color: [
"#37a2da",
"#32c5e9",
"#9fe6b8",
"#ffdb5c",
"#ff9f7f",
"#fb7293",
"#e7bcf3",
"#8378ea",
"#2E93FD",
"#16B3FD",
"#FD7F07",
"#E84D67"
],
tooltip: {
trigger: "item",
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
toolbox: {
show: true
},
calculable: true,
legend: {
orient: "horizontal",
icon: "circle",
bottom: 0,
x: "center",
data: newData.xData,
textStyle: {
color: "#fff"
}
},
series: [
{
name: "通过率统计",
type: "pie",
radius: [10, 60],
roseType: "area",
center: ["50%", "70%"],
data: newData.seriesData
}
]
}
},
immediate: true,
deep: true
}
}
};
</script>
<style lang="scss" scoped>
</style>
<template>
<div>
<el-select v-model="value6.market" placeholder="请选择市场" style="width: 1.2rem">
<el-option
v-for="item in cdata.xData"
:key="item"
:label="item"
:value="item">
<span style="float: left">{{ item }}</span>
<span style="float: right; color: #8492a6; font-size: 13px">{{ item }}</span>
</el-option>
</el-select>
<el-select v-model="value6.type" placeholder="请选择商品" style="width: 1.2rem">
<el-option
v-for="item in shangpin"
:key="item"
:label="item"
:value="item">
<span style="float: left">{{ item}}</span>
<span style="float: right; color: #8492a6; font-size: 13px">{{ item}}</span>
</el-option>
</el-select>
<el-button type="primary" icon="el-icon-search" @click="getdata()" style="width: 0.75rem"></el-button>
<Chart :cdata="cdata" />
</div>
</template>
<script>
import Chart from './chart.vue';
export default {
data () {
return {
chaxun:true,
value6:
{'market':'山东淄博市鲁中蔬菜批发市场',
'year':2020,
'type':'丝瓜',
}
,
shangpin:[],
cdata: {
cansu:[],
xData: [],
seriesData: [
]
}
}
},
components: {
Chart,
},
created() {
//刚进入网页的渲染
const _this = this
_this.$axios.get("/market/markets").then(res => {
console.log(res)
_this.cdata.xData = res.data.markets
})
_this.$axios.get("/market/actualtype").then(res2 => {
console.log(res2)
_this.shangpin = res2.data.actualtype
})
},
mounted () {
if(this.chaxun){
this.getdata()
}
},
methods: {
getdata(){
this.cdata.seriesData=[]
this.$axios.post("/market/marketprice", this.value6).then(res4 => {
this.cdata.shangpin = res4.data.pricelist
for (let i=1,len=this.cdata.shangpin.length;i<=len;i++){
var name = 'name'
var all = 'value'
var obj={}
obj[name]=i+"月"
obj[all]=this.cdata.shangpin[i]
this.cdata.seriesData.push(obj)
}
})
this.chaxun=false
}
}
}
</script>
<style lang="scss" scoped>
</style>
多市场对比图:
效果图:
代码:
<template>
<div>
<Echart
:options="options"
id="bottomLeftChart"
height="6.25rem"
width="100%"
></Echart>
</div>
</template>
<script>
import Echart from '@/common/echart'
export default {
data () {
return {
options: {},
};
},
components: {
Echart,
},
props: {
cdata: {
type: Object,
default: () => ({})
},
},
watch: {
cdata: {
handler (newData) {
this.options = {
title: {
text: "",
},
tooltip: {
trigger: "axis",
backgroundColor: "rgba(255,255,255,0.1)",
axisPointer: {
type: "shadow",
label: {
show: true,
backgroundColor: "#7B7DDC"
}
}
},
legend: {
data: newData.value6.checkedMarkets,
textStyle: {
color: "#B4B4B4"
},
top: "0%"
},
grid: {
x: "8%",
width: "88%",
y: "4%"
},
xAxis: {
data: newData.xData,
axisLine: {
lineStyle: {
color: "#B4B4B4"
}
},
axisTick: {
show: false
}
},
yAxis: [
{
splitLine: { show: false },
axisLine: {
lineStyle: {
color: "#B4B4B4"
}
},
axisLabel: {
formatter: "{value} "
}
}
],
series: [],
}
this.setdata();
},
immediate: true,
deep: true
},
},
methods:{
setdata(){
for (let i=0,len=this.cdata.cansu.length;i<len;i++){
this.options.series.push(
{
name: this.cdata.cansu[i].market,
type: "line",
smooth: true,
showAllSymbol: true,
data: this.cdata.cansu[i].list
},
)
}
}
}
}
</script>
<template>
<div>
<div style="margin-left: 2rem;margin-top: 0rem;height: 0.5rem">
<el-select v-model="cdata.value6.checkedMarkets" multiple placeholder="请选择市场(可多选)" style="width: 3rem;">
<el-option
v-for="item in option"
:key="item"
:label="item"
:value="item">
<span style="float: left">{{item }}</span>
<span style="float: right; color: #8492a6; font-size: 13px">{{item }}</span>
</el-option>
</el-select>
<el-select v-model="cdata.value6.goodname" placeholder="请选择商品" style="width: 3rem;" >
<el-option
v-for="item in shangpin"
:key="item"
:label="item"
:value="item">
<span style="float: left">{{item}}</span>
<span style="float: right; color: #8492a6; font-size: 13px">{{item}}</span>
</el-option>
</el-select>
<el-button type="primary" icon="el-icon-search" @click="getdata()" style="width: 2rem">查询</el-button>
</div>
<Chart :cdata="cdata" />
</div>
</template>
<script>
import Chart from './chart.vue'
export default {
data () {
return {
chaxun:true,
option:[],
shangpin:[],
cdata: {
value6:
{'goodname':'萝卜',
'year':2018,
'checkedMarkets':[ "山东章丘刁镇蔬菜批发市场", "青岛黄河路农产品批发市场"],
},
cansu:[],
xData: ['一月', '二月', '三月', '四月',
'五月', '六月', '七月', '八月',
'九月', '十月', '十一月', '十二月',
],
seriesData: [
]
}
}
},
components: {
Chart,
},
created() {
//刚进入网页的渲染
const _this = this
_this.$axios.get("/market/markets").then(res => {
console.log(res)
_this.option = res.data.markets
})
_this.$axios.get("/market/actualtype").then(res2 => {
console.log(res2)
_this.shangpin = res2.data.actualtype
})
},
mounted () {
if(this.chaxun){
this.getdata()
}
},
methods: {
getdata(){
this.$axios.post("/market/avg_month_price", this.cdata.value6).then(res4 => {
this.cdata.cansu = res4.data
})
this.chaxun=false
}
}
}
</script>
<style lang="scss" scoped>
</style>