echarts饼图配置

安装

安装1：npm install echarts

安装2：yarn add npm echarts

安装完成后以下代码可以全部复制粘贴即可使用。

HTML

  <div class="content">
      <div class="left">
         <div id="echarts">图表</div>
      </div>
  </div>

JS

2.引入
<script>
import * as echarts from 'echarts';

export default {
  name: "dashboard",
  data() {
    return {
   
    }
  },
  mounted() {
    this.initEcharts()
  },
  methods: {
    initEcharts() {
      var myChart = echarts.init(document.getElementById('echarts'))
      myChart.setOption({
        tooltip: {
          trigger: 'item'
        },
        legend: {
          bottom: '0.1%',
          left: 'center'
        },
        // 配置
        series: [
          {
            // name: 'Access From', //指引线上的标题
            type: 'pie',
            radius: ['50%', '65%'],
            center: ['50%', '43%'],//设置饼图位置 x轴占50%，Y轴占43%
            avoidLabelOverlap: false,
            label: {     //展示文本设置
              normal: {
                position: 'outside',   // outside表示文本显示位置为外部;inner表示文本显示在色块上
                formatter: `{b}\n{d}%`,  //指引线和百分比换行 ,b为data中的name;d为占比数值
              },
              //鼠标经过饼图色块时，使以下fontSize,fontWeight属性改变
              emphasis: {
                show: true,
                textStyle: {    //文本样式
                  fontSize: '14',
                  fontWeight: '600',
                }
              }
            },
            data: [
              { value: 3048, name: '在用' },
              { value: 635, name: '闲置' },
              { value: 580, name: '待保养' },
              { value: 484, name: '报废' },
              { value: 300, name: '即将报废' },
              { value: 500, name: '待验收入库' },
            ],
            itemStyle: {
              normal: {//饼状图上的文本显示
                borderRadius: 10,//色块为倒圆角
                borderColor: '#fff', // 色块边为白色收边
                borderWidth: 1.5, //色块白色收边宽度
                label: {
                  textStyle: {
                    fontSize: 12, //指引线文字大小
                    fontWeight: 'bolder' //文字是否加粗
                  }
                },
              }
            }
          }
        ]
      });
    }
  }
};
</script>

CSS

 .content {
    margin-top: 20px;
    height: 370px;
    background-color: seashell;
    border-radius: 15px;
    display: flex;
    min-width: 1280px;


    .left {
      width: 600px;
      background-color: yellowgreen;
      border-radius: 15px;
      display: flex;
      flex-direction: column;
      margin-right: 12px;

      #echarts {
        height: 370px;
        // background-color: aqua;
        border-radius: 15px;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }