vue可视化开发,要求echarts 最多显示5条数据,超过5条数据定时切换显示。
数据切换代码
<script>
import top from './top/index'
import bottom from './bottom/index'
import {qualityInfo} from "@/api/api/accountCockpit";
import _ from 'lodash'
import {switchTime} from "@/api/ipConfig";
export default {
name: "index",
components: {top, bottom},
props: {
id: {
type: String,
default() {
return '';
}
}
},
data() {
return {
list: [],
active: 0,
time: null
}
},
watch: {},
mounted() {
this.getdata()
},
methods: {
getactive() {
if (this.active < this.list.length - 1) {
this.active = this.active + 1
} else {
this.active = 0
}
},
getswich() {
clearInterval(this.time);
let that = this;
this.time = window.setInterval(() => {
setTimeout(() => {
that.getactive();
}, 0)
}, switchTime)
},
getdata() {
var that = this
qualityInfo().then((res) => {
if (res.code == 200) {
// that.list = res.data
that.list = _.chunk(res.data, 5)
this.getswich()
}
})
},
}
}
</script>
echarts 代码
<template>
<div class="echarts1" ref="echarts">
</div>
</template>
<script>
import dian from '../../../../../../assets/dian.png'
export default {
name: 'echarts1',
components: {},
props: {
list: {
type: Array,
default() {
return [];
}
}
},
mounted() {
this.drawLine()
},
watch: {
list() {
this.drawLine()
},
},
data() {
return {
status: '',
active: false
}
},
computed: {
xData: function () {
var list = []
this.list.forEach((type) => {
list.push(type.proName)
});
return list
},
yData1: function () {
var list = []
this.list.forEach((type) => {
list.push(type.qualityCompleteCount)
});
return list
},
yData2: function () {
var list = []
this.list.forEach((type) => {
list.push(type.qualityNotCompleteCount)
});
return list
},
yData3: function () {
var list = []
this.list.forEach((type) => {
list.push(type.qualityNotPercent)
});
return list
},
},
methods: {
drawLine() {
// 基于准备好的dom,初始化echarts实例
window.addEventListener('resize', this.drawLine)
let myChart = this.$echarts.init(this.$refs.echarts)
var option = {
grid: {
top: '80px',
bottom: '0px',
left: '25px',
right: '0px',
containLabel: true
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
shadowStyle: {
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(52, 249, 230, 0.2)'
}, {
offset: 1,
color: 'rgba(52, 249, 230, 0.2)'
}], false),
}
}
},
legend: {
top: 0,
right: 20,
itemWidth: 14,
itemHeight: 14,
itemGap: 10,
textStyle: {
color: '#fff',
fontSize: '33'
},
},
xAxis: [{
data: this.xData,
axisLabel: {
margin: 10,
interval: 0,
rotate: 45,
color: 'rgba(245, 245, 246, 1.00)',
textStyle: {
fontSize: 30
},
},
axisLine: {
lineStyle: {
color: 'rgba(39, 76, 129, 0.26)',
width: 1
}
},
splitLine: {
show: false,
lineStyle: {
color: 'rgba(39, 76, 129, 0.26)',
width: 1,
}
},
axisTick: {
show: false
},
}],
yAxis: [
{
type: 'value',
min: 0,
nameTextStyle: {
color: 'rgba(0, 156, 255, 1)',
fontSize: 13,
padding: [0, 20, -5, 0]
},
axisLabel: {
color: '#FFFEFE',
textStyle: {
fontSize: 34
},
},
axisLine: {
lineStyle: {
color: 'rgba(39, 76, 129, 0.26)',
}
},
axisTick: {
show: false
},
splitLine: {
show: false,
lineStyle: {
color: 'rgba(39, 76, 129, 0.26)',
width: 1,
}
}
},
{
type: 'value',
min: 0,
max: 100,
interval: 25,
axisLabel: {
formatter: '{value}',
color: '#FFFEFE',
textStyle: {
fontSize: 34
},
},
splitLine: {
lineStyle: {
color: 'rgba(39, 76, 129, 0.26)',
width: 1,
}
}
}],
series: [
{
name: '已整改隐患',
type: 'bar',
data: this.yData1,
stack: '0',
twinkle: {
enabled: false,
period: 0
},
barWidth: '17px',
itemStyle: {
normal: {
borderWidth: 2,
borderColor: 'rgba(46, 223, 206, 1.00)',
color: 'rgba(30, 160, 148, 1.00)',
barBorderRadius: [0, 0, 0, 0],
}
},
},
{
name: '未整改隐患',
type: 'bar',
stack: '0',
data: this.yData2,
twinkle: {
enabled: false,
period: 0
},
barWidth: '17px',
itemStyle: {
normal: {
color: 'rgba(22, 158, 215, 1.00)',
barBorderRadius: [0, 0, 0, 0],
borderWidth: 2,
borderColor: 'rgba(46, 223, 206, 1.00)'
}
},
},
{
name: '未整改比例',
type: 'line',
yAxisIndex: 1,
data: this.yData3,
smooth: false,
symbol: 'image://' + dian,
symbolSize: 42, // 折线的点的大小
itemStyle: {
normal: {
color: 'rgba(253, 203, 0, 1)', //点的颜色
lineStyle: {
color: 'rgba(253, 203, 0, 1)', //线的颜色
width: 2, // 折线图线条粗细设置
},
},
},
},]
}
myChart.clear()
myChart.resize()
myChart.setOption(option)
},
}
}
</script>
<style lang="scss" scoped>
.echarts1 {
position: relative;
width: 100%;
height: calc(100% - 0PX);
}
</style>
<bottom :list="list[active]"></bottom>
使用到的笔记
vue list当前index自动累加
lodash 将数组拆分成多个 size 长度的区块,并将这些区块组成一个新数组