< 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)
})
let _this=this;
window.addEventListener("resize",function () {
_this.charts.resize();
})
},
methods:{
drawPie(id){
this.charts = echarts.init(document.getElementById(id))
for(var i = 0;i<this.opinionData.length;iPP){// type:"bar"
this.opinionData[i] = {
type :"bar",
data:this.opinionData[i].data,
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 >
< style scoped >
* {
margin: 0;
padding: 0;
list-style: none;
}< / style >