1. 页面中引入Echarts
<template>
<div style="width: 100%;height: 100%;">
<div class="statisticsMenu1">
<span class="title" v-if="father1">水料总汇 </span>
<div class="item" :class="{active:menuIndex=='1'}" @click="feedingSelect('1')">当月</div>
<div class="item" :class="{active:menuIndex=='3'}" @click="feedingSelect('3')">年汇</div>
</div>
<div style="width: 100%;height: 90%">
<lineEcharts v-model="option"></lineEcharts>
</div>
</div>
</template>
2. 配置Echarts
import lineEcharts from "@/components/visualization/lineEcharts";
export default {
name: "lineGraphK",
props:{
father:String,
father1: Boolean
},
data() {
return {
menuIndex: 1,
option: {},
feedingWater: [],
feedingAmount: [],
feedingDays: [],
}
},
mounted() {
this.feedingSelect('1')
},
components: {
lineEcharts
},
methods: {
feedingSelect(key) {
this.menuIndex = key;
if (this.menuIndex == 1 && this.menuIndex != 3) {
this.feedingWater = [1230, 934, 534, 723, 388, 123, 634, 634, 243, 88, 123, 630, 634, 423, 88, 123, 634, 534, 223, 828, 123, 634, 634, 423, 288, 123, 634, 634, 1423, 881]
this.feedingAmount = [925, 654, 123, 511, 534, 455, 554, 123, 11, 534, 255, 554, 123, 11, 534, 255, 554, 123, 11, 534, 123, 634, 534, 423, 88, 123, 634, 534, 423, 883]
this.feedingDays = ['2021-06-01', '2021-06-02', '2021-06-03', '2021-06-04', '2021-06-05', '2021-06-06', '2021-06-07', '2021-06-08', '2021-06-09', '2021-06-10', '2021-06-11', '2021-06-12', '2021-06-13', '2021-06-14', '2021-06-15', '2021-06-16', '2021-06-17', '2021-06-18', '2021-06-19', '2021-06-20', '2021-06-21', '2021-06-22', '2021-06-23', '2021-06-24', '2021-06-25', '2021-06-26', '2021-06-27', '2021-06-28', '2021-06-29', '2021-06-30', '2021-07-01']
} else {
this.feedingWater = [12314,53224,21312,87655,33465,23445,78976,34566,35643,6544,11334,6666]
this.feedingAmount = [6433,54444,77667,11211,31123,65555,87654,13242,43224,11444,444,1444]
this.feedingDays = ['2021-01', '2021-02', '2021-03', '2021-04', '2021-05', '2021-06', '2021-07', '2021-08', '2021-09', '2021-10', '2021-11', '2021-12']
}
this.calculate()
},
calculate() {
this.option = {
series: [
{
name: '饲喂总水量',
type: 'line',
data: this.feedingWater,
smooth: true,
showSymbol: false,
lineStyle: {
width: 2
},
itemStyle: {
color: "#fb7636",
borderColor: "#fff",
borderWidth: 2,
}
},
{
name: '饲喂总料量',
type: 'line',
data: this.feedingAmount,
smooth: true,
showSymbol: false,
lineStyle: {
width: 2
},
itemStyle: {
color: "#36a3f7",
borderColor: "#fff",
borderWidth: 2,
},
}
],
legend: {
show: true,
icon: "circle",
top: 0,
textStyle: {
fontSize: 12,
color: "#afadad",
},
},
grid: {
left: "4%",
right: "7%",
top: "8%",
bottom: "8%",
containLabel: true,
},
tooltip: {
trigger: 'axis',
axisPointer: {
animation: false,
type: 'cross',
lineStyle: {
color: '#f66643',
width: 1,
opacity: 1
}
}
},
xAxis: {
data: this.feedingDays,
axisLine: {lineStyle: {color: '#8392a5'}},
axisLabel: {
interval: 0,
rotate: 30
}
},
yAxis: {
scale: true,
axisLine: {lineStyle: {color: '#8392a5'}},
splitLine: {show: false}
},
dataZoom: [{
textStyle: {
color: this.father
},
dataBackground: {
areaStyle: {
opacity: 0.9,
color: '#ff3131',
width: 0.5
},
lineStyle: {
opacity: 0.9,
color: '#ff3131',
width: 0.5
}
},
type: 'slider',
show: true,
height: '3.5%',
bottom: '12ph',
borderColor: '#8FDFFE',
backgroundColor: 'rgba(183,233,252,0.6)',
handleIcon: 'M512 512m-208 0a6.5 6.5 0 1 0 416 0 6.5 6.5 0 1 0-416 0Z M512 192C335.264 192 192 335.264 192 512c0 176.736 143.264 320 320 320s320-143.264 320-320C832 335.264 688.736 192 512 192zM512 800c-159.072 0-288-128.928-288-288 0-159.072 128.928-288 288-288s288 128.928 288 288C800 671.072 671.072 800 512 800z',
handleColor: '#8FDFFE',
handleSize: 15,
start: 0,
end: 100,
brushSelect: true
}, {
type: 'inside'
}]
}
}
}
}