ECharts异步请求数据生成饼图

最新推荐文章于 2023-11-26 01:36:18 发布

qq_41780231

最新推荐文章于 2023-11-26 01:36:18 发布

阅读量2.2k

点赞数

CC 4.0 BY-SA版权

文章标签： Echarts 饼图异步请求数据 Echarts饼图异步获取数据示例

本文链接：https://blog.youkuaiyun.com/qq_41780231/article/details/80429872

本文介绍了如何使用ECharts通过异步请求从后台获取数据，并展示了一个饼图示例。首先，前端引入ECharts库，然后在HTML中创建图表容器。接着，通过ajax调用后台接口获取数据，最后将数据渲染到饼图中，展示了如何设置图表的标题、提示框和图例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前端代码：

一、引入js文件：

<script src="js/plugins/echarts/echarts.js" chartset="UTF-8" ></script>

二、html页面：

</div>

三、通过ajax获取后台数据并渲染

1、获取后台数据方法：

var arr;

arr= {
"startDate" : "2018-05-24",
"endDate" : time
}

function categoryDepartCharts(dataD) {
initCharts(dataD,'aController/selectDepartByCreatTime.do','categoryDepartCharts','占比','类别');

}

2、渲染饼图：

function initCharts(_data,_link,_elementId,_chartTitle,_seriesName){

var mycharts=echarts.init(document.getElementById(_elementId));//初始化方法

mycharts,hideLoading();//隐藏loading效果

option={

title:{

text:_chartTitle,

X:'center'

tooltip:{

trigger:'item',//提示框触发方式

formatter:"{b} : {c} ({d}%)"//提示框格式

legend:{

orient:'vertical',

200万优质内容无限畅学