95 lines
1.8 KiB
Vue
95 lines
1.8 KiB
Vue
<!--
|
|
* @Author: zhp
|
|
* @Date: 2023-09-13 09:02:25
|
|
* @LastEditTime: 2023-10-08 15:39:38
|
|
* @LastEditors: DY
|
|
* @Description:
|
|
-->
|
|
<template>
|
|
<div :class="className" :style="{height:height,width:width}" />
|
|
</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
|
|
}
|
|
},
|
|
// watch: {
|
|
// chartData: {
|
|
// deep: true,
|
|
// handler(val) {
|
|
// this.setOptions(val)
|
|
// }
|
|
// }
|
|
// },
|
|
mounted() {
|
|
// this.$nextTick(() => {
|
|
// this.initChart()
|
|
// })
|
|
},
|
|
// beforeDestroy() {
|
|
// if (!this.chart) {
|
|
// return
|
|
// }
|
|
// this.chart.dispose()
|
|
// this.chart = null
|
|
// },
|
|
methods: {
|
|
initChart(xData, yData,lineName) {
|
|
console.log( '打印结果', xData,yData, lineName);
|
|
this.chart = echarts.init(this.$el, 'macarons')
|
|
this.setOptions(xData, yData, lineName)
|
|
},
|
|
setOptions(xData, yData, lineName) {
|
|
console.log('da', lineName)
|
|
let seriesData = []
|
|
lineName.forEach((item,index) => {
|
|
seriesData.push({
|
|
name: item,
|
|
data: yData[index],
|
|
type: 'line',
|
|
})
|
|
})
|
|
this.chart.setOption({
|
|
xAxis: {
|
|
type: 'category',
|
|
data: xData
|
|
},
|
|
legend: {
|
|
data:lineName
|
|
},
|
|
yAxis: {
|
|
type: 'value'
|
|
},
|
|
series: seriesData
|
|
}, true)
|
|
}
|
|
}
|
|
}
|
|
</script>
|