echarts 饼图常用属性

<template>
  <div class="box">
      <div id='showorders' style='width:800px; height:500px'></div>
  </div>
</template>

<script setup>
  import {onMounted} from "vue"
  import * as echarts from 'echarts';
   onMounted(()=>{
    init()
})
const init  =()=>{
       let chartDom = document.getElementById('showorders');
            let myChart = echarts.init(chartDom);
            // 指定图表的配置项和数据
            let option;
 
        option = {
           title: {  //配置标题组件
                text: '影响健康、寿命的各类因素',  //设置主标题
                subtext: 'WHO统计调查报告',  //设置次标题
                left: 'left'  //设置主次标题都左右居中left center right
           },
           tooltip: {  //配置提示框组件
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
                //可以自己定义提示框内容
                // formatter:function(val){
                //   console.log(val);
                // }
           },
           legend: {  //配置图例组件
                orient: 'vertical',  //设置垂直排列
                right: 10,  //设置图例左边距
                top: 100,  //设置图例顶边距
                data: ['Search Engine', 'Direct', 'Email', 'Union Ads', 'Video Ads']
          },
          toolbox: {  //配置工具箱组件
                show: true,  //设置工具箱组件是否显示
                orient:"horizontal",//工具栏icon的布局朝向‘horizontal’'vertical' 横向纵向
                itemSize:20, //工具栏icon的大小
                itemGap:20,//工具栏icon每项之间的间隔
                showTitle:false,//是否在鼠标hover的时候显示每个工具的icon标题
                left: 444,  //设置工具箱左边距
                top: 28,  //设置工具箱顶边距
                feature: {
                    mark: { show: true },
                    dataView: {    // 数据视图
                       show: true,     //是否显示工具
                       readOnly: false,  //是否修改里面的数据
                       lang: ['数据视图', '关闭', '刷新'],
                        backgroundColor:"#fff",             //数据视图浮层背景色。
                        textareaColor:"#fff",               //数据视图浮层文本输入区背景色
                        textareaBorderColor:"#333",         //数据视图浮层文本输入区边框颜色
                        textColor:"#000",                   //文本颜色。
                        buttonColor:"#c23531",              //按钮颜色。
                        buttonTextColor:"#fff",             //按钮文本颜色。
                    }, 
                    magicType: {
                        show: true,
                        type: ['pie', 'funnel','bar', 'line'],// 动态图表类型的切换
                        option: {
                            funnel: {
                                x: '50%',
                                width: '100%',
                                funnelAlign: 'right',
                                max: 1548
                            }
                        }
                    },
                    restore: {   // 重置
                      show: true ,
                      title:"还原"
                    },    
                    saveAsImage: {     //并图导出图片
                       show: true ,
                       title:"保存为图片",
                       type:"jpeg",    //保存的图片格式。支持 'png' 和 'jpeg'
                       name:"图片名称",//保存文件的名称，默认使用title.text作为名称
                       backgroundColor:"#fff", //保存的图片背景色，默认使用 backgroundColor，如果backgroundColor不存在的话会取白色
                   }   
                }
            },

          series: [
            {
              name: '健康统计',
              type: 'pie',
              radius: ['40%', '70%'],  //饼图半径
              hoverAnimation: true, //鼠标移入变大
              center: ['50%', '50%'],  //设置圆心
              minAngle: 5,        //最小的扇区角度（0 ~ 360），用于防止某个值过小导致扇区太小影响交互
              avoidLabelOverlap: false,  //是否启用防止标签重叠策略
               // # 饼图原中间文字位置
              label: {
                show: false,
                position: 'center',
                normal: {
                       position: 'inside',//扇形外侧outside 扇形上inside 中心位置center
                       show : false
                    }
              },
              // # 饼图原中间文字
              emphasis: {
                label: {
                  show: true,
                  fontSize: '40',
                  fontWeight: 'bold',
                  formatter:`{b}:{c} ({d}%)`,  //a饼图标题 b是选中的数据title c 当前数据 d 是百分比
                  //  formatter: function(val){
                  //         console.log(val);
                  //         return 111
                  //  },
                  textStyle:{
                    color: '#000',  //不给颜色那就是根据不同数据的不同颜色      
                    fontSize:22 , //圆圈中文字大小、
                    //  fontWeight: '700',    
                  }
                }
              },
              labelLine: {
                 show: true,
                 normal: {   //设置引导线长度
                     show: true,
                     length:15  
                 }

              },
              data: [
                { value: 1048, name: 'Search Engine' },
                { value: 735, name: 'Direct' },
                { value: 580, name: 'Email' },
                { value: 484, name: 'Union Ads' },
                { value: 300, name: 'Video Ads' }
              ]
            }
          ]
        };
            
            option && myChart.setOption(option);

}
</script>
<style scoped>
</style>