VUE中画饼状图

<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也可以画柱形图，这是一个图表插件。