在html里面使用element插件和echarts实现饼状图

要实现饼状图，可以使用 Element 和 Echarts 两个库。

首先，你需要在 HTML 文件中引入 Element 和 Echarts 的库文件，比如：

<!-- 引入 Element -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

<!-- 引入 Echarts -->
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>

然后，在 HTML 文件中创建一个容器来显示饼状图，并设置其样式和 ID：

<div id="pie-chart" style="width: 600px; height: 400px;"></div>

接下来，你需要在 JavaScript 文件中编写代码来绘制饼状图：

// 获取容器
var container = document.getElementById('pie-chart');

// 创建 Echarts 实例
var chart = echarts.init(container);

// 定义数据
var data = [
  {name: 'A', value: 10},
  {name: 'B', value: 20},
  {name: 'C', value: 30},
  {name: 'D', value: 40},
];

// 配置项
var option = {
  title: {
    text: '饼状图示例',
    subtext: '数据来自 Element 和 Echarts',
    left: 'center',
  },
  tooltip: {
    trigger: 'item',
    formatter: '{a} <br/>{b}: {c} ({d}%)',
  },
  legend: {
    orient: 'vertical',
    left: 10,
    data: data.map(item => item.name),
  },
  series: [
    {
      name: '饼状图',
      type: 'pie',
      radius: '50%',
      center: ['50%', '60%'],
      data: data,
      itemStyle: {
        emphasis: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)',
        },
      },
      label: {
        formatter: '{b}: {c} ({d}%)',
      },
    },
  ],
};

// 渲染图表
chart.setOption(option);

最后，你可以在页面中查看到绘制出来的饼状图。注意，为了使 Element 和 Echarts 正常工作，你需要正确引入它们的库文件，并且按照它们的文档编写代码。