156 lines
3.0 KiB
Vue
156 lines
3.0 KiB
Vue
<!--
|
|
* @Author: zhp
|
|
* @Date: 2023-09-13 09:02:25
|
|
* @LastEditTime: 2023-11-10 10:48:09
|
|
* @LastEditors: DY
|
|
* @Description:
|
|
-->
|
|
<template>
|
|
<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 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()
|
|
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>
|
|
.balace-chart >>> .el-button {
|
|
background: #e3e3e3;
|
|
color: #333;
|
|
transition: all 0.3s;
|
|
border: none;
|
|
|
|
&.activeButton,
|
|
&:hover {
|
|
background: #0b58ff;
|
|
color: #fff;
|
|
}
|
|
}
|
|
</style>
|