vue3-echars-环形图

安装依赖

npm install echarts --save

引入

import * as echarts from 'echarts';

html

<template>
  <div class="echars-two" id="echarsTwo"></div>
</template>

script

 // 基于准备好的dom，初始化echarts实例
  var myChart = echarts.init(document.getElementById('echarsTwo'));
  // 绘制图表
  myChart.setOption({
    title: {
      text: '事务所数量',
      left: 'center',
      top: "20px"
    },
    tooltip: {

      trigger: 'item'
    },
    legend: {
      top: "20px",
      orient: 'vertical',
      left: '10%'
    },
    color: ['#FAC858', '#FF7070', '#9FE080'],
    backgroundColor: '#fff',
    series: [{
      // name: 'Access From',
      top: "20px",
      type: 'pie',
      radius: ['35%', '60%'],
      data: [{
        value: list.value.lawyer,
        name: '律师'
      },
      {
        value: list.value.accounting,
        name: '会计'
      },
      {
        value: list.value.bond,
        name: '证券'
      },
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }]
  });

style

.echars-two {
  width: 33%;
  height: 260px;
  background-color: #fff;
}