mt-fe-group/yudao-dev
13
0
Fork 0
Code Issues Pull Requests 1 Releases Wiki Activity

fix bugs

Browse Source
This commit is contained in:
lb
2023-11-23 17:07:57 +08:00
parent e318aa4f59
commit 0225be1c94
18 changed files with 575 additions and 380 deletions
Download Patch File Download Diff File Expand all files Collapse all files

253
src/views/core/analysis/balanceChart.vue
View File

@@ -6,131 +6,150 @@
* @Description:
-->
<template>
<div>
<div style="margin: 20px">
<el-button v-for="(item, index) in buttonList" :key="index" :class="[item.actived ? 'activeButton': 'normalButton']" @click="changeChart(index)">{{ item.name }}</el-button>
</div>
<div id="chart" ref="chartDiv" :class="className" :style="{height:height,width:width}" />
</div>
<div class="balace-chart">
<div style="margin: 20px">
<el-button
v-for="(item, index) in buttonList"
:key="index"
:class="[item.actived ? 'activeButton' : '']"
@click="changeChart(index)">
{{ item.name }}
</el-button>
</div>
<div
id="chart"
ref="chartDiv"
:class="className"
:style="{ height: height, width: width }" />
</div>
</template>
<script>
import * as echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import * as echarts from 'echarts';
require('echarts/theme/macarons'); // echarts theme
// import resize from './mixins/resize'
export default {
// mixins: [resize],
props: {
className: {
type: String,
default: 'chart'
},
width: {
type: String,
default: '100%'
},
height: {
type: String,
default: '350px'
},
// autoResize: {
// type: Boolean,
// default: true
// }
},
data() {
return {
chart: null,
dataArray: [],
xDatas: [],
buttonList: []
}
},
mounted() {
// this.initChart()
},
methods: {
changeChart(index) {
this.setOptions(this.xDatas, this.dataArray[index])
this.buttonList.forEach((item, s) => {
if (index === s) {
// item.actived = true
this.$nextTick(() =>{
// item.actived = true
this.$set(item, 'actived', true)
})
} else {
// item.actived = false
this.$nextTick(() =>{
// item.actived = false
this.$set(item, 'actived', false)
})
// this.$set(item, 'actived', false)
}
})
console.log('看一下数22222据', this.dataArray)
},
initChart(xData, yData, lineName) {
this.dataArray = yData
this.buttonList = this.dataArray.map((item, index) => {
return {
'name': item.name,
'actived': index === 0 ? true : false
}
})
console.log('看一下数据', this.dataArray)
this.xDatas = xData
this.chart = echarts.init(this.$refs.chartDiv, 'macarons')
// this.chart = echarts.init(document.getElementById('chart'), 'macarons')
// this.setOptions(xData, yData[0], lineName)
},
setOptions(xData, dataList, lineName) {
// let seriesData = []
// lineName.forEach((item,index) => {
// seriesData.push({
// name: item,
// data: yData[index],
// type: 'line',
// })
// })
this.chart.setOption({
xAxis: {
type: 'category',
data: xData
},
tooltip: {
trigger: 'axis'
},
legend: {
data:lineName
},
yAxis: {
type: 'value'
},
series: [
{
name: '设备CT',
data: dataList.eqData,
type: 'line',
},
{
name: '产线CT',
data: dataList.plData,
type: 'line',
}
]
})
}
}
}
// mixins: [resize],
props: {
className: {
type: String,
default: 'chart',
},
width: {
type: String,
default: '100%',
},
height: {
type: String,
default: '350px',
},
// autoResize: {
// type: Boolean,
// default: true
// }
},
data() {
return {
chart: null,
dataArray: [],
xDatas: [],
buttonList: [],
};
},
mounted() {
// this.initChart()
this.$nextTick(() => {
this.changeChart(0);
});
},
methods: {
changeChart(index) {
this.setOptions(this.xDatas, this.dataArray[index]);
this.buttonList.forEach((item, s) => {
if (index === s) {
// item.actived = true
this.$nextTick(() => {
// item.actived = true
this.$set(item, 'actived', true);
});
} else {
// item.actived = false
this.$nextTick(() => {
// item.actived = false
this.$set(item, 'actived', false);
});
// this.$set(item, 'actived', false)
}
});
console.log('看一下数22222据', this.dataArray);
},
initChart(xData, yData, lineName) {
this.dataArray = yData;
this.buttonList = this.dataArray.map((item, index) => {
return {
name: item.name,
actived: index === 0 ? true : false,
};
});
console.log('看一下数据', this.dataArray);
this.xDatas = xData;
this.chart = echarts.init(this.$refs.chartDiv, 'macarons');
// this.chart = echarts.init(document.getElementById('chart'), 'macarons')
// this.setOptions(xData, yData[0], lineName)
},
setOptions(xData, dataList, lineName) {
// let seriesData = []
// lineName.forEach((item,index) => {
// seriesData.push({
// name: item,
// data: yData[index],
// type: 'line',
// })
// })
this.chart.setOption({
xAxis: {
type: 'category',
data: xData,
},
tooltip: {
trigger: 'axis',
},
legend: {
data: lineName,
},
yAxis: {
type: 'value',
},
series: [
{
name: '设备CT',
data: dataList.eqData,
type: 'line',
},
{
name: '产线CT',
data: dataList.plData,
type: 'line',
},
],
});
},
},
};
</script>
<style scoped>
.activeButton {
background-color: rgb(93,159,255);
}
.normalButton {
background-color: none;
.balace-chart >>> .el-button {
background: #e3e3e3;
color: #333;
transition: all 0.3s;
border: none;
&.activeButton,
&:hover {
background: #0b58ff;
color: #fff;
}
}
</style>