uniapp根据后台返回数据，循环展⽰echarts
备注：开始⽤了Ucharts --样式还可以，但是根据业务需要根据不同选择时间返回的数据条数不定，需要加横向滚动条，Ucharts加完后，页⾯Ucharts区块不能竖向滚动了，加了Ucharts，也没解决竖向滚动问题，过段放弃Ucharts，开始了echarts的进坑之旅。
采⽤的是echarts-renderjs 插件
取模计算的⽅式来定义需要显⽰哪个echarts，拼装optionArr数组。
如果把echartsoption定义在data⾥，会导致Id重复，只能渲染最后四个
<uni-collapse-item v-for="(item,index) in list":title="item.name":key="index">
<echarts class="temper-history-echarts":option="optionArr[index]" ></echarts>
</uni-collapse-item>
<script>
import Echarts from'@/components/echarts/echarts.vue'
export default{
data(){
const currentDate =Date({
format:true
})
return{
startTime: currentDate,
endTime: currentDate,
autoplay:false,
tabIndex:0,
list:[],
optionArr:[],
}
},
computed:{
startDate(){
Date('start');
},
endDate(){
Date('end');
}
},
onLoad(){
},
methods:{
getDate(type){
const date =new Date();
let year = FullYear();
let month = Month()+1;
let day = Date();
if(type ==='start'){
year = year -60;
}else if(type ==='end'){
year = year;
}
month = month >9? month :'0'+ month;;
day = day >9? day :'0'+ day;
// console.log(year - month - day)
return`${year}-${month}-${day}`;
},
//获取历史数据
getTemperHistory(){
let _this =this;
this.$({
url:`/public`,
param:{
startTime:_this.startTime,
endTime: _dTime
}
}).then((res)=>{
if(de ==200){
if(res.data.data.length ==0){
_this.listLength =0
}else{
_this.list = res.data.data
// console.log("_this.list")
// console.log("_this.list")
// console.log(_this.list)
_this.listLength = res.data.data.length
// optionArr
// console.log('取余')
// console.log(_this.listLength % 4)
_this.optionArr =[]
for(var i =0; i < _this.listLength; i++){
// console.log(i)
if(i %4==0){
_this.optionArr[i]={
notMerge:true,
tooltip:{
trigger:'axis',
"triggerOn":"click"
},
grid:{
top:'15%',
left:'15%',
right:'5%',
bottom:'10%',
// containLabel: true
},
xAxis:[{
type:'category',
boundaryGap:true,
axisLine:{//坐标轴轴线相关设置。数学上的x轴
show:true,
lineStyle:{
color:'#169CFF'
},
},
axisLabel:{//坐标轴刻度标签的相关设置
textStyle:{
color:'#999999',
},
},
axisTick:{
show:true,
},
data:['0','4','8','12','16','20',],
}],
yAxis:[{
type:'value',
name:"（度）",
nameTextStyle:{
color:'#333',
fontSize:16
},
min:0,
splitNumber:5,
splitLine:{
lineStyle:{
type:'dashed',
color:'#D4D4D4'
}
},
axisLine:{
show:false,
},
axisLabel:{
margin:20,
textStyle:{
color:'#999999',
},
},
axisTick:{
show:false,
},
}],
series:[{
name:'注册总量',
type:'line',
smooth:true,//是否平滑曲线显⽰
//    symbol:'circle',  // 默认是空⼼圆（中间是⽩⾊的），改成实⼼圆          showAllSymbol:true,
symbol:'emptyCircle',
symbolSize:12,
lineStyle:{
normal:{
normal:{
width:3,
color:"#309E51",// 线条颜⾊
},
borderColor:'#f0f',
},
label:{
show:true,
position:'top',
textStyle:{
color:'#707070',
fontSize:15
}
},
itemStyle:{
normal:{
color:"#fff",
borderColor:"#309E51",
borderWidth:3,
}
},
tooltip:{
show:false
},
data:[150,200,270,300,240,250]
}]
}
}else if(i %4==1){
console.log(i)
_this.optionArr[i]={
notMerge:true,
tooltip:{
trigger:'axis',
"triggerOn":"click"
},
grid:{
top:'15%',
left:'15%',
right:'5%',
bottom:'10%',
/
/ containLabel: true
},
xAxis:[{
type:'category',
boundaryGap:true,
axisLine:{//坐标轴轴线相关设置。数学上的x轴            show:true,
lineStyle:{
color:'#169CFF'
},
},
axisLabel:{//坐标轴刻度标签的相关设置
textStyle:{
color:'#999999',
// margin: 15,
},
},
axisTick:{
show:true,
},
data:['0','4','8','12','16','20',],
}],
yAxis:[{
type:'value',
name:"（度）",
nameTextStyle:{
color:'#333',
fontSize:16
},
min:0,
// max: 140,
splitNumber:5,
splitLine:{
lineStyle:{
type:'dashed',
color:'#D4D4D4'
}
},
axisLine:{
show:false,
show:false,
},
axisLabel:{
margin:20,
textStyle:{
color:'#999999',
},
},
axisTick:{
show:false,
},
}],
series:[{
type:'bar',
barWidth:6,
itemStyle:{
normal:{
color:"#27BDFF",
barBorderRadius:[30,30,0,0],
}
},
data:[150,200,270,300,240,250]
}]
}
}else if(i %4==2){
_this.optionArr[i]={
notMerge:true,
tooltip:{
trigger:'axis',
"triggerOn":"click"
},
grid:{
top:'15%',
left:'15%',
right:'5%',
bottom:'10%',
// containLabel: true
},
xAxis:[{
type:'category',
boundaryGap:true,
axisLine:{//坐标轴轴线相关设置。数学上的x轴            show:true,
lineStyle:{
color:'#169CFF'
},
},
axisLabel:{//坐标轴刻度标签的相关设置
textStyle:{
color:'#999999',
/
/ margin: 15,
},
},
axisTick:{
show:true,
},
data:['0','4','8','12','16','20',],
}],
yAxis:[{
type:'value',
name:"（度）",
nameTextStyle:{
color:'#333',
fontSize:16
},
min:0,
// max: 140,
splitNumber:5,
splitLine:{
lineStyle:{
type:'dashed',
color:'#D4D4D4'
}
},
axisLine:{
show:false,
},
axisLabel:{
margin:20,
textStyle:{
textStyle:{
color:'#999999',
},
},
axisTick:{
show:false,
},
}],
series:[{
type:'line',
smooth:true,//是否平滑曲线显⽰
//    symbol:'circle',  // 默认是空⼼圆（中间是⽩⾊的），改成实⼼圆          showAllSymbol:true,
symbol:'emptyCircle',textstyle
symbolSize:12,
lineStyle:{
normal:{
width:3,
color:"#FFA114",// 线条颜⾊
},
borderColor:'#f0f',
},
areaStyle:{
normal:{
color:'rgba(255, 161, 20, 0.1)',
shadowColor:'rgba(0, 0, 0, 0.1)',
shadowBlur:10
},
},
label:{
show:true,
position:'top',
textStyle:{
color:'#707070',
fontSize:15
}
},
itemStyle:{
normal:{
color:"#fff",
borderColor:"#FFA114",
borderWidth:3,
}
},
tooltip:{
show:false
},
data:[0,200,270,300,240,250]
}]
}
}else if(i %4==3){
_this.optionArr[i]={
notMerge:true,
tooltip:{
trigger:'axis',
"triggerOn":"click"
},
grid:{
top:'15%',
left:'15%',
right:'5%',
bottom:'10%',
// containLabel: true
},
xAxis:[{
type:'category',
boundaryGap:true,
axisLine:{//坐标轴轴线相关设置。数学上的x轴
show:true,
lineStyle:{
color:'#169CFF'
},
},
axisLabel:{//坐标轴刻度标签的相关设置
textStyle:{
color:'#999999',
// margin: 15,
},

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。