首页echearts饼状图

echearts饼状图

时间: 2023-10-01 20:07:47 浏览: 47

ECharts是一个开源的JavaScript可视化库，用于创建交互式的和可定制化的图表。以下是一个简单的ECharts饼状图的示例代码： ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ECharts 饼状图示例</title> <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script> </head> <body> <div id="chart" style="width: 600px;height:400px;"></div> <script> // 初始化echarts实例 var myChart = echarts.init(document.getElementById('chart')); // 配置项 var option = { title : { text: '饼状图示例', subtext: '数据来自网络' }, tooltip : { trigger: 'item', formatter: "{a} <br/>{b} : {c} ({d}%)" }, legend: { orient: 'vertical', left: 'left', data: ['数据1','数据2','数据3','数据4','数据5'] }, series : [ { name: '数据来源', type: 'pie', radius : '55%', center: ['50%', '60%'], data:[ {value:335, name:'数据1'}, {value:310, name:'数据2'}, {value:234, name:'数据3'}, {value:135, name:'数据4'}, {value:1548, name:'数据5'} ], itemStyle: { emphasis: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } } } ] }; // 使用刚指定的配置项和数据显示图表 myChart.setOption(option); </script> </body> </html> ``` 在这个示例中，我们创建了一个包含五个数据项的饼状图，并使用ECharts的配置项来定制图表的外观和交互行为。可以通过调整`data`数组中的数据来改变图表中显示的数据项。

阅读全文