首页echarts 双层饼图

echarts 双层饼图

时间: 2023-10-08 20:08:08 浏览: 252

ECharts是一个基于JavaScript的开源可视化库，可以用于创建各类型的图表，包括双层饼图。双层饼图也被称为环形图，它将数据分为两个层级，并以环状的方式展示。要创建双层饼图，首先需要引入ECharts库，并创建一个容器来承载图表。接下来，定义数据和配置项，并将其传递给ECharts实例的setOption方法。以下是一个简单的示例代码： ```html <!DOCTYPE html> <html> <head> <title>ECharts 双层饼图示例</title> <script src="https://cdn.staticfile.org/echarts/4.9.0/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 data = [ {value: 335, name: '直接访问'}, {value: 310, name: '邮件营销'}, {value: 234, name: '联盟广告'}, {value: 135, name: '视频广告'}, {value: 1548, name: '搜索引擎'} ]; // 定义配置项 var option = { title: { text: '双层饼图示例', subtext: '数据来源：ECharts官网', x: 'center' }, series: [ { name: '访问来源', type: 'pie', radius: ['50%', '70%'], label: { show: false }, labelLine: { show: false }, data: data } ] }; // 设置图表配置项并渲染 myChart.setOption(option); </script> </body> </html> ``` 上述代码会在页面上显示一个双层饼图，其中数据来源于`data`数组。你可以根据自己的需求修改数据和配置项，以满足自己的要求。希望能帮到你！

阅读全文