Bootstrap

vue+element+echarts饼图,百分百,中间文字

html页面

 <div id="EChart" style="width:100%; height: 180px;"></div>

js 

<script>
import echarts from 'echarts'//引入
mounted () {
    this.initData()
  },
 methods: {
     initData() {
      // 基于准备好的dom,初始化echarts实例
      let EChart = this.$echarts.init(document.getElementById("EChart"));
      // 配置参数
      let config = {
        tooltip: { //提示条的意思,
                trigger: 'item'   //trigger是触发器的意思,就是鼠标放上去显示的
            },
            title:{
              text:'苹果',//标题文本
              left:'center',
              top:'55%',
              textStyle:{//文本样式
                fontSize: 15,
                color:'rgba(255, 255, 255, 0.8)',
                align:'center'
              },
            },,
            series: [
              {
                
                type: 'pie',
                radius: ['50%', '70%'],
                avoidLabelOverlap: false,
                label: {
                  show: false,//饼图内部false
                },
                emphasis: {
                  label: {
                    show: false//饼图上面的字为false
                  }
                },
                
                labelLine: {
                  show: true
                },
                data: [
                  { 
                   value:60,name:'苹果',
                   label: {
                       show: true,
                       position: 'center', // 在饼图内部显示标签
                       color: '#ffffff',
                       fontSize:'20',
                       formatter: '{d}%'// 在饼图内部百分比
                     }
                  },
                  { value: 40,name:'梨'},
                 
                ]
              }
            ],
          };
       // 设置参数
       EChart.setOption(config)
     }
}
</script>

;