echarts实现一个饼图并显示百分比

ECharts是一个强大的JavaScript图表库，可以很容易地创建出各种类型的图表，包括饼图。下面是一个简单的步骤来创建一个饼图，并显示每个部分的百分比：

1. 首先，在HTML文件中引入ECharts的CDN链接：

<script src="https://cdn.jsdelivr.net/npm/echarts@5.3.0/dist/echarts.min.js"></script>

2. 定义一个包含数据和配置选项的JavaScript对象：

var option = {
  // 图表标题
  title: {
    text: '饼状图示例'
  },
  
  // 设置视口区域
  visualMap: {
    type: 'piecewise', // 类型为分段渐进映射
    pieces: [{
      gt: 0,
      lable: '大于0',
      color: ['#3398DB'] // 颜色对应百分比大于0的部分
    }, {
      lable: '小于等于0',
      color: ['#F44336'] // 颜色对应百分比小于等于0的部分
    }],
  },
  
  // 饼图的基本配置
  series: [{
    name: '饼图',
    type: 'pie',
    radius: ['45%', '75%'], // 内外圆半径设置
    data: [
      { value: 335, name: '部分A' }, 
      { value: 310, name: '部分B' }, 
      { value: 234, name: '部分C' },
      { value: 135, name: '部分D' }
    ],
    label: {
      show: true, // 显示标签
      formatter: function (params) {
        return params.name + '<br/>' + '%p'; // 显示百分比
      }
    },
    emphasis: {
      itemStyle: {
        shadowBlur: 10,
        shadowOffsetX: 0,
        shadowColor: 'rgba(0, 0, 0, 0.5)'
      }
    }
  }]
};

3. 将`option`传递给ECharts实例化：

var chart = echarts.init(document.getElementById('main')); // 获取到容器ID
chart.setOption(option);

在这个例子中，`name`属性对应饼图的数据标签，`formatter`函数用于自定义百分比的显示格式。