<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;i++){//修改数据 每一条添加一个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>
宽度设置100%,在图标下面加上
this.myChart.setOption(option);
window.onresize = this.myChart.resize;即可