I wrote a component myself. The bar chart, data and chart names in echarts are dynamic.
wrote
props:{
column:{
text:{
type:String,
default:""
},
series: [Object],
},
},
mounted(){
//
this.myChart.setOption({
series:this.column.series
}
}then call
in charts.vue<template>
<div>
<v-column :column="column"></v-column>
<v-column :column="column2"></v-column>
</div>
</template>
<script>
import vColumn from "../common/Column.vue";
export default {
data() {
return {
column:{
text:"",
series: [
{
name: "1",
type: "bar",
barWidth: "60%",
data: [10, 52, 200, 334, 390, 330, 220]
}
],
},
column2:{
text:"2",
series: [
{
name: "2",
type: "bar",
barWidth: "60%",
data: [10, 100,20,40,50,120]
}
],
}
}
},
mounted() {},
methods: {},
components: {
vColumn
}
}
</script> but only the first chart shown has data, and the data is colum2. If the same page calls the same component many times, but the data is different, what should be done, or how to call locally, to avoid data contamination in the same page
this is the first v-column
v-column
