<template>
<div>
<div id="chart" :style="echartStyle"></div>
</div>
</template>
<script>
export default {
props: {
echartStyle: {
type: Object,
default() {
return {}
}},
titleText: {
type: String,
default: ''
},
tooltipFormatter: {
type: String,
default: ''
},
opinion: {
type: Array,
default() {
return []
}
},
seriesName: {
type: String,
default: ''
},
opinionData: {
type: Array,
default() {
return []
}
}
},
data(){
return{
}
},
mounted(){
this.getChange();
},
watch:{
titleText:function(newValue,oldValue){
this.getChange();
},
echartStyle:{
handler(newValue,oldValue){
this.getChange();
},
deep:true
},
tooltipFormatter:function(newValue,oldValue){
this.getChange();
},
opinion:{
handler(newValue,oldValue){
this.getChange();
},
deep:true //深度监听
},
seriesName:function(newValue,oldValue){
this.getChange();
},
opinionData:{
handler(newValue,oldValue){
this.getChange();
},
deep:true
}
},
methods:{
getChange(){
this.drawChart('chart');
},
drawChart(id){
this.chart = this.$echarts.init(document.getElementById(id));
this.chart.setOption({
title:{
text:this.titleText,
left:'center'
},
legend:{
bottom: 10,
left:'center',
data:this.opinion
},
tooltip:{
trigger:'item',
formatter: "{a} <br/> " + this.tooltipFormatter + ":{c} ({d}%)"
},
series:[
{
name:this.seriesName,
type:'pie',
radius:'65%',
center:['50%','50%'],
selectedMode:'single',
data:this.opinionData,
itemStyle:{
emphasis:{
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}]
})
}
}
}
</script>
echarts也可以画柱形图,这是一个图表插件。