The first one is selected by default
1. Page usage
<template>
<div class="headerH">
<div style="height: 15%;overflow: auto;">
<template v-for="(curveTitle,index) in feedTitle">
<input type="radio" name="check"
:value="curveTitle.feedingCurveTitle" :id=index
@click="getAllCurves(index)" :checked="index == getAllCurvesIndex"/>
<label :for=index style="cursor:pointer">{
{curveTitle.feedingCurveTitle}}
<i style="color: #ff5e03;margin-right: 8px">{
{curveTitle.otherTypeTitle}}</i></label>
</template>
</div>
<div style="height: 85%">
<lineEcharts v-model="option" v-on:paramsName="echartsParams"></lineEcharts>
</div>
</div>
</template> data() {
return {
option: {},
feedTitle: '', //存后台传过来的数据
feedingCurveData: [],
getAllCurvesIndex: 0,
majorType: 1,
};
},2. Polyline data
this.option = {
backgroundColor: "#fff",
tooltip: {
trigger: "axis",
show: true,
},
series: [{
name: "胖的水",
type: "line",
smooth: true,
symbol: "circle",
symbolSize: 13,
itemStyle: {
color: "#fb7636",
borderColor: "#fff",
borderWidth: 2,
},
data: waterData,
}, {
name: "胖的料",
type: "line",
smooth: true,
symbol: "circle",
symbolSize: 13,
itemStyle: {
color: "#24b314",
borderColor: "#fff",
borderWidth: 2,
},
data: feedData, //后台数据
}],
legend: {
show: true,
icon: "circle",
top: 20,
textStyle: {
fontSize: 12,
color: "#c8c8c8",
},
},
grid: {
left: "5%",
right: "5%",
top: "15%",
bottom: "6%",
containLabel: true,
},
xAxis: {
axisLine: {
show: false,
},
axisTick: {
show: false,
},
axisLabel: {
interval: 0,
},
data: seriesArr, //后台数据
},
yAxis: {
axisLine: {
show: false,
},
axisTick: {
show: false,
},
},
};