150 lines
3.4 KiB
Vue
150 lines
3.4 KiB
Vue
<!--
|
|
* @Author: zhp
|
|
* @Date: 2023-09-13 09:02:25
|
|
* @LastEditTime: 2024-11-26 15:52:29
|
|
* @LastEditors: zwq
|
|
* @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 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() {
|
|
},
|
|
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.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: '生产规格',
|
|
data: dataList.ggData,
|
|
type: 'line',
|
|
},
|
|
{
|
|
name: '设备理论速度',
|
|
data: dataList.sbluData,
|
|
type: 'line',
|
|
},
|
|
{
|
|
name: '设备实际速度',
|
|
data: dataList.sbsjData,
|
|
type: 'line',
|
|
},
|
|
{
|
|
name: '产线理论速度',
|
|
data: dataList.cxluData,
|
|
type: 'line',
|
|
},
|
|
{
|
|
name: '产线实际速度',
|
|
data: dataList.cxsjData,
|
|
type: 'line',
|
|
}
|
|
]
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.activeButton {
|
|
background-color: rgb(93,159,255);
|
|
}
|
|
.normalButton {
|
|
background-color: none;
|
|
}
|
|
</style>
|