首页帮我写一个html代码，绘制一个高颜值饼图

帮我写一个html代码，绘制一个高颜值饼图

时间: 2024-10-10 18:07:04 浏览: 24

为了创建一个高颜值的HTML饼图，我们可以使用JavaScript库如ECharts、Chart.js 或者 Highcharts等。这里我将演示如何使用ECharts，它非常流行且功能强大。首先，在HTML中引入ECharts的CDN： ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>High-Efficiency Pie Chart</title> <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.0/dist/echarts.min.js"></script> <style> body { margin: 0; padding: 0; font-family: Arial, sans-serif; } #chartContainer { width: 600px; height: 400px; margin: auto; } </style> </head> <body> <div id="chartContainer"></div>  <script type="text/javascript"> // 数据 var data = [{ value: 335, name: '销售部' }, { value: 310, name: '市场部' }, { value: 234, name: '技术部' }, { value: 135, name: '客服部' }]; // 初始化图表 var myChart = echarts.init(document.getElementById('chartContainer')); // 设置选项 var option = { title: { text: '部门贡献度', subtext: '某年各部门工作量占比', x:'center' }, tooltip: {}, legend: { orient: 'vertical', left: 'left', data: ['各部门'] }, series: [{ name: '占比', type: 'pie', radius: '75%', center: ['50%', '60%'], data: data, label: { normal: { formatter: '{b} ({d}%)', position: 'outside' } }, emphasis: { itemStyle: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } } }] }; // 渲染图表 myChart.setOption(option); </script> </body> </html> ``` 这个例子创建了一个基本的饼图，你可以根据需要调整颜色、样式以及数据。在浏览器中打开此文件，即可看到一个美观的饼图。

阅读全文