首页实现一个echarts的饼图

实现一个echarts的饼图

时间: 2024-02-23 22:53:12 浏览: 68

以下是实现一个echarts的饼图的步骤： 1.首先需要引入echarts的js文件，可以在官网下载或者使用CDN链接。 2.在HTML文件中创建一个div容器，用于显示饼图。 3.在JavaScript文件中编写代码，配置饼图的各个参数，例如数据、颜色、标题等。 4.将配置好的参数传入echarts的初始化函数中，并将其绑定到之前创建的div容器上。 5.最后在浏览器中打开HTML文件，即可看到生成的饼图。以下是一个简单的echarts饼图的代码示例： ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ECharts 饼图示例</title>  <script src="https://cdn.jsdelivr.net/npm/echarts@5.1.2/dist/echarts.min.js"></script> </head> <body>  <div id="pieChart" style="width: 600px;height:400px;"></div> <script> // 基于准备好的dom，初始化echarts实例 var myChart = echarts.init(document.getElementById('pieChart')); // 配置饼图的参数 var option = { title: { text: '饼图示例', left: 'center' }, tooltip: { trigger: 'item', formatter: '{a} <br/>{b}: {c} ({d}%)' }, legend: { orient: 'vertical', left: 10, data: ['数据1', '数据2', '数据3', '数据4', '数据5'] }, series: [ { name: '访问来源', type: 'pie', radius: ['50%', '70%'], avoidLabelOverlap: false, label: { show: false, position: 'center' }, emphasis: { label: { show: true, fontSize: '30', fontWeight: 'bold' } }, labelLine: { show: false }, data: [ {value: 335, name: '数据1'}, {value: 310, name: '数据2'}, {value: 234, name: '数据3'}, {value: 135, name: '数据4'}, {value: 1548, name: '数据5'} ] } ] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); </script> </body> </html> ```

阅读全文