Wrote a trend chart component but couldn't write the label on page rendering the bosses to help me find out what is going on?

This is the home page of the tag


This is a trend chart file code

 & lt; Template> 
 
 
 
<script> 
The import echarts from 'echarts' 
Import {defineComponent} from '@ vue/composition - API' 
Export the 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: {
The trigger: 'axis' 
}, 
Legend: {
Data: legendData 
}, 
The grid: {
Left: '3%', 
Right: '4%', 
Bottom: '3%', 
ContainLabel: true 
}, 

The toolbox: {
Feature: {
SaveAsImage: {} 
} 
}, 
XAxis: {
Type: 'category', 
BoundaryGap: false, 
Data: [" 1 ", "2", "3", "4", "5"] 

}, 
YAxis: {
Type: 'value' 
}, 

Series: [
{
Name: legendData [0], 
Type: 'the line', 
Stack: 'total', 
Data: enclosing opinionData 
}, 
{
Name: legendData [1], 
Type: 'the line', 
Stack: 'total', 
//itemStyle: {
//normal: {
//color: secondColor, 
//graphics.linestyle: {
//color: secondColor 
//} 
//} 
//}, 
Data: this. Datas 
} 
] 
}) 
} 
}, 
//call 
Mounted () {
This $nextTick (function () {
Enclosing drawLine (' main ') 
}) 
} 
}) 
</script> 
<style scoped> 
* {
margin: 0; 
padding: 0; 
list-style: none; 
} 
</style> 

CodePudding user response:

What also don't see this, try step by step screening method, ultimately

CodePudding user response:

The first thing you see if your child components have access to the value passed first