农产品信息智能推荐平台(12)
可视化大屏(4)
三种农作物的表示。
对于三种农作物,想法是在一张比较大的图上,用折线图和柱状图一起表达。
效果如图:
代码如下:
<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: ["小麦", "玉米", "棉花"],
textStyle: {
color: "#B4B4B4"
},
top: "0%"
},
grid: {
x: "8%",
width: "88%",
y: "4%"
},
xAxis: {
data: newData.category,
axisLine: {
lineStyle: {
color: "#B4B4B4"
}
},
axisTick: {
show: false
}
},
yAxis: [
{
splitLine: { show: false },
axisLine: {
lineStyle: {
color: "#B4B4B4"
}
},
axisLabel: {
formatter: "{value} "
}
},
{
splitLine: { show: false },
axisLine: {
lineStyle: {
color: "#B4B4B4"
}
},
axisLabel: {
formatter: "{value} "
}
}
],
series: [
{
name: "棉花",
type: "line",
smooth: true,
showAllSymbol: true,
symbol: "emptyCircle",
symbolSize: 8,
yAxisIndex: 1,
itemStyle: {
normal: {
color: "#F02FC2"
}
},
data: newData.rateData
},
{
name: "玉米",
type: "bar",
barWidth: 10,
itemStyle: {
normal: {
barBorderRadius: 5,
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: "#956FD4" },
{ offset: 1, color: "#3EACE5" }
])
}
},
data: newData.barData
},
{
name: "小麦",
type: "bar",
barGap: "-100%",
barWidth: 10,
itemStyle: {
normal: {
barBorderRadius: 5,
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: "rgba(156,107,211,0.8)" },
{ offset: 0.2, color: "rgba(156,107,211,0.5)" },
{ offset: 1, color: "rgba(156,107,211,0.2)" }
])
}
},
z: -12,
data: newData.lineData
}
]
}
},
immediate: true,
deep: true
},
},
}
</script>
<template>
<div>
<Chart :cdata="cdata" />
</div>
</template>
<script>
import Chart from './chart.vue'
export default {
data () {
return {
cdata: {
options1:[],
options2:[],
options3:[],
crop:[
{'year':null,
'type': "",
}],
croptype:[],
category: [],
year:2018,
lineData: [
],
barData: [
],
rateData: []
}
};
},
components: {
Chart,
},
created(){
//刚进入网页的渲染
const _this = this
_this.$axios.get("/citycrop/city").then(res => {
console.log(res)
_this.cdata.category = res.data.city
})
_this.$axios.get("/citycrop/croptype").then(res => {
console.log(res)
_this.cdata.croptype = res.data.croptype
for (let i = 0, len = this.cdata.croptype.length; i < len; i++) {
var name = 'year'
var all = 'type'
var obj1 = {}
obj1[name] = this.cdata.year
obj1[all] = this.cdata.croptype[i]
console.log(obj1)
this.cdata.crop.push(
obj1
)
}
this.$axios.post("/citycrop/asc_weight", this.cdata.crop[1]).then(res3 => {
this.cdata.options1 = res3.data
// this.cdata.barData = this.cdata.options1.weight_all
})
this.$axios.post("/citycrop/asc_weight", this.cdata.crop[2]).then(res4 => {
this.cdata.options2 = res4.data
// this.cdata.barData = this.cdata.options1.weight_all
})
this.$axios.post("/citycrop/asc_weight", this.cdata.crop[3]).then(res5 => {
this.cdata.options3 = res5.data
// this.cdata.barData = this.cdata.options1.weight_all
})
})
},
mounted () {
var that=this
setTimeout(function (){that.setData()},10000)
},
methods: {
// 根据自己的业务情况修改
setData () {
for (let j = 0, len2 = this.cdata.category.length; j < len2; j++) {
for (let m = 0, len1 = this.cdata.options1.length; m < len1; m++){
if (this.cdata.options1[m].city === this.cdata.category[j]) {
this.cdata.lineData.push(this.cdata.options1[m].weight_all)
}
}
}
for (let j = 0, len2 = this.cdata.category.length; j < len2; j++) {
for (let m = 0, len1 = this.cdata.options2.length; m < len1; m++){
if (this.cdata.options2[m].city === this.cdata.category[j]) {
this.cdata.barData.push(this.cdata.options2[m].weight_all)
}
}
}
for (let j = 0, len2 = this.cdata.category.length; j < len2; j++) {
for (let m = 0, len1 = this.cdata.options3.length; m < len1; m++){
if (this.cdata.options3[m].city === this.cdata.category[j]) {
this.cdata.rateData.push(this.cdata.options3[m].weight_all)
}
}
}
}
}
}
</script>
<style lang="scss" scoped>
</style>