parent component
< bar-graph: opinionData= "opinionBarData": opinion= "opinion" style= "width: 600px strategic height: 400px;" id= "mainBar" >
< script >
import echarts from "echarts"
import BarGraph from".. / components/bargraph.vue"
export default {
name: "",
data () {
return {
opinion:["","","","",""],
opinionBarData:[
{value:[320, 332, 301, 334, 390, 330, 320], name:""},
{value:[120, 132, 101, 134, 90, 230, 210], name:""},
{value:[220, 182, 191, 234, 290, 330, 310], name:""},
{value:[150, 232, 201, 154, 190, 330, 410], name:""},
{value:[862, 1018, 964, 1026, 1679, 1600, 1570], name:""}
]
}
},
components:{
BarGraph
}
} subcomponents
< template >
<div :id="id"></div> < / template >
< script >
import echarts from "echarts"
export default {
data () {
return {
charts: ""
}
},
props:["id","opinion","opinionData"],
mounted(){
this.$nextTick(function() {
this.drawPie(this.id)
})
},
methods:{
drawPie(id){
this.charts = echarts.init(document.getElementById(id))
for(var i = 0;i<this.opinionData.length;iPP){
this.opinionData[i] = {
type :"bar",
value:this.opinionData[i].value,
name:this.opinionData[i].name
}
}
this.charts.setOption({
tooltip : {
trigger: "axis",
axisPointer : { //
type : "shadow" // :"line" | "shadow"
}
},
legend: {
data:this.opinion
},
grid: {
left: "3%",
right: "4%",
bottom: "3%",
containLabel: true
},
xAxis : [
{
type : "category",
data : ["","","","","","",""]
}
],
yAxis : [
{
type : "value"
}
],
series : this.opinionData
})
}
}
} < / script >
this this.opinionData can be printed, but the page does not show the problem of series in option when the data should be displayed, but I don"t know why because I replaced the data in series with echarts api documents.