寫了一個趨勢圖組件但是在頁面上寫該標簽渲染不出來了 大佬幫我看看是怎么回事嗎
這是在home頁面上的標簽
這是趨勢圖檔案代碼
<template>
<!--為echarts準備一個具備大小的容器dom-->
<div id="main" style="width: 600px;height: 400px;"></div>
</template>
<script>
import echarts from 'echarts'
import { defineComponent} from '@vue/composition-api'
export default defineComponent({
name: '',
props:{
legendData: Array,
firstList: Array,
firstColor: String,
secondColor: String,
secondList: Array,
},
data() {
return {
charts: '',
/* opinion: ["1", "3", "3", "4", "5"],*/
opinionData: ["3", "2", "4", "4", "5"],
Datas: ["2", "2", "4", "5", "4"]
}
},
methods: {
drawLine(id) {
this.charts = echarts.init(document.getElementById(id))
this.charts.setOption({
tooltip: {
trigger: 'axis'
},
legend: {
data: legendData
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
toolbox: {
feature: {
saveAsImage: {}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ["1","2","3","4","5"]
},
yAxis: {
type: 'value'
},
series: [
{
name: legendData[0],
type: 'line',
stack: '總量',
data: this.opinionData
},
{
name: legendData[1],
type: 'line',
stack: '總量',
// itemStyle: {
// normal: {
// color: secondColor,
// lineStyle: {
// color: secondColor
// }
// }
// },
data: this.Datas
}
]
})
}
},
//呼叫
mounted() {
this.$nextTick(function() {
this.drawLine('main')
})
}
})
</script>
<style scoped>
* {
margin: 0;
padding: 0;
list-style: none;
}
</style>
uj5u.com熱心網友回復：
這也看不出來什么，可以試試逐步排查法，順藤摸瓜uj5u.com熱心網友回復：
你首先看看 你 子組件內 是否有獲取到這傳過去的值先轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/47099.html
標籤：HTML5