首页echarts饼图html

echarts饼图html

时间: 2023-12-19 19:30:49 浏览: 79

以下是一个简单的echarts饼图的HTML代码示例： ```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 type="text/javascript"> // 基于准备好的dom，初始化echarts实例 var myChart = echarts.init(document.getElementById('pieChart')); // 指定图表的配置项和数据 var option = { title: { text: '饼图示例' }, tooltip: {}, legend: { data:['销量'] }, series: [{ name: '销量', type: 'pie', data: [ {value:335, name:'直接访问'}, {value:310, name:'邮件营销'}, {value:234, name:'联盟广告'}, {value:135, name:'视频广告'}, {value:1548, name:'搜索引擎'} ] }] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); </script> </body> </html> ``` 以上代码中，我们首先引入了echarts.js，然后在body中创建一个div元素，用于显示饼图。接着，我们使用JavaScript代码初始化了一个echarts实例，并指定了饼图的配置项和数据。最后，我们使用setOption方法将配置项和数据应用到图表中，从而显示出了一个简单的饼图。

阅读全文