103 lines
2.2 KiB
Vue
103 lines
2.2 KiB
Vue
<!--
|
|
* @Author: zhp
|
|
* @Date: 2023-09-13 09:02:25
|
|
* @LastEditTime: 2023-09-20 09:29:40
|
|
* @LastEditors: DY
|
|
* @Description:
|
|
-->
|
|
<template>
|
|
<div>
|
|
<div style="margin: 20px">
|
|
<el-button v-for="(item, index) in dataArray" :key="index" @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: []
|
|
}
|
|
},
|
|
mounted() {
|
|
},
|
|
methods: {
|
|
changeChart(index) {
|
|
this.setOptions(this.xDatas, this.dataArray[index])
|
|
},
|
|
initChart(xData, yData, lineName) {
|
|
this.dataArray = yData
|
|
this.xDatas = xData
|
|
console.log(xData,yData);
|
|
console.log('zale', yData[0].eqData)
|
|
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: '设备CT',
|
|
data: dataList.eqData,
|
|
type: 'line',
|
|
},
|
|
{
|
|
name: '产线CT',
|
|
data: dataList.plData,
|
|
type: 'line',
|
|
}
|
|
]
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|