环形饼状图
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ECharts</title> <!-- 引入 echarts.js --> <script src="../echarts.js"></script> </head> <body> <!-- 为ECharts准备一个具备大小(宽高)的Dom --> <div id="main" style="width: 600px;height:400px;"></div> <script type="text/javascript"> // 基于准备好的dom,初始化echarts实例 var myChart = echarts.init(document.getElementById('main')); // 指定图表的配置项和数据 var option = { title: { text: '各商品销量占比', subtext: 'A商场情况分析', left: 'center' }, tooltip: { trigger: 'item', formatter: '{a} <br/>{b} : {c} ({d}%)' }, legend: { orient: 'vertical', left: 'left', data: ['A商品', 'B商品', 'C商品', 'D商品', 'E商品'] }, series: [ { name: '所售商品', type: 'pie', radius: ['50%', '70%'], data: [ {value: 343, name: 'A商品'}, {value: 250, name: 'B商品'}, {value: 509, name: 'C商品'}, {value: 108, name: 'D商品'}, {value: 948, name: 'E商品'} ], } ] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); </script> </body> </html>