项目中把折线图抽成了公用组件。所以在用的时候单独赋值
子组件
<template>
<div class="lineChart">
<div style="width:100%;height:500px;" :id="echarts" class="echarts" ref="echarts"></div>
</div>
</template>
<script>
// 引入echarts
import echarts from 'echarts'
export default {
name: 'lineChart',
props: {
// 接收父组件传递过来的信息
nameData: {
default: () => []
},
timeData: {
default: () => []
},
chartData: {
default: () => []
}
},
data () {
return {
}
},
computed: {
echarts () {
return 'echarts' + Math.random() * 100000
}
},
mounted: function () {
const vm = this
vm.$nextTick(() => {
vm.drawChart()
})
},
watch: { // 父传子延迟问题 导致第一次点击没有刷新
timeData (newVal, oldVal) {
if (newVal) {
this.drawChart()
}
}
},
created: () => { },
methods: {
drawChart () {
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById(this.echarts))
myChart.setOption({
tooltip: { // 提示框取默认值，即鼠标移动到柱状图会显示内容
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#6a7985' // 移上去的时候显示的颜色
}
}
},
legend: {
y: '95%',
data: this.nameData, // 名字
bottom: 'bottom'
},
// toolbox: { // 下载的箭头
// feature: {
// saveAsImage: {}
// }
// },
grid: { // 设置canvas构造内容的边距
left: '3%',
right: '4%',
bottom: '10%',
containLabel: true
},
xAxis: [
{
type: 'category',
// boundaryGap: false,
data: this.timeData // x数据
}
],
yAxis: [
{
type: 'value'
}
],
series: this.chartData // 折线图数据
})
// 自适应
window.addEventListener('resize', function () {
myChart.resize()
})
}
}
}
</script>
<style lang="less" scoped>
.lineChart {
}
</style>
在父组件中引用的时候
后台返回数据是这样的
然后在data中
赋值的时候直接循环
