Echarts饼状图绘制

时间: 2023-09-10 08:11:40 浏览: 113

echars饼状图Demo

根据给定的信息，本文将详细解释“echars饼状图Demo”所涉及的关键知识点，包括如何从后端获取JSON数据、解析数据以及如何利用ECharts库来绘制饼状图。 ### 一、ECharts简介 ECharts是一款由百度前端技术部开发的开源可视化图表库，它能够提供丰富的图表类型，并且支持多种交互方式。ECharts的特点在于它的高性能和易用性，非常适合用于展示大量的数据。此外，ECharts还提供了多种自定义选项，让用户可以根据自己的需求定制图表样式。 ### 二、获取JSON数据在本案例中，前端通过Ajax请求从服务器获取JSON格式的数据。具体步骤如下： 1. **设置Ajax配置**：通过`$.ajaxSettings.async = false;`设置Ajax为同步请求。虽然通常不建议使用同步请求（因为它会阻塞浏览器），但在某些情况下为了保证数据获取的顺序性，可能需要这样做。 2. **发起GET请求**：使用`$.getJSON`方法向指定的URL发送GET请求，这里请求的是`'<%=basePath%>/admin/report/areaOrderData.do'`，并传递了两个参数：`deliveryTimes`和`timeArray`。这些参数分别代表了订单类型和时间范围。 3. **处理响应数据**：当接收到服务器返回的JSON数据后，将其赋值给`categories`、`values`和`areaSize`变量，同时将整个数据结构存储在`jsonData`变量中。 ### 三、解析JSON数据从后端获取到的JSON数据通常包含多个数组或对象。在这个例子中，我们关注的是`categories`和`values`两个数组。它们分别代表了饼状图中的分类名称和对应的数值。 1. **分类名称**：`categories`数组包含了每个饼块的名称，即饼状图中每个部分的标签。 2. **数值**：`values`数组包含了与每个分类相对应的数值，这个数值决定了饼状图中每个部分的大小比例。 ### 四、绘制饼状图接下来是使用ECharts库来绘制饼状图的核心步骤： 1. **初始化图表**：首先通过`ec.init`方法初始化一个图表实例，并传入一个DOM元素作为容器。这里的容器ID为`"main"`。 2. **配置图表选项**：通过`option`对象来配置图表的各种属性，如标题、提示框、图例等。其中： - **标题**：配置了图表的主标题和副标题，以及标题的位置。 - **提示框**：设置了触发方式和格式化函数，用于显示鼠标悬停时出现的信息。 - **图例**：指定了图例的位置和数据来源，数据来源即前面获取的`categories`数组。 - **工具箱**：提供了各种图表操作功能，如标记点、数据视图、图形变换等。 - **计算能力**：`calculable`属性设置为`true`，表示启用图表的计算能力。 3. **设置饼状图系列**：通过`series`配置项来指定饼状图的具体数据和样式。这里的数据来源为`values`数组，即之前从后端获取的数值数组。 ### 五、完整代码实现基于以上分析，下面给出一个简化版的代码示例，用于展示如何从后端获取数据并使用ECharts绘制饼状图： ```javascript // 假设这里已经通过Ajax获取到了数据 var categories = ['类别1', '类别2', '类别3']; var values = [30, 50, 20]; var option = { title: { text: '地区统计', subtext: '订单', x: 'center' }, tooltip: { trigger: 'item', formatter: "{a}<br/>{b}:{c}({d}%)" }, legend: { orient: 'vertical', x: 'left', data: categories }, toolbox: { show: true, feature: { mark: { show: true }, dataView: { show: true, readOnly: false }, magicType: { show: true, type: ['pie', 'funnel'], option: { funnel: { x: '25%', width: '50%', funnelAlign: 'left', max: 1548 } } }, restore: { show: true }, saveAsImage: { show: true } } }, calculable: true, series: [ { name: '访问来源', type: 'pie', radius: '55%', center: ['50%', '60%'], data: (function() { var res = []; for (var i = 0; i < categories.length; i++) { res.push({ name: categories[i], value: values[i] }); } return res; })() } ] }; // 初始化图表 var myChart = ec.init(document.getElementById('main')); // 使用刚指定的配置项和数据显示图表 myChart.setOption(option); ``` 通过上述步骤，我们可以实现一个完整的饼状图绘制过程，包括从后端获取数据、解析数据以及使用ECharts库来呈现图表。这不仅适用于饼状图，还可以扩展到其他类型的图表绘制。

Echarts是一个强大的JavaScript图表库，支持多种图表类型，包括饼状图。下面是一个简单的饼状图绘制的例子：首先，在HTML文件中引入echarts： ```html <script src="https://cdn.staticfile.org/echarts/4.7.0/echarts.min.js"></script> ``` 接着，在JavaScript文件中定义一个容器，并初始化echarts： ```javascript // 定义一个容器 var container = document.getElementById('chart'); // 初始化echarts var chart = echarts.init(container); ``` 然后，定义数据和配置项： ```javascript // 定义数据 var data = [ {name: 'A', value: 10}, {name: 'B', value: 20}, {name: 'C', value: 30}, {name: 'D', value: 40}, {name: 'E', value: 50}, ]; // 定义配置项 var option = { title: { text: '饼状图示例', left: 'center' }, tooltip: { trigger: 'item', formatter: '{a} <br/>{b}: {c} ({d}%)' }, legend: { orient: 'vertical', left: 10, data: ['A', 'B', 'C', 'D', 'E'] }, 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: data } ] }; ``` 最后，将配置项应用于echarts实例： ```javascript // 应用配置项 chart.setOption(option); ``` 完整代码如下： ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Echarts 饼状图示例</title> <script src="https://cdn.staticfile.org/echarts/4.7.0/echarts.min.js"></script> </head> <body> <div id="chart" style="width: 600px; height: 400px;"></div> <script> // 定义一个容器 var container = document.getElementById('chart'); // 初始化echarts var chart = echarts.init(container); // 定义数据 var data = [ {name: 'A', value: 10}, {name: 'B', value: 20}, {name: 'C', value: 30}, {name: 'D', value: 40}, {name: 'E', value: 50}, ]; // 定义配置项 var option = { title: { text: '饼状图示例', left: 'center' }, tooltip: { trigger: 'item', formatter: '{a} <br/>{b}: {c} ({d}%)' }, legend: { orient: 'vertical', left: 10, data: ['A', 'B', 'C', 'D', 'E'] }, 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: data } ] }; // 应用配置项 chart.setOption(option); </script> </body> </html> ``` 以上代码可在浏览器中运行并查看效果。

阅读全文

Echarts饼状图绘制

相关推荐

新手指南：ASP.NET后端配合Echarts动态绘制饼状图与SQL数据交互

Vue2.0 自定义饼状图组件使用Echarts实现

Echarts 饼状图

如何定制echarts饼状图

echarts饼状图legend颜色一样

echarts饼状图 给series加背景图

echarts饼状图pie悬浮上去没有数值展示

echarts饼状图mysql_Echarts3.0+JavaWeb+Mysql实现饼图，折线图，柱状图

代码实现jsp结合echarts绘制饼状图

vue集成echarts，自定义绘制一个type='surface'的饼状图

echartsjs饼状图参数

需求：使用echarts饼状图，如何根据后端返回的数据 funListT01: [ { id: 1, name: "平台母线直供电(路)", amount: 1, }, { id: 2, name: "平台母线控制供电(路)", amount: 90, }, { id: 3, ，

Echarts 将饼状图数据显示出来

在html里面使用element插件和echarts实现饼状图

echarts好看的饼状图

vue echarts 3d环形饼状图

3d饼状图 echarts

写一个echarts 3D立体饼状图

HTML5 Canvas动态饼状图动画特效代码包

最新推荐

SpringBoot+Echarts实现请求后台数据显示饼状图

vue2.0 自定义 饼状图 (Echarts)组件的方法

【中国房地产业协会-2024研报】2024年第三季度房地产开发企业信用状况报告.pdf

JHU荣誉单变量微积分课程教案介绍

管理建模和仿真的文件

【实战篇：自定义损失函数】：构建独特损失函数解决特定问题，优化模型性能

如何在ZYNQMP平台上配置TUSB1210 USB接口芯片以实现Host模式，并确保与Linux内核的兼容性？

Naruto爱好者必备CLI测试应用

"互动学习：行动中的多样性与论文攻读经历"

【强化学习损失函数探索】：奖励函数与损失函数的深入联系及优化策略

echarts饼状图给series加背景图

vue2.0 自定义饼状图 (Echarts)组件的方法